다시 시작하는 CSS😐
Box
Box Model
html에 있는 모든 요소들은 css로 스타일 적용하면 Box로 표현된다.
웹사이트에서 Inspect(검사)-Elements 하단에 보이는 (주·노·초·파)네모상자가 Box Model이다. html의 모든 요소인 Box는 일정한 형태의 모델로 내부는 달라도 동일한 구조이다.
border: 굵기 스타일 색상 (순서는 상관없음) / none (테두리 없는 경우)
border-radius: □px (설정값만큼 모서리가 깎임, 값이 클수록 둥글게됨)
border-radius: 50% (동그라미 모양 만들기)
좌측 상단, 우측 하단만 각각 모서리 깎기
border-top-left-radius: 10px;
border-bottom-right-radius: 30px;
속기형 Shorthand (빠르게 쓰는 법)
top right bottom left 시계방향으로 작성
padding: □px(상) □px(우) □px(하) □px(좌);
margin: □px(상,하) □px(좌,우);
padding: □px(상) □px(좌,우) □px(하);
(상-하/좌-우 세트,
좌 방향의 값이 없다면 우 방향 값으로, 하 방향의 값이 없다면 상 방향 값으로 자동으로 적용된다)
Box Sizing
* {
box-sizing: content-box(default) | border-box;
}기본값으로 설정되어 있는 'content-box'는 css로 설정한 'width', 'height'가 content 기준으로 스타일이 적용된다는 의미이다.
추가로 padding 값을 준다면 content 밖으로 영역이 더해진다.
처음에 생각했던 가로/세로 길이에 맞는 요소를 만들기 위해 'width', 'height'에 각각 padding 값을 뺀 값으로 선언하게 되며, 추가로 계산 작업이 따르게 된다.
'content-box' 기준이 아니라 border까지의 영역을 기준으로 사이즈를 설정하도록 'border-box' 스타일로 변경한다.
border-box에 padding, border 값이 추가되면 content는 자동적으로 계산되어 사이즈가 지정된다.
대부분 css를 작성할 때, 가장 먼저 모든 요소들의 box-sizing을 border-box로 선언해 미리 세팅한다.✨
✔첫번째 선언!
우리가 생각한 대로 동작하는 박스를 위한 스타일 적용😁
* {
box-sizing: border-box;
}Box (Type)
Box Model만 알았다고 Box를 master한 것이 아니다!!
Box의 개념을 아는 것이 중요★
display 는 Box Type을 결정짓는 css 속성이다.
어떤 Type의 Box를 사용하냐에 따라서 Box Model 작동 방식도 달라진다.
html 모든 요소들은 기본적으로 display 값을 갖고 있다.
(box type(display 속성값): block, inline, inline-block, flex)
Box - Block
Block은 '길막' 성질을 꼭 기억!
해당 요소 옆에 다른 요소가 '오지 못하게 막는다'(나만의 영역을 차지하다)는 의미이다.
<Block의 기본 성질> 중요★
1) 따로 width를 선언하지 않은 경우, width = 부모의 content-box의 width의 100%
(부모 요소에도 별도로 width를 선언하지 않았다면 body의 width 값만큼 설정된다)
2) 따로 width를 선언한 경우, 남은 공간은 자동으로 margin으로 채움(빈 영역이 아님!🙅♀️🙅♂️)
✨ margin: 0 auto; (Block을 가운데 배치 할 때 많이 사용하는 코드😲)
3) Box Model의 속성들(width, height, padding, border, margin)은 Block 타입인 요소에게 모두 사용 가능하다!✨
4) 따로 부모의 height를 선언하지 않은 경우, 자식 요소의 height의 합 = 부모의 height
Box - Inline
Inline -> 흐름
요소 옆에 다른 요소들이 줄줄이 나열되는 성질이 있다.
Inline 요소들은 좌에서 우로 줄간격에 맞춰서 흐르는 것을 우선으로 한다.
요소의 너비보다 특정 줄에 남은 공간이 작은 경우 아래 줄로 내려가 위치한다.
(display 값이 Inline인 태그: span, anchor, strong)
Block(면); 영역 vs Inline(선); 흐름
✨ width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom은 Inline의 흐름을 방해하는 성질이기 때문에 Inline 타입인 요소들은 (위, 아래 영역에 영향을 주는)해당 속성들을 사용할 수 없다!!😲
위의 속성값을 작성해도 적용이 되지 않을 뿐 에러가 발생하지 않으므로 주의해야 한다.🤦♀️🤦♂️
☪ Inline 타입인 요소의 display 속성값으로 (길이에 영향을 주는) width가 불가한 이유?
🅰 남은 공간에 요소를 담을 수 없는 상황인 경우, inline 요소처럼 중간을 끊어서 아래 줄로 내려가게 할 수도 없고, 중간을 끊지 않고 부모 요소 영역 밖으로 나가는 상태로 둘 수 없기 때문이다.
Box - Inline Block
Block의 좋은 성질 ➕ Inline의 좋은 성질
Inline처럼 가로로 흐르는 동시에 Block처럼 영역도 잡을 수 있다.
Inline일 때 적용되지 않는 속성들(width, height 등)이 사용 가능하다.
Inline Block은 유용한 타입이나 각각의 Box Type에 따라서 사용 용도, 사용하는 타이밍이 달라지기 때문에 시기적절하게 사용해야 한다.
☪ Block, Inline과 Inline-Block은 각각 언제 사용되는가?
🅰
-
block: 공간의 영역을 차지해야 하는 경우, width나 height를 사용해야 하는 경우('display: block'을 가장 많이 사용)
width나 height 사이즈를 잡을 수 없는 inline 요소를 사이즈를 잡을 수 있게 만들기 위해서 자주 사용 -
inline: 텍스트와 같이 문단에서 줄 간격에 따라 흘러야 하는 경우(inline으로 억지로 바꾸는 경우는 극히 드물다)
-
inline-block: width나 height 사이즈를 설정해야 하고 동시에 별도의 설정 없이(ex. float, flex) 가로 배치가 자동으로 되도록 설정하고 싶은 경우
※ 요소 간에 간격을 설정하기 위해 margin을 사용할 때, margin-top 또는 margin-bottom 중 하나로 일관되게 사용하는 것을 권장!
