상대 단위 ✅ 특징 - 다양한 플랫폼들에 유동적으로 적용할 수 있다. 단위 의미 em 폰트의 기본 크기 값에 비례한 단위 ex 폰트의 기본 X 높이에 비례한 단위 ch "0"의 기본 폭에 비례한 단위 rem 최상위 요소의 폰트 크기에 비례한 단위 vw 뷰포트 너비에 비례한 단위 vh 뷰포트 높이에 비례한 단위 vmin 뷰포트의 최소 너비, 높이에 비례한 단위 % 브라우저 기본 글꼴을 100%하고 상대적 크기를 나타냄 절대 단위 ✅ 특징 - 규격이 정해져 있다 - 각 단위들 끼리 값 변환이 가능하다. 단위 의미 cm 센티미터 단위 mm 밀리미터 단위 in 인치(inch) 단위로, 2.54cm과 같음 px 픽셀(pixels) 단위로, 1/96inch와 같음 pt 포인트(point) 단위로, 1/72inch와..
box-sizing 속성 box-sizing 속성은 CSS의 테두리 영역의 크기를 결정합니다. box-sizing 속성값에는 content-box와 border-box가 있습니다. 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. (기본값) border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. content-box 지정한 CSS width 및 height를 컨텐츠 영역에만 적용합니다. border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있습니다...
display 시작하기에 앞서 display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지 결정됩니다. block display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 즉, block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다. 대표적인 block 엘리먼트로 이나 , 태그 등을 들 수 있습니다. 특징 width, height, margin, padding 속성이 모두 반영이 됩니다. inline display 속성이 inline으로 지..
