[CSS] CSS 기본 지식 (우선순위, box-sizing, position, layout... etc)

1. CSS 우선 순위

!important

inline style (코드에 직접 삽입한 CSS 코드)

id 선택자

class 선택자

태그 선택자

---

2. box-sizing

box-sizing은 CSS 속성으로 요소의 크기를 계산하는 방식을 지정하는데 사용된다.

HTML 요소의 크기는 그림의 파란색 부분, content의 크기에만 영향을 받지만, box-sizing을 사용하면 요소의 전체 크기에 여백(padding)과 테두리(border)를 포함해서 계산할 수 있다.

 

1) content-box (기본값)

요소의 크기가 내용 영역만 포함되어 계산된다.

여백과 테두리는 이 기본값에 추가로 더해진다.

 

2) border-box

요소의 크기가 내용 영역 + 여백과 테두리까지 포함된다.

 

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: box-content;
}

 

box 클래스가 있을 때, box-content라면 가로와 세로는 아래와 같다.

가로 값은 기본 200 + 왼쪽 패딩 20 + 오른쪽 패딩 20 + 왼쪽 보더 2 + 오른쪽 보더 2 = 244px

세로 값은 기본 200 + 위쪽 패딩 20 + 아래쪽 패딩 20 + 위쪽 보더 2 + 아래쪽 보더 2 = 244px이 된다.

 

반면 border-box를 하면 가로 너비 200, 세로 너비 200에 맞춰 패딩값과 보더값이 자동으로 조절된다.

---

3. inline, block, inline-block

1) inline

인라인 값은 한 줄에 나란히 표시된다.

자동으로 너비와 높이를 가지지 않으며, 콘텐츠의 크기에 따라 유연하게 조절된다.

좌우 여백, 상하 여백은 적용되지만 특정 너비와 높이를 조절할 수는 없다.

ex. <span> <a> <em> <strong>...

 

2) block

블록 값은 한 줄 전체를 차지한다.

가로 영역을 모두 차지해서 한 줄에 하나의 요소만 표시된다. 

너비와 높이를 가질 수 있고, 기본적으로 너비는 부모 요소의 100%를 가진다.

ex. <div> <p> <h1>...

 

3) inline-block

인라인 요소처럼 한 줄에 나란히 표시되지만 블록 요소처럼 너비와 높이를 갖는다.

ex. <img> <button>...

 

특성	inline	block	inline-block
한 줄에 표시	가능	불가능	가능
너비/높이 설정	불가능	가능	가능
좌우 여백(margin)	가능	가능	가능
상하 여백(padding)	가능	가능	가능
박스 모델 적용	부분적	전체	부분적

---

4. 레이아웃 구성

See the Pen 레이아웃 by summermong (@summermong) on CodePen.

 

레이아웃 설계 시 이렇게 섹션 별로 시맨틱 태그를 사용하면 보다 직관적이다.

---

5. Positioning

부모 요소는 Relative, 자식 요소는 Absolute로 진행하면 부모 요소를 기준으로 자식 요소 위치를 배정할 수 있다.

 

See the Pen 부모자식 by summermong (@summermong) on CodePen.

 

부모 요소인 라벤다색 사각형 안에 자식 요소인 회색 사각형이 위치해 있다.

부모 요소를 기준으로 회색 사각형은 아래에서 0, 오른쪽에서 0이라 저기에 있는 거다.

 

See the Pen 위치변환 by summermong (@summermong) on CodePen.

 

자식 요소는 부모 요소의 높이를 기준으로 그 위치가 결정된다.

예를 들어 1번 자식의 경우 top이 부모 요소의 높이값이라 100%로 지정되어 있다.

부모 요소의 높이가 200px이니 맨 위에서부터 200px만큼 내려가서 시작하게 되는 것이다.

안으로 들이고 싶다면 calc(100% - 자식요소의 높이px)로 설정해주면 된다.

 

가장 가운데에 있는 4번 자식의 경우 top, left를 50%씩 주어도 뭔가 애매하게 위치가 잡힌다.

이유는 요소의 좌측 상단 모서리가 부모 요소의 가운데에 위치하게 되면서 약간 벗어나게 되기 때문인데, 이를 해결하기 위해 transform: translate(-50%, -50%)를 사용하면 수평 및 수직으로 요소의 중심점이 이동하며 부모 요소의 가운데로 정확하게 위치하게 된다.

---

6. 순서를 만드는 가상 클래스

순서를 만드는 CSS의 가상 클래스로는 nth-child와 nth-of-type 2가지가 있다.

가장 큰 차이점은 nth-child는 태그로 구분 짓는 게 아니라 오로지 html 내 순서로만 생각한다는 것이다.

 

See the Pen nth-child by summermong (@summermong) on CodePen.

 

코드에서 CSS 부분을 보면 div nth-child 1, 2, 3, last-child로 적용되어 있다.

이 때 html에 h2 태그가 div 사이로 들어가 div h2 div... 이런 형태가 된다면 h2가 nth-child(2)가 되면서 레이아웃이 달라지게 된다. 위에서 말한 것처럼 nth-child는 진짜 순서만 카운트하기 때문이다.

 

div 만 카운트해서 CSS를 적용하고 싶다면 nth-of-type을 사용해 태그를 고려하게 한다.

See the Pen nthoftype by summermong (@summermong) on CodePen.

그러면 이렇게 h2 태그가 들어와도 h2를 카운트하지 않고 div끼리만 순서를 매긴다.

---