Flex CSS는 웹사이트의 레이아웃을 유연하게 조정할 수 있습니다. 이 글에서는 Flex CSS 활용 및 몇 가지 예시를 소개하고, 그 사용법에 대해 중점적으로 알아보겠습니다.
[목차]
1. Flex 컨테이너와 아이템
2. 메인 네비게이션 바
3. 반응형 이미지 갤러리
4. Flex CSS 예시1
5. Flex CSS 예시2
6. 결론 및 의견
1. Flex 컨테이너와 아이템
Flex CSS는 컨테이너와 그 안에 있는 아이템으로 구성됩니다. 컨테이너에는 display: flex; 속성을 적용하여 Flex 컨테이너로 지정합니다. 아이템은 컨테이너 안에 있는 각각의 요소를 말합니다.
|
1
2
3
4
5
6
7
8
|
.container {
display: flex;
}
.item {
flex: 1;
}
|
cs |
2. 메인 네비게이션 바
메인 네비게이션 바는 웹사이트의 중요한 부분 중 하나입니다. Flex CSS를 사용하면 네비게이션 바를 간단하고 효율적으로 만들 수 있습니다.
main.html
|
1
2
3
4
5
6
7
|
<div class="nav-container">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
|
cs |
style.css
|
1
2
3
4
5
6
|
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
|
cs |
실행화면
3. 반응형 이미지 갤러리
Flex CSS는 반응형 이미지 갤러리를 만드는 데에도 유용합니다. 이미지들을 동일한 크기로 정렬하고, 화면 크기에 맞게 유연하게 배치할 수 있습니다.
main.html
|
1
2
3
4
5
6
|
<div class="gallery-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
|
cs |
style.css
|
1
2
3
4
5
6
7
8
9
10
|
.gallery-container {
display: flex;
flex-wrap: wrap;
}
.gallery-container img {
flex: 1 0 300px;
margin: 5px;
}
|
cs |
실행화면
4. flex css 예시1
Flex CSS를 사용하여 간단한 레이아웃을 구성하는 예시입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #f2f2f2;
}
.item {
flex: 1;
height: 200px;
margin: 10px;
background-color: #a0d8ef;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
|
cs |
실행화면
container라는 Flex 컨테이너와 item이라는 Flex 아이템을 가지는 간단한 레이아웃을 구성합니다. container 클래스는 display: flex; 속성을 사용하여 Flex 컨테이너로 설정되며, justify-content: center;와 align-items: center; 속성을 사용하여 아이템을 수평 및 수직 가운데 정렬합니다. item 클래스는 flex: 1; 속성을 사용하여 각각의 아이템이 컨테이너의 남은 공간을 동일하게 차지하도록 설정됩니다.
이 코드를 실행하면, 화면 중앙에 3개의 아이템이 있는 박스가 표시됩니다. 각 아이템은 동일한 크기를 가지고 있으며, 컨테이너의 크기에 맞춰 자동으로 조정됩니다.
5. flex css 예시2
좀 더 길고 복잡한 Flex CSS 예시 코드입니다. 이 예시는 3개의 열을 가진 반응형 뉴스 그리드 레이아웃을 구성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
background-color: #f2f2f2;
padding: 20px;
}
.column {
flex-basis: 33.33%;
padding: 10px;
}
.item {
background-color: #a0d8ef;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
/* 반응형 스타일링 */
@media (max-width: 768px) {
.column {
flex-basis: 50%;
}
}
@media (max-width: 576px) {
.column {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<div class="item">News 1</div>
<div class="item">News 2</div>
<div class="item">News 3</div>
</div>
<div class="column">
<div class="item">News 4</div>
<div class="item">News 5</div>
<div class="item">News 6</div>
</div>
<div class="column">
<div class="item">News 7</div>
<div class="item">News 8</div>
<div class="item">News 9</div>
</div>
</div>
</body>
</html>
|
cs |
실행화면
container 클래스로 둘러싸인 3개의 column을 가진 반응형 뉴스 그리드 레이아웃을 구성합니다. container 클래스는 display: flex; 속성을 사용하여 Flex 컨테이너로 설정되며, flex-wrap: wrap; 속성을 사용하여 아이템이 여러 줄에 걸쳐 나열될 수 있도록 합니다. justify-content: center; 속성은 아이템을 수평으로 가운데 정렬하고, align-items: flex-start; 속성은 아이템을 수직으로 위쪽 정렬합니다.
각 column 클래스는 flex-basis: 33.33%; 속성을 사용하여 컨테이너의 1/3의 너비를 차지하도록 설정됩니다. 이를 통해 3개의 열을 생성합니다. 각각의 열 안에는 item 클래스로 둘러싸인 뉴스 아이템들이 들어갑니다.
또한, 코드에는 미디어 쿼리를 사용하여 반응형 스타일링을 추가했습니다. 화면의 너비가 768px 이하일 때에는 각 열이 2개씩, 576px 이하일 때에는 1개씩 표시됩니다. 이를 통해 작은 화면에서도 레이아웃이 깨지지 않고 보기 좋게 표현됩니다.
6. 결론 및 의견
Flex CSS는 웹사이트의 레이아웃을 구성할 때 매우 유용한 도구입니다. 이 글에서는 Flex 컨테이너와 아이템의 개념과 몇 가지 예시를 살펴보았습니다. Flex CSS를 사용하면 더 유연하고 반응형인 웹사이트를 구축할 수 있으며, SEO에도 도움이 됩니다. Flex CSS를 적절히 활용하여 웹사이트의 디자인과 사용자 경험을 향상시키세요.
[관련글]
[html 자바스크립트 study] - html 이란? 기본 사용법 및 내용에 대해 알아보자
html 이란? 기본 사용법 및 내용에 대해 알아보자
HTML 이란? Hyper Text Markup Language의 약자로, 웹 페이지를 만들기 위해 사용되는 마크업 언어입니다. 현재 대부분의 웹 사이트는 HTML을 기반으로 만들어지고, HTML을 구현하는 웹 브라우저는 대부분의
2toy.net
[html 자바스크립트 study] - html 기본 구조, 틀 에 대해 알아보자
html 기본 구조, 틀 에 대해 알아보자
웹을 개발하면서 HTML은 필수적인 언어입니다. HTML은 웹 페이지의 모양과 구조를 정의하는 데 사용됩니다. 이번 글에서는 HTML에서 가장 중요한 태그 중 일부를 살펴보겠습니다. 이 글을 통해 HTML
2toy.net
[html 자바스크립트 study] - html css 예제 - 웹페이지 만들기 (반응형, 홈페이지)
html css 예제 - 웹페이지 만들기 (반응형, 홈페이지)
HTML과 CSS는 현재 웹 개발에서 필수적 입니다. HTML은 웹사이트의 구조를 정의하고, CSS는 디자인과 스타일을 담당합니다. 마치 뼈에 살과 옷을 입힌 개념이죠. 이번 글에서는 html css 예제 - 웹페이
2toy.net
'html 자바스크립트 study' 카테고리의 다른 글
| html은 프로그래밍 언어가 아닙니다 - 오해와 진실 (0) | 2023.06.01 |
|---|---|
| HTML CSS JS 관계 및 예제 (0) | 2023.05.31 |
| html css 예제 - 웹페이지 만들기 (반응형, 홈페이지) (0) | 2023.05.29 |
| html 기본 구조, 틀 에 대해 알아보자 (0) | 2023.05.28 |
| html 이란? 기본 사용법 및 내용에 대해 알아보자 (0) | 2023.05.27 |