CSS-basic
항상 Box모델이라는거에 의문이있었다.
왜 Box모델이라고 불리는가?
그런데 오늘에서야 해결됐다
바로, 아래의 형형색색의 상자들...즉,
모든 요소들이 다
Box
였다는 사실을...
1. Box Model
즉, HTML의 모든 요소들은 결국에는 CSS로 표현이 될 때 Box로 표현이된다.
HTML모든 요소는 결국 Box다.
근데 이 Box는 일정한 형태의 모델로 똑같이 구성이 되어있기 때문에 이것을 Box모델이라고 하는 것이다.
이 Box가 잘 이해가 안되다면, 예를들어 '라면'이있다.
이 라면은 모양은 제조사, 겉 모양의 디자인 등 제각각일지라도 안에 내용물, 스프 등은 같다. 이를 곧 인스턴트 라면이라고 하는 것처럼 Box또한 결국에는 제각각 다르게 생겼다고 할 지라도 그 안에 들어있는 구조는 동일하다.
또한 Box모델은 우리가 요소들을 스타일링하고 크기를 잡고, 영역을 잡는 기본적으로 많이 사용하게 될 속성들이다.
Content / Padding / Border / Margin / Shorhand
| BoxModel | 속성(attribute) |
설명 |
| Content | 가로 width, 세로 heigth | |
| Padding | bottom | (비교적 간단)안쪽 여백, 즉 content와 border 사이의 공간을 나타내는 padding 예) padding-top : 20px |
| Border | border style : 1. solid 2. dashed 3. dotted ... border-radius |
(사용하는게 특이, boder는 비교적 알려줘야할게 많다.) 테두리를 나타내는 border 예 ) border : 1px solid #000 border : none border-radius : 4px |
| Margin | 바깥여백, 즉 요소와 요소 사이의 간격을나타내는 margin | |
| 속기형 Shorthand (Padding, Margin 사용) |
빠르게 쓰는법 padding이나 margin같은 경우는, top right left bottom라고해서 선언할게 4개나있다. 가령, 어떤 요소한테 모든 면의 안쪽여백을 30px씩 주고싶다면.. ?  언제 다 이렇게 선언을 할까...? 이때 바로 속기형을 사용하면된다. |
👍 추가메모 :
(1) Border은 비교적 알려줘야할게 많다고했는데,
어쩌면 정말 당연하다. 왜냐하면 테두리를 만들꺼잖아?
그런데 "테두리를 만들어줘! "라고하면 , 당연히 "응? 어떤 테두리를 원하는데?" 라고 질문이 올것이다.
따라서 예 ) border : 1px solid #000 와 같이 굵기, 스타일, 색상 를 명시를 해준다.
(2) border-radius : 4px 에 대해 쫌 더 살펴보자.
redius는 반경===반지름 이라는 의미이다.
그럼 둥글게 하는거랑 뭔가 관련이 있을거라고 유추할 수 있겠다.
따라서 4px이라고 주면 그만큼 둥글게된다.
(3) 위에 왼쪽만 조금 즉, 개별적으로 깎고싶다면 ?
border-top-left-radius :10px
border-bottom-right-radius:10px;
(4) border도 위쪽이라 아래쪽만 즉, 이또한 개별적으로 만들고 싶다면 ?
border-top : 1px solid #000;
border-bottom : 4px solid #000;
(5) 속기형 Shorthand
시계방향으로 나열하면 끝!
padding: 10px 20px 30px 40px;
그럼 아래와같이 top right left bottom 시계방향으로 속성을 적용한다.
그리고 margin 을 만들때는 margin: 20px 40px;이렇게 주게되면
20px 40px 20px 40px 이라고 적어주지 않았음에도 불구하고 저절로
bottom , left까지 적어준것을 알 수 있는데,
이는 top이랑 bottem이 세트라서 바로 20px이 들어가고,
right와 left또한 세트라서 저절로 40이 자동으로 들어가는 것이다. 이것을 곧 속기형이라고 한다.
(이는 padding또한 똑같이 적용이 된다)
1. Box Sizing
가로x세로 길이가 480인 정사각형이있다.
그리고 나는 선택자로 width:480px; heigth:48px;를 주고 padding을 주고나서,
개발자도구에서 보니 530*520이 되어있는게 아닌가.
그래서 개발자 도구 Computed를 살펴보았다.
그러니까 콘텐츠박스에는 480*480이 잘 들어왔지만 padding이 추가된것이다. 그래서 530*520이 되었다.
그럼 이때 가로*세로가 480*480인 네모로 만들어 주고싶다면 어떻게해야될까?
먼저, ❓왜 이런일이 일어나는지에 대해서 알아 볼 필요가 있다.
이것이 바로 Box Sizing과 관련이 있는 것이다.
자, 여기를 보자!
box-sizing이라는 속성은 box의 size를 잡는 법에 대한 선언이다.
그런데 html에 대한 모든 기본적인 요소들은 기본적으로 box-sizing값이 content-box로 설정되어있다.
이제 다시 Box Model에 대해 살펴보자.
Sizing을 잡을때 가로 길이 선언하는 width heigth 값과 관련이있다.
Box Sizing이 content-box으로 설정이 되어있다는 뜻은 우리가 width heigth 사용 할때,
only Content box만의 width 그리고 height로 값이 설정이된다.
그래서 아까전에 적용된 것을 다시 본다면 정말로 Content box에서만 480 *480 적용된것을 볼 수 가 있다.
그런데 우리가 보통 가로 * 세로 값을 생각을 할때 Content box만의 Size을 생각하기 보다는
아래 그림같이 Border까지 영역을 모두 다 포함한 덩어리를 하나의 가로*세로로 보는게 더 자연스럽다.
즉, 사람의 인지구조와 CSS동작하는게 똑같이 조작하기위해서 box-sizing값을바꿔줘야한다.
box-sizing속성에 에 border-box라고 값을 바꿔주었다.
그럼 이거를 해석하자면 "나는 box sizing을 잡을때 content-box를 기준으로 사이즈를 잡는게 아니라 border-box를 기준으로 사이즈를 잡겠다" 라고 선언해주는 것이다. 즉! border까지 영역을 가로*세로로 보겠다! 라는 뜻으로 선언해주는 것이다.
이렇게 선언해주면 width의 경우 더이상 content-box의 width가 아니라 content + padding+border까지 더한 전체 가로를 480으로 묶고, heigth 또한 content + padding+border까지 포함한 영역을 480으로 보게되는것이다.
그럼 내가 content-box를 수동으로 430*440으로 지정해주는 것이아닌, 알아서 계산되어 [왼쪽에 div.box]을 보게되면 480*480 이라고 계산된 결과값이 보인다. 근데, border에다가 값을 넣으면 어떻게 될지 궁금하니까 넣어보자!
border에다가 4px solid #000;으로 넣어줬더니 크기는 480*480으로 같은데 Computed에 가서 보면 contetn-box의 길이가 422*422로 더 줄어들었고, border에 4px씩 양옆 8px씩 들어가므로 -8px씩 줄어들게 된것이다.
따라서 대다수의 프론트엔드 개발자들은 처음 style.css를 작성 할 때
아래와 같이 전체선택자(모든 태그(요소)를 지칭)인 *를 사용하여 box-sizing잡는 기준을 재설정할게! 뭐라고?
content-box가 기준이아니라 border-box라고 기준을 잡아줘! 라고 깔고 시작한다.
이러면 우리가 모든 CSS작업을할때 사람의 상식에 맞게 동작하는 box를 위한 조치를 해주게 된것이다.👍🥰
✨ emmet 완전 꿀팁 {$}
참고자료 :
최근댓글