1. 수직적인 기본구조
html, css의 기본적인 레이아웃 구조는 수직으로 쌓인다.(위에서 아래로)
하지만 flex를 쓰면 레이아웃이 쌓이는 것을 수평으로 쌓을 수 있다.
2. flex 예제
1) 기본적인 구조 (수직)
위 그림과 같이 기본적으로 박스들이 수직으로 쌓인다.
- HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 연습</title>
<link rel="stylesheet" href="./main.css"/>
</head>
<body>
<div class="container">
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
</div>
</body>
</html>container라는 속성 값을 가진 div 안에 firstbox와 secondbox라는 속성 값을 가진 div들을 입력
div는 기본적으로 block 요소이기 떄문에 수직으로 쌓인다.
- CSS 코드
.container {
background-color: darkgray;
}
.container .firstbox {
width: 100px;
height: 100px;
background-color: green;
}
.container .secondbox {
width: 100px;
height: 100px;
background-color: blue;
}
2) flex를 사용하여 수평배치
워 그림과 같이 flex를 사용하면 수평으로 박스들이 쌓인다.
- HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 연습</title>
<link rel="stylesheet" href="./main.css"/>
</head>
<body>
<div class="container">
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
</div>
</body>
</html>HTML은 동일하다.
- CSS 코드
.container {
background-color: darkgray;
display: flex;
}
.container .firstbox {
width: 100px;
height: 100px;
background-color: green;
}
.container .secondbox {
width: 100px;
height: 100px;
background-color: blue;
}.container 부분에 display: flex;를 입력하여 flex 레이아웃으로 바꿔주었다.
하지만 나열해야 할 요소들이 많아지면 다음과 같이 화면을 꽉 채우고 1행으로 배열하기 때문에 요소들이 1행에
전부 배치되기 위하여 요소들의 크기 변화가 일어난다.
이는 flex-wrap을 이용하여 줄 바꿈을 해주면 문제를 해결 할 수 있다.
3. flex-wrap 예제
- HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 연습</title>
<link rel="stylesheet" href="./main.css"/>
</head>
<body>
<div class="container">
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
<div class="firstbox">BOX1</div>
<div class="secondbox">BOX2</div>
</div>
</body>
</html>- CSS 코드
.container {
background-color: darkgray;
display: flex;
flex-wrap: wrap;
}
.container .firstbox {
width: 100px;
height: 100px;
background-color: green;
}
.container .secondbox {
width: 100px;
height: 100px;
background-color: blue;
}container 부분에 flex-wrap을 입력해서 줄바꿈을 해줄 수 있다.
결과
줄 바꿈이 되어서 요소들의 크기 변화가 없어졌다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [JavaScript] 프로그래머스 level1 모의고사 풀이 (0) | 2021.03.30 |
|---|---|
| 프로그래머스 Level1 두수의 합 구하기(JavaScript) (0) | 2021.03.24 |
| 스파르타 코딩클럽 웹 종합반 온라인 강의 회고 및 후기! (0) | 2020.10.16 |
| 부트스트랩 사용법, CSS 디자인 가져오기 (0) | 2020.09.22 |
| CSS, border로 테두리 만들기 및 테두리 종류 모음 (0) | 2020.09.20 |