CSS 직전 게시물에 display 속성을 다뤘는데
사실 display 속성에는 block, inline, none 그리고 하나가 더 있다!
그게 바로
1. Flex
(flex는 중요하기 때문에 따로 빼서 적어둘거다.)
flex : 레이아웃을 배치해주는 전용 기능
flex는 2가지 요소로 구성되어 있다.
container와 item!
- item : 내가 움직이고 싶은, 배치하고 싶은 요소
- container : 그 item의 부모요소
한 가지 요소는 item이자 container일 수 있다!
이 사진으로 설명을 해보자면,
파란네모가 item, 빨간네모가 파란네모의 container
초록네모가 item, 파란네모가 초록네모의 container 이다.
말장난 같지만,, 이렇게 이해하는 게 훨씬 쉬울 것이다!ㅎㅎ
- flex 설정하기!
* container에 작성
1) flex 설정
: 컨테이너 안에 작성
display : flex;
2) flex-direction 배치 방향 설정
| row | column | |
| 메인축 | 가로(수평) | 세로(수직) |
| 서브축 | 세로 | 가로 |
flex-direction : row;
flex-direction : column;
3) 메인축 정렬
flex-direction을 row로 방향을 설정하고
justify-content : center; 로 설정하면 가로를 기준으로 가운데 정렬을 한다.
4) 서브축 정렬
flex-direction을 row로 방향을 설정하고
align-items : center; 로 설정하면 서브축인 세로를 기준으로 가운데 정렬을 한다.
5) 줄넘김 처리
flex-wrap : wrap; 처리를 하면 창 크기를 줄일 때 크기가 그대로 작아지는 게 아닌
줄넘김을 사용하여 크기는 그대로, 모양이 밑으로 내려간다.(개행)
* item에 작성
1) flex-basis : 아이템의 기본 크기 설정
위의 개념을 활용하여 웹페이지의 상단바 형식을 만들어보자!
↓
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.container{
background-color: whitesmoke;
height: 100px;
display: flex;
}
.box1,.box3{
flex-basis: 15%;
display: flex;
justify-content: center;
align-items: center;
}
.box2{
flex-basis: 70%;
display: flex;
justify-content: center;
align-items: center;
}
.box2>a, .box3>a{
margin: 10px;
}
.container a{
text-decoration: none;
color: black;
font-size: 20px;
font-family: '나눔스퀘어', '굴림';
padding: 10px;
}
.container a:hover{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
<h1>HAHA</h1>
</div>
<div class="box2">
<a href="#">메뉴</a>
<a href="#">베스트</a>
<a href="#">뉴스</a>
</div>
<div class="box3">
<a href="#">로그인</a>
<a href="#">회원가입</a>
</div>
</div>
</body>
</html>
웹에는 이렇게 보여진다.
'HTML - CSS > 기초정리' 카테고리의 다른 글
| CSS 기초 - 선언방식 (0) | 2023.01.10 |
|---|---|
| CSS 기초 - 포지션(Position) (0) | 2023.01.10 |
| CSS 기초 - 공간분할태그 / 자주 쓰이는 속성 (0) | 2023.01.08 |
| CSS 기초 - 계층선택자 / 반응선택자 / 그룹선택자 (0) | 2023.01.06 |
| CSS 기초 - 선택자와 선언 / 선택자의 종류 (0) | 2023.01.05 |