[CSS] 나를 괴롭혔던 CSS Box model, Good Bye: Position, Display

사전스터디 기간 동안, CSS...는 늘 나를 괴롭혀왔다.

 

box-model 에서, HTML 요소는 요소별로 고유의 레벨이 존재하는데

그 레벨의 특성을 무시한 채 css 작업을 하니 삽질의 연속이었다.

 

아래 내용을 다시 학습 하고 난 후, "아 왜 안돼!!!" 라며 짜증이 났던 한 순간이 떠올라 얼굴이 화끈거렸다.

 

그 이유는, 자판기 커피 머신에 대고 드립커피 왜 안나와! 라고 짜증내는 것과 같은 격인데

inline 요소에 패딩값 줘놓고 왜 안바뀌냐며 짜증이 났던 것이다...

 

정확히는, inline 요소에 패딩 값을 지정할 수는 있다.
하지만 그 요소 위와 아래에 block 요소를 배치해보면 레이아웃이 겹치게 된다.

그 이유는 inline 요소가 height를 가지지 않기 때문이다.
블록의 경우 height를 기반으로 배치가 되지만, inline은 height가 없어
content인 글자의 크기만큼만 공간을 차지하고 padding은 레이아웃에서 자리를 차지하지 못한다.
출처: https://hoya-kim.github.io/2021/08/25/padding-on-inline-element/)

이제, CSS 작업할 때 바보 같은 짓은 하지 않을 수 있게 됐다.

 

1. Display

CSS에서 display 속성은 대상 요소를 어떤 형태로 보여줄 것인가를 수정하는 속성이다.

display속성의 default 값은 HTML 요소마다 다르므로, 디자인에 용이하도록 수정한다.

display 속성에서 사용할 수 있는 속성값은 크게 4가지이다.

inline, block, inline-block, none.

 

각 특징을 비교하려면 우선 Box-Model에 대해 알아야 한다.

box-model, 출처 : https://poiemaweb.com/css3-box-model

모든 HTML 요소는 block 또는 inline요소이며, 위와 같은 box 모델에 의해 브라우저에 출력되는 모습이 정해진다.

1.1 inline 요소의 특징

- 앞의 형제 요소 바로 뒤에 위치한다.

- 가로와 세로폭은 content의 width와 height로 결정된다. 즉, 임의로 속성 값을 지정할 수 없다.

- margin-top, margin-bottom 프로퍼티를 지정할 수 없다.

- 상, 하 여백은 line-height로 지정한다.

- inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.

- inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.

 

- 예시

• span
• a
• strong
• img
• br
• input
• select
• textarea
• button

1.2 block 요소의 특징

- 항상 새로운 라인에서 시작한다.

- width는 100%의 특성을 갖는다.

- width, height, margin, padding 프로퍼티 지정이 가능하다.

- inline 요소를 자식으로 둘 수 있다.

 

- 예시

• div
• h1 ~ h6
• p
• ol
• ul
• li
• hr
• table
• form

1.3 inline-block

- block과 inline요소의 특징을 모두 갖는다.

- inline 요소 처럼 한 줄에 표현되면서 width, height, margin 프로퍼티 모두를 지정할 수 있다.

1.4 none

- none은 간단하다. 해당 요소가 출력되지 않게한다.

- visiblity: hidden 프로퍼티도 해당 요소가 화면에 보이지 않게 하는 프로퍼티이다. 다만 none은 해당 요소가 있던 공간까지 사라지게 하는 것과 다르게 해당 요소의 공간은 사라지지 않고 남아있게 된다.

2. Position

position 프로퍼티는 요소의 위치를 정의한다.

프로퍼티 값으로 fixed, absolute, relative, static이 있으며 보통 부모요소에 relative 값을 주고 자식요소에 absolute 값을 주어 사용한다.

또한, top, bottom, right, left라는 "좌표 프로퍼티"와 함께 사용한다.

position 속성을 사용하기 위해서 꼭 잊지 말아야 할 것은 바로 무엇을 기준으로 위치가 조정되는지이다.

 

2.1 static

position 프로퍼티를 선언하지 않으면, default 값은 static(정적, 고정된)이다.

그래서 보통 요소가 배치되는 위치는 부모요소가 없다면 왼쪽에서 오른쪽, 위에서 아래로 배치되고

부모요소가 있다면 부모요소의 위치를 기준으로 위 규칙에 의해 배치된다.

 

2.2 relative

static 상태일 때를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동시킨다.

2.3 absolute

static 속성을 갖는 요소를 제외하고 자신과 가장 가까운 조상요소의 위치를 기준으로 좌표 프로퍼티 만큼 이동한다.

모든 조상요소가 static이라면 body를 기준으로 삼는다.

이러한 특성때문에 absolute 속성을 사용하려면 기준으로 잡을 조상요소에  position: relative; 프로퍼티를 지정해주어야 한다.

보통은 해당요소를 div로 감싸고 div태그에 프로퍼티를 지정한다.

 

이 때, absolute 선언 시 block요소의 경우, width는 inline요소와 같이 content에 맞게 변화하므로 적절한 width를 지정해주어야 한다.

2.4 fixed

fixed 속성은 브라우저의 뷰포트를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동, 고정시킨다.

따라서, 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

fixed도 마찬가지로 block요소의 경우 선언 시 width는 inline요소와 같이 content에 맞게 변화하므로 적절한 width를 지정해주어야 한다.