box-sizing
-
HTML 요소는 사각형 박스 형태로 페이지 내 공간을 차지하게 되는데, 이 박스는 요소의 content, padding, border, margin 모두 포함한다.
-
개발자가 박스의 모든 영역을 일일이 계산하기 어려우므로, 박스 너비를 보다 쉽게 제어하기 위해 box-sizing이라는 property를 사용한다.
-
content-box : box-sizing을 사용하지 않을 때 기본값으로 요소의 너비(width)는 컨텐츠 영역만을 나타낸다.
-
border-box : margin을 제외하고 content, padding, border를 합한 값
CSS Selector 우선 순위
inline CSS > id > class > tag
이미지
img 태그
<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">-
img 태그는 closing 태그가 필요없는 semantic tag
-
alt : 만약 사진을 제대로 불러들이지 못한 경우 뜨는 텍스트
-
src : 사진의 파일 위치 혹은 URL
CSS img
img{
width: 300px;
height: 300px;
background-size: 100%;
}-
CSS는 CSS 파일에서 다루는게 유지보수에 훨씬 편하다.
-
img를 CSS 파일에서 제어하면 가로와 세로 크기도 정할 수 있다.
-
해당 이미지를 원본 크기처럼 보는게 아니라 정해진 가로 크기만큼 꽉 채워 보고 싶다면, background-size: 100%를 넣어주면 된다.
Display Property
1. inline (display : inline)
-
inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다.
-
태그 안의 글자 길이만큼의 영역만 나타낸다.
-
width, height 속성에 영향을 받지 않는다.
-
ex) span, a, img 태그는 inline 속성을 가진다.
2. block (display : block)
-
바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다.
-
줄 바꿈이 되는 것처럼 보인다.
-
inline과 달리, 새로운 줄로 시작하며 해당 줄의 가로를 다 차지한다.
-
대부분의 태그가 block 속성을 가진다.
-
ex) div, h1, header, p, table 태그
3. inline-block (display : inline-block)
-
inline과 같이 양 옆으로 화면에 나열할 수 있다.
-
inline과 달리 width, height 속성을 통해 사이즈 조절이 가능하다.
-
ex) button, input, select는 inline-block을 속성으로 가진다.
4. none (display : none)
-
화면에 보이지 않는다.
-
네이버 검색 창처럼, 평소에는 관련 목록이 뜨지 않지만 검색 창에 글자를 넣는 순간 밑으로 관련 검색어들이 나열된다.
-
interactive한 웹을 구현할 수 있다.
💡 태그 고유의 display 속성은 CSS에서 개발자가 직접 바꿀 수 있다.
list
- list 아이템은 배열과 같이 순서를 정해서 불러올 수 있다.
selector{
li: first-child
li: last-child
li: nth-child(odd)
li: nth-child(even)
}-
selector는 tag, .class, #id 모두 가능하다.
-
이로써 해당 태그의 첫번째 혹은 마지막 요소도 알 수 있고, 홀수번째 혹은 짝수 번째를 호출할 수도 있다.
