-
CSS 파일에서 외부 CSS 가져오는 법 :
@import url("경로")' -
CSS Reset :
/* style 기본 세팅 */
body {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 400;
font-size: 1rem;
}
ul, li {
/* 동그라미 제거(list-style: none;) */
list-style: none;
margin: 0;
padding: 0;
}Display: flex
(1) 정의 : 자식 요소들을 유연하게 배치되도록 만듬
(2) 사용하는 경우 : 자식 요소들을 가로로 배치 할 때
-- 그렇다면 하위요소들을 단순히 div가 아닌 span으로 처리하면 안되나? : 그럴 경우, inline 요소는 가로/세로 크기 조절이 안 된다는 단점이 있음
-- 그렇다면 하위요소를 span으로 하되 display: inline-block;으로 바뀌면 안되나? : 그럴 경우사이의 엔터를 스페이스 바로 인식해버림
(3)flex-direction: row/row-reverse/column/column-reverse
-- 기본 값 : row
(4)flex-wrap: nowrap(기본값)/wrap
-- nowrap : 자식 요소들이 부모 요소의 한 줄에 다 들어가도록 배치
-- wrap : 요소들이 공간이 부족할 때 자동으로 새로운 줄로 넘어감
(5)justify-content: space-between, space-evenly, space-around, flex-start, flex-right, left, right, center...
-- space-betweeen : 첫번째 요소와 마지막 요소는 양 끝에 딱 붙어 있고, 나머지 요소들은 그 사이에 균등하게 분포
-- space-around : 요소들 사이의 간격은 요소 양 끝의 간격의 두 배
-- space-evenly : 양 끝과 요소 사이의 간격 동일
*/
(6) 교차축 정렬 :align-contentvs :align-items
--align-items: 속성값: 단일 행/열 내에서 자식 요소들 정렬. 각 요소가 정렬의 대상이 됨
--align-content: 속성값: 여러 행/열 내에서 자식 요소들 정렬(flex-wrap: wrap;을 사용할때만 사용). 개별 요소가 아닌 행 행 단위로 적용
(7)order: 2
-- Flexbox에서 자식 요소들의 배치 순서를 변경하는 데 사용
-- 값이 클수록 순서가 앞임
-- 기본 값: 0
(8) `align-self` : Flexbox에서 특정 자식 요소만 개별적으로 다른 정렬 방식을 적용할 때 사용. **교차축 방향으로만 설졍 가능** -- `align-self: strech;` : 자식 요소를 부모 컨테이너의 교차축에 맞춰서 최대한 늘려줌. **이 때, 교차축 값이 설정되어 있을 경우, height=auto;로 변경하줘야 함. **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border: 2px solid red;
padding: 20px 0;
display: flex;
/* justify-content(주축정렬) : space-between, flex-start, flex-right, center..., space-evenly, space-around
- space-betweeen : 첫번째 요소와 마지막 요소는 양 끝에 딱 붙어 있고, 나머지 요소들은 그 사이에 균등하게 분포
- space-around : 요소들 사이의 간격은 요소 양 끝의 간격의 두 배
- space-evenly : 양 끝과 요소 사이의 간격 동일
*/
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
justify-content: space-around;
}
.item {
width: 100px;
height: 100px;
border: 2px solid orange;
border-radius: 15px;
font-size: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: center;
height: 800px;
border: 2px solid red;
/* 교차축 정렬
(1) align-items : 단일 행/열 내에서 자식 요소들 정렬. 각 요소가 정렬의 대상이 됨 */
/* align-items: center; */
/* (2) align-content : 여러 행/열 내에서 자식 요소들 정렬(flex-wrap: wrap;을 사용할때만 사용). 개별 요소가 아닌 행 행 단위로 적용 */
flex-wrap: wrap;
align-content: flex-start;
align-content: flex-end;
align-content: center;
}
.item {
/* 밑에 코드 : align-content 할 때만 */
width: 500px;
height: 100px;
border: 2px solid orange;
border-radius: 15px;
font-size: 40px;
/* 텍스트에 displya flex 적용 */
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
border: 4px solid #000;
display: flex;
justify-content: space-between;
}
.box {
width: 200px;
height: 100px;
border: 4px solid red;
/* border-radius 약어 : bddr */
border-radius: 10px;
font-size: 40px;
}
/* items의 order : Flexbox에서 자식 요소들의 배치 순서를 변경하는 데 사용
- 값이 클수록 순서가 앞임
- 기본 값: 0 */
</style>
</head>
<body>
<div class="wrapper">
<div class="box">로고</div>
<div class="box">메인메뉴</div>
<div class="box">회원가입</div>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
height: 800px;
border: 2px solid red;
align-items: center;
}
.item {
width: 250px;
height: 100px;
border: 2px solid orange;
border-radius: 15px;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.item:nth-child(2) {
/* align-self :
- Flexbox에서 특정 자식 요소만 개별적으로 다른 정렬 방식을 적용할 때 사용.
- **교차축 방향으로만 설졍 가능***/
align-self: flex-start;
}
.item:nth-child(3) {
align-self: flex-end;
}
.item:nth-child(5) {
/* align-self: strech;
-> 자식 요소를 부모 컨테이너의 교차축에 맞춰서 최대한 늘려줌
이 때, 교차축의 값이 설정되어 있지 않을 경우만 적용 가능
*/
align-self: stretch;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
</div>
</body>
</html>