SOMEDAY/HTML | CSS | JS56 [CSS] width & max-width & box-sizing 💾 Editor: VSCode 👉 z-index 공중에 떠있는 애들이 많으면 누가 맨 앞에 올 것인가? 순서 지정 html 💡 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse molestiae dolore sed, est soluta earum. Temporibus cupiditate, tempora doloribus aliquid quo ipsum maxime, architecto iste rerum maiores consequatur quas corrupti? 박스를 하나 더 복사해서 style에 padding을 50px를 주면 위 이미지와 같이 보임 👉 width width는 content 영역의 너비를 의미함 (box 가 아니라 con.. 2023. 1. 5. [CSS] position 으로 박스 위치 조정 & 좌표 💾 Editor: VSCode 이미지가 이렇게 여백이 있을 시에는 body 태그에 style="margin:0px;" 을 줌 Fly me to the moon Do you want to go? click this button 그럼 여백 없이 꽉 채워짐 👉 position (좌표 이동 가능, 공중에 붕 뜸) https://developer.mozilla.org/ko/docs/Web/CSS/position relative: 기준점을 기준으로 이동 (내 위치 기준) static: 좌표이동 X fixed: 현재 화면이 기준 (ex- 고정된 메뉴) absolute: 내 부모 태그 중에 relative 가진 부모 기준 💡 오른쪽 아래 정렬 /* 부모 태그 */ .main-background { width: 100%.. 2023. 1. 4. [CSS] 배경 넣기 & margin collapse 💾 Editor: VSCode 🐥 background-size contain: 세로 고정, 가로로 이미지 반복됨 cover: 이미지를 꽉 채움 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size 🐥 background-repeat no-repeat: 배경 반복 금지 https://developer.mozilla.org/ko/docs/Web/CSS/background-repeat 🐥 background-position (배경 위치 조정) center right left top bottom https://developer.mozilla.org/en-US/docs/Web/CSS/background-position 🐥 background-attac.. 2023. 1. 3. [CSS] selector 문법으로 css 코드 양 줄임 💾 Editor: VSCode 👉 참고 이름 날짜 블로그 글 가성비 맛집 발견 float 준 다음에 margin-top이 안 먹힐 경우에는 float 준 요소 다음에 clear:both 넣은 추가함 👉 navbar 만들기 layout1.html (1) 영화 맛집 IT 컴퓨터 대신에 사용. 기능은 똑같음 style.css .navbar li { display: inline-block; } selector 문법 공백: '~안에 있는' 모든 자식 selector 문법 > : '~안에 있는' 직계 자식 layout.html (2) 영화 맛집 IT 컴퓨터 태그 추가. 경로가 지정되지 않았을 경우에는 "#" 이런 형태로 우선 작성 style.css /* 내비게이션 */ .navbar li { display: inl.. 2023. 1. 1. [CSS] layout 레이아웃 2 - display : inline-block 💾 Editor: VSCode 👉 display block: 한 행을 전부 차지 inline-block: 내 크기만큼 차지 (어울림) index.html 와 사이에 공백이 있으면 안 됨... 와 사이에 주석을 주는 것도 방법 중 하나임 부모 태그에 font-size: 0px; 주는 것도 또 다른 방법임 => 상속 style.css .left-menu { width: 20%; height: 400px; background: cornflowerblue; /* float: left; 추가 */ display: inline-block; /* 추가 */ } .right { width: 80%; height: 400px; background: coral; /* float: left; 추가 */ display: in.. 2022. 12. 31. [CSS] layout 레이아웃 1 - float 💾 Editor: VSCode 위와 같은 레이아웃을 배치하는 실습 진행. 오른쪽처럼 전체 레이아웃을 감싸는 wrapper(or container) 박스를 만들어두면 좋음. layout1.html .container .container { width: 800px; /* 최대 width를 설정 */ } 전체 레이아웃을 감싸는 wrapper box .header .header { width: 100%; /* 부모 태그의 width의 100% */ height: 100px; background: aquamarine; } width를 100% 주면 부모 태그의 width의 100%를 사용한다는 의미 .left-menu && .right (수정전) .left-menu { width: 20%; height: 400p.. 2022. 12. 30. 이전 1 2 3 4 5 ··· 10 다음
