-
box-sizing이란?카테고리 없음 2024. 6. 4. 01:04
목차
- box-sizing이란?
- box-sizing 적용해보기
- box-sizing 컨텐츠 영역 조절하기
- 적용한 값 확인하는 방법
- 컨텐츠 영역 만들기
- 지금까지 배운 용어 정리
1. box-sizing이란?
지난번에 배운 border 기억나시나요?!
border란 테두리를 만들어주는 속성이며 안쪽 여백인 padding, 바깥쪽 여백인 margin 사이에 위치합니다.
중요한 속성이니 잘 기억해주세용:)✓
2. 컨텐츠 영역에 border까지를 포함시키는 box-sizing속성★
3. div.html 생성해주기
전달사항. 기본세팅하는 방법은 전에도 올려드렸기 때문에 미리 세팅해놓고 시작하였습니다!
4. box-sizing 적용해보기
전달사항. css에 파일 생성 후 초기화 하는 방법 또한 전에 알려드렸기 때문에 미리 세팅해놨습니다.
5. box-sizing 컨텐츠 영역 조절하기
주의사항. 분명 적용을 시켰는데도 불구하고 Open with Live Server를 눌렀을 때 속성들이 적용이 되지 않는다면
링크를 잘 걸어 두었는지 속성을 잘 걸어두었는지 html 태그가 css에 잘 작성이 되었는지 확인해 주세요!
(코딩에 익숙치 않은 분들이라면 아마 이런 실수를 많이 하실거에요!)
링크 거는 법 : ./(현재파일)에서/css(폴더)에서/test.css
6. 적용한 값 확인하는 방법
Tip. 만약 적용 한 값이 마음에 들지 않아 변경하고 싶을 때 검사에 들어 간 상태에서 값을 변경해 미리보기를 할 수 있으며 창을 닫으면 다시 원래대로 돌아갑니다.
7. 지금까지 배운 모든 속성을 이용해 컨텐츠 영역 만들기
주의 사항. 전에 적용했었던 파일에 다른 속성들도 계속 이어서 작업하다보면 꼬이고 헷갈릴 수 있기 때문에
새로운 test를 할때마다 새로운 파일을 만들어 주셔야 합니다.
8. 지금까지 배운 용어 정리
컨텐츠 영역에 border까지를 포함시키는 box-sizing속성★
css box model을 계산할때 보통 width + (padding*2) + (border*2) + (margin*2) 이런 공식으로 계산을 하지만, box-sizing속성을 이용하면 padding영역과 border영역을 컨텐츠 영역(width/height)안에 포함시켜줍니다.요소의 테두리 영역의 크기를 결정하는 방법 2가지
- box-sizing : ★border-box=컨텐츠 영역안에 padding과 border를 포함시킵니다.
- box-sizing : content-box=설정하지 않을 때 기본값을 말합니다.div같은 경우 content, padding, border, margin 영역이 존재하며 width와 height는 content box영역의 기준으로 만들어지고 padding을 설정하면 padding 크기 만큼 box가 증가하고 border를 설정하면 border만큼 box의 전체적인 크기가 커지는 걸 알 수 있습니다.
content-box일때 width와 height를 지정하면 설정한 만큼 커지고 box-sizing으로 설정하면 기준이 바깥쪽 boder가 되기 때문에 content영역이 padding과 border에 영향을 받아 줄어들게 됩니다.
box-sizing: border-box; : 영역의 크기를 자동으로 조절해줍니다.
만약에 box-sizing: border-box;를 적용하지 않는다면 영상에서 보시는 거와 같이 width와 height를 처음 body에 적용해준 margin에 값과 같이 변경해주는 수고를 해야합니다.display: block; : 이미지를 block속성으로 변경한다는 뜻입니다.
overflow: hidden; : 정해진 너비(높이)를 초과한 내용이 있을 때, 스크롤이 생기지 않고 해당 내용을 보여주지 않는 것입니다.
width: 100%; : 부모영역의 맞게 100% 적용된다는 뜻입니다.
box-sizing: border-box; : 영역의 크기를 자동으로 조절해줍니다.
마무리
오늘은 box-sizing에 대해 배워보았는데요! 어떠셨나요?
처음엔 엄청 헷갈렸는데 계속 블로그 작성하면서 복습하고 하다보니까
괜찮아지고 있는 것 같긴 한 것 같아요! 아직 배울게 정말 많아서 걱정이지만
정말 열심히 해서 꼭 멋진 직장인이 되고 싶네요:)
오늘도 정말 고생 많으셨고 행복한 밤 되세요❤️
