CSS3 배운걸 정리해 보자!🙌 Part-2

woong·2023년 7월 16일

📌1. CSS Position 속성

Position 속성을 이용하면 요소를 원하는 위치에 배치할 수 있다.
Absolute, Relative, Fixed, Static 등 다양한 Position 속성값을 사용하여 요소를 조작할 수 있다.
특히 Relative와 Absolute를 조합하여 부모 요소 내에서 자유롭게 배치할 수 있는 기술을 활용할 수 있다.

Relative와 Absolute 예시

<div class="container">
  <div class="box1">Box 1</div>
</div>

.container {
  position: relative; /* 본인의 위치를 기준으로 이동 */
  width: 400px;
  height: 300px;
  background-color: #f2f2f2;
}

.box1 {
  position: absolute; /* 부모요소에 relative설정이 있는지 확인하고 설정이 있는 부모 기준으로 이동 */
  /*없다면 body태그 기준으로 이동*/
  top: 20px; /* 부모 요소의 위쪽으로부터 20px만큼 이동 */
  left: 30px; /* 부모 요소의 왼쪽으로부터 30px만큼 이동 */
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

📌2. Flexbox(Flex)

Flexbox는 요소의 크기와 위치를 유연하게 조정하는 레이아웃 모델이다.
부모 요소에 display: flex 속성을 적용하고, 자식 요소들을 유연하게 배치할 수 있다.
Flex의 속성인 flex-direction, justify-content, align-items 등을 활용하여 요소를 원하는 방식으로 정렬할 수 있다.

Flexbox 예시

<!-- HTML -->
<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

/* CSS */
.container {
display: flex; /* Flex 컨테이너로 설정하여 내부 요소들을 가로로 배치 */
flex-wrap: wrap; /* 화면 크기에 따라 요소들이 줄바꿈되도록 설정 */
justify-content: center; /* 가로 방향으로 요소들을 가운데 정렬 */
}

.box {
width: 200px; /* 박스의 너비를 200px로 설정 */
height: 200px; /* 박스의 높이를 200px로 설정 */
display: flex; /* 내부 요소들을 가운데 정렬하기 위해 다시 Flex 컨테이너로 설정 */
align-items: center; /* 세로 방향으로 요소들을 가운데 정렬 */
justify-content: center; /* 가로 방향으로 요소들을 가운데 정렬 */
}

HTML에서는 .container라는 클래스를 가진 부모 요소와 .box라는 클래스를 가진 자식 요소들을 정의하고 있다.
CSS에서는 .container에 display: flex 속성을 적용하여 자식 요소들을 배치하고, flex-wrap: wrap을 통해 화면 크기에 따라 요소들이 줄바꿈되도록 설정한다.

📌3. CSS Grid

CSS Grid는 2차원 그리드 레이아웃을 생성하는 기술로, 요소를 행(row)과 열(column)로 배치한다.
Grid 컨테이너와 Grid 아이템으로 구성되며, Grid 영역을 정의하여 요소를 배치하고 정렬할 수 있다.
Grid의 속성인 grid-template-rows, grid-template-columns, grid-gap 등을 사용하여 유연한 그리드 레이아웃을 구성할 수 있다.

grid 예시

/* CSS */
.container {
display: grid; /* 그리드 컨테이너로 설정하여 내부 요소들을 그리드로 배치 */
grid-template-rows: 1fr 1fr 1fr; /* 그리드 행의 크기를 동일한 비율로 설정 */
}

.box {
background-color: #f2f2f2; /* 박스의 배경색을 회색으로 설정 */
border: solid 1px black; /* 박스에 테두리를 설정 */
}

📌4. 반응형 디자인

Media Query를 활용하여 화면의 크기에 따라 스타일을 동적으로 변경할 수 있다.
다양한 미디어 쿼리를 활용하여 특정 화면 크기에서는 Flex 또는 Grid를 사용하고, 다른 화면 크기에서는 Position 등을 사용하여 디자인을 최적화할 수 있다.
모바일 장치, 태블릿, 데스크탑 등 다양한 화면 크기에서 일관된 사용자 경험을 제공하는 반응형 디자인을 구현할 수 있다.

반응형 디자인 예시

/* CSS */
.container {
display: flex; /* Flex 컨테이너로 설정하여 내부 요소들을 유연하게 배치 */
flex-wrap: wrap; /* 화면 크기에 따라 요소들이 줄바꿈되도록 설정 */
justify-content: center; /* 가로 방향으로 요소들을 가운데 정렬 */
}

.box {
width: 200px; /* 박스의 너비를 200px로 설정 */
height: 200px; /* 박스의 높이를 200px로 설정 */
background-color: #f2f2f2; /* 박스의 배경색을 회색으로 설정 */
margin: 10px; /* 박스들 간의 간격을 10px로 설정 */
display: flex; /* 내부 요소들을 가운데 정렬하기 위해 다시 Flex 컨테이너로 설정 */
align-items: center; /* 세로 방향으로 요소들을 가운데 정렬 */
justify-content: center; /* 가로 방향으로 요소들을 가운데 정렬 */
font-size: 18px; /* 텍스트의 글자 크기를 18px로 설정 */

@media screen and (max-width: 600px) {
width: 100%; /* 화면 너비가 600px 이하일 때, 박스의 너비를 100%로 설정하여 한 줄에 하나씩 배치 */
}
}