이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 박스 모델 (padding, margin)
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, inline과 block 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분
gogogameboy.tistory.com
지난 포스트의 박스 모델에 이어 이번에는 박스 사이징에 대해서 공부를 해보겠습니다.
box-sizing
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
<style> 태그 내의 *{ } 선택자는 이 웹페이지 내의 모든 태그에 적용하는 선택자입니다.
border의 두께가 달라서 두 박스의 크기도 달라지는 것을 box-sizing:border-box로 맞춰줄 수 있습니다.
다음 포스트
CSS 마진 겹침
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 박스 사이징 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 포지션 static과 relative (0) | 2021.01.02 |
|---|---|
| CSS 마진 겹침 (0) | 2021.01.01 |
| CSS 박스 모델 (padding, margin) (0) | 2021.01.01 |
| CSS, inline과 block (0) | 2020.12.31 |
| CSS 선택자 우선 순위 (캐스케이딩) (0) | 2020.12.31 |
댓글