2023. 6. 24. 20:10ㆍ기술 창고/CSS
개발한 웹 사이트가 플랫폼 환경에 따라 화면 구성이 동적으로 반응하여 적용될 수 있어야 합니다.
모바일, PC, TV, pad 등 다양한 환경에서 한 가지의 일관된 형식으로 화면이 보여지게 되면 사용하는 클라이언트 입장에서도 많이 불편하기 때문입니다.
따라서 반응형 웹 사이트는 현대 웹 개발에 필수라고 볼 수 있습니다.
이 반응형을 구현하기 위해선 대표적으로 4가지의 방법이 있습니다.
1. Media Queries
2. CSS Grid
3. CSS Flexbox
4. 외부 프레임워크 / 부트스트랩
Media Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query</title>
<style>
div {
background-color: rebeccapurple;
height: 500px;
width: 500px;
}
@media (max-width: 600px) {
/* CSS for screens below or equal to 600px wide */
div {
height: 200px;
width: 200px;
}
}
</style>
</head>
<body>
<h1>Media Query</h1>
<div></div>
</body>
</html>
예시 코드를 보면 양식은 이렇습니다.
마치 Spring의 Lombok 의 형태처럼 @ 기호와 media 키워드를 사용하고 괄호 안에 조건을 겁니다.
위의 코드의 조건은 최대 너비 600px 에 도달하면 중괄호 안에 있는 코드가 반영이 되게 됩니다.
화면을 조절했을 때 max-width 가 600px 에 도달하게 되면 div 태그 영역의 높이를 200px, 넓이를 200px 를 변경하겠다는 뜻입니다.
CSS Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 200px 200px;
gap: 30px;
}
.first {
grid-column: span 2;
}
.card {
background-color: blue;
}
</style>
</head>
<body>
<h1>CSS Grid</h1>
<div class="grid-container">
<div class="first card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
</html>
Grid 레이아웃을 활용하는 방식입니다.
Grid CSS 가 적용될 내용들이 담긴 최상위 태그에 우선 grid CSS 를 적용시킵니다.
예시 코드를 보면 적용될 내용들을 감싸고 있는 grid-container 영역에 display: grid 옵션을 적용하여 Grid CSS 를 적용시키고 있습니다.
그리고 grid-template-columns: 1fr 1fr; 을 적용함으로서 두 개의 열로 Grid 레이아웃을 지정해주겠다고 설정하였습니다.
여기서 1fr이 열을 뜻하는 의미입니다.
grid-template-rows: 100px 200px 200px; 을 적용함으로서 3개의 행으로 Grid 레이아웃을 지정해주고 각 행의 높이를 지정해주고 있습니다.
gap: 30px; 을 적용해줌으로서 각 행과 열의 간격을 30px 로 지정해주었습니다.
그리고 밑의 first class 속성을 가진 영역에 grid-column: span 2; 를 적용하여 두 개의 열을 합쳐주고 있습니다.
이처럼 Grid 레이아웃 양식을 활용하여 만들 수 있습니다.
CSS Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Flexbox</title>
<style>
.flex-container {
display: flex;
}
.card {
background: blue;
border: 30px solid white;
height: 100px;
flex: 1;
}
.first {
flex: 2;
}
.second {
flex: 0.5;
}
</style>
</head>
<body>
<h1>CSS Flexbox</h1>
<div class="flex-container">
<div class="first card"></div>
<div class="second card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
</html>
마찬가지로 CSS를 적용할 내용들을 감싸고 있는 최상단의 태그에 display flex CSS 를 적용시킵니다.
card 라는 class 속성을 가진 태그들에 flex: 1 CSS 를 적용시켜 주었습니다..
이 말인 즉슨 해당 태그들의 넓이를 1로 공통되게 같은 넓이를 적용시키겠다는 의미입니다.
높이는 height 옵션을 적용하여 일관되게 지정해주었습니다.
first 라는 class 속성을 가진 태그에는 flex: 2 CSS 를 추가로 지정해주었습니다.
기존에 flex 1로 지정해주었던 일관된 넓이에서 2배의 넓이를 가지겠다는 의미입니다.
마찬가지로 second 라는 class 속성을 가진 태그에는 flex 0.5 CSS 를 지정해주어 기존의 공통된 넓이의 반의 넓이를 가지겠다고 설정한 것입니다.
외부 프레임워크 / 부트스트랩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Framework</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>Bootstrap Framework</h1>
<div class="container">
<div class="row">
<div class="card col-6">
Card
</div>
<div class="card col-2">
Card
</div>
<div class="card col-4">
Card
</div>
</div>
</div>
</body>
</html>
외부의 프레임워크를 사용하는 방식도 있습니다.
대표적인 방법이 부트스트랩을 사용하는 것인데, 이 방법은 개발자가 직접 CSS 만들고 적용시켜주는 방법이 아니라 외부에서 이미 만들어지고 구성된 CSS를 사용하는 것입니다.
예시 코드에서 보이는 것처럼 코드를 작성하고 외부의 프레임워크나 부트스트랩을 import 해주면 만들어진 스타일을 한번에 적용시킬 수 있습니다.
즉, 옷을 입힌다는 개념으로 볼 수 있습니다.
또한, 기본적으로 웹 페이지를 12개의 열로 구분되어져있다고 볼 수 있는데
예시 코드에서 보이는 것처럼 col-6 라는 class 속성을 지정하였다면 12개의 열 중 6개의 열을 뜻하는 것입니다.
나머지 col class 속성들을 보면 각각 col-2, col-4 라는 속성을 가지고 있는데 이 말인즉슨
총 12개의 열을 6개의 열을 사용하는 카드 1개, 2개의 열을 사용하는 카드 1개, 4개의 열을 사용하는 카드 1개
이 3개의 카드로 구성하겠다는 의미입니다.
넓이로 생각해보자면 만약 총 넓이가 1200px 길이를 가지고 있다면,
첫 번째 col-6 영역은 50% 인 600px 길이 정도를 가지겠다는 뜻이고, 두 번째 col-2 영역은 200px 정도의 길이를, 세 번째 col-4 영역은 400px 정도의 길이로 구성하겠다는 뜻입니다.
'기술 창고 > CSS' 카테고리의 다른 글
| [CSS] Flexbox (0) | 2023.06.27 |
|---|---|
| [CSS] 반응형 CSS - Media Queries (0) | 2023.06.24 |
| [CSS] CSS Float / Clear (0) | 2023.06.24 |
| [CSS] CSS Display (0) | 2023.06.23 |
| [CSS] CSS 위치 지정 (0) | 2023.06.22 |