-
[HTML] box-sizing: border-boxLanguage/HTML&CSS 2022. 10. 19. 09:09
css는 산수다
css를 적용하면서 느껴왔던 것이다. Box-model에 의해서, 패딩값이나 마진값 등등 요소의 사이즈를 조절할 때, 계산하는 것이 골치 아팠기 때문이다.
그래서 웬만하면 크기 조절을 rem과 em 등 상대 단위로 하고 있다.
상대단위란 ?
- 상대단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 따라서, 상대 단위로 작성된 사이즈는 그 기준 수치만 바꿔주면(일단 처음에 상대 단위 사이즈를 넣을 때 레이아웃을 반영했을 것이기 때문에) 일괄적으로 함께 바뀐다.
- em, rem, %, vw, vh 등이 있다.
- em과 rem은 font-size의 속성 값에 비례해서 결정되는 상대 단위이다. 둘의 차이는, em은 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준, rem은 r(root), 즉 최상위 요소의 font-size 속성 값을 의미한다. HTML에서는 <HTML> 요소의 속성 값이 기준이 된다. 그래서 rem을 사용하는 것이 유지보수에도 효율적이기 때문에(html font-size만 바꿔주면 됨) 사용을 추천한다고 한다.
출처 : https://www.daleseo.com/css-em-rem/어쨌든 그래도 불편하다. 그래서 CSS reset이라는 css 파일을 별도로 적용하여 HTML 요소들의 CSS 값들을 임의로 초기화 하기도 한다.
그래도! 어쨌든 불편하다.
왜냐면, HTML의 모든 요소들은 눈에 보이는 것이 다가 아니기 때문이다.
이미지, 본문 출처 : MDN(https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing_ CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.
box-sizing 속성을 사용해 이 방식을 바꿀 수 있습니다.
- content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
- border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
cssreset, 상대단위, box-sizing : boarder-box는 css를 산수가 아니라 즐거운 디자인 과정으로 만들어주었다.
'Language > HTML&CSS' 카테고리의 다른 글
[CSS] Position : 레이아웃을 독립적으로 배치하는 방법 (0) 2022.10.19 [HTML] HTML안에 빈 공백을 넣으려면? (0) 2022.10.19 src와 href, 차이는 무엇일까 (0) 2022.10.19 [HTML] div 태그는 현업에서 어떻게 쓰일까? (0) 2022.10.19 [CSS] 나를 괴롭혔던 CSS Box model, Good Bye: Position, Display (0) 2022.10.18