[CSS ] 10. 레이아웃 예제 모음

[CSS ] 10. 레이아웃 예제 모음

---

이 글은 CSS 레이아웃 예제를 한 곳에 모아 정리한 글이다. 예제는 CodePen을 iframe으로 불러와 티스토리 스킨 스타일과 겹치지 않게 구성하였다.

---

0. 사용 방법

• 아래 예제 영역은 CodePen 결과 화면이다.
• 예제는 한 화면에 1~5번까지 이어서 나온다.
• 예제가 잘리면 iframe의 height 값을 늘리면 된다.

---

1. block / inline-block 예제

• inline-block이 한 줄에 나란히 배치되는 것을 확인한다.

2. 가운데 정렬 예제

• margin: 0 auto를 이용한 가로 가운데 정렬을 확인한다.

3. position 예제

• relative + absolute 조합으로 위치 지정이 되는 것을 확인한다.

4. Flexbox 레이아웃 예제

• display: flex와 정렬(간격) 동작을 확인한다.

5. Grid 레이아웃 예제

• grid-template-columns 기반으로 격자 배치를 확인한다.

---

예제 실행 화면

---

정리

• 레이아웃 예제는 실행 화면으로 확인하는 것이 이해가 빠르다.
• 티스토리에서는 예제를 iframe으로 분리하면 스타일 충돌을 피할 수 있다.
• 예제 화면이 잘리면 iframe height 값을 조절하면 된다.