3rd DAY
레이아웃의 기초 박스(box)의 위치변경
display: flex;를 이용한 박스배열
<!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>box 04 - h1, nav</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/box04.css">
</head>
<body>
<hr>
<header class="basic">
<div class="container">
<h1>
<a href="">
LOGO
</a>
</h1>
<nav>
<ul>
<li><a href="">menu01</a></li>
<li><a href="">menu02</a></li>
<li><a href="">menu03</a></li>
<li><a href="">menu04</a></li>
<li><a href="">menu05</a></li>
</ul>
</nav>
<div class="icon">
+
</div>
</div>
</header>
<hr />
<header class="basic1">
<div class="container">
<h1>
vegetavble
</h1>
<nav>
<ul>
<li><a href="../doc/box03.html">potato</a></li>
<li><a href="../doc/box03.html">carrot</a></li>
<li><a href="http://www.naver.com">tomato</a></li>
<li><a href="">eggplant</a></li>
<li><a href="">spanish</a></li>
<li><a href="">cucumber</a></li>
</ul>
</nav>
<div class="icon">
+
</div>
</div>
</header>
<hr />
<header class="header01">
<h1>LOGO</h1>
<nav>MENU</nav>
</header>
<hr />
<p> flex only </p>
<hr />
<header class="header02">
<h1>LOGO</h1>
<nav>MENU</nav>
</header>
<hr />
<p> flex with justisfy-content(space-between) 가운데 배치</p>
<hr />
<header class="header03">
<h1>LOGO</h1>
<nav>MENU</nav>
</header>
<hr />
<p> 3 element flex with justisfy-content(space-between) 3개를 균등하게 배치 </p>
<hr />
<header class="header04">
<h1>LOGO</h1>
<nav>MENU</nav>
<div class="right">
icon
</div>
</header>
<hr />
<p> 3 element flex with margin-auto 좌측을 auto로 줘서 오른쪽으로 몰아서 배치</p>
<hr />
<header class="header05">
<h1>LOGO</h1>
<nav>MENU</nav>
<div class="right">
icon
</div>
</header>
<hr />
<header class="pra_header06">
<h1>parctice1</h1>
<nav>parctice2</nav>
<div class="right">
icon
</div>
</header>
<hr />
<p> 3 element justisfy-content(space-around)</p>
<hr />
</body>
</html><html>
justisfy-content: 가로 축을 기준으로 좌우에 대한 정렬
space-between:첫 번째와 마지막 flex item은 교차축의 시작 부분과 끝부분에 정렬하고 나머지 flex item을 일정한 간격으로 정렬
space-between: 3개를 균등하게 배치
space-around: 요소들 주위에 동일한 간격으로 정렬
center: 중앙 정렬
space-evenly: 첫번째로 오는 정렬 대상 전에 두개의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 분산 배치
margin-auto: 좌측을 auto로 줘서 오른쪽으로 몰아서 배치
h1 {
line-height: 100px;
background: #f00;
}
nav {
line-height: 100px;
background: #00f;
}
.right {
line-height: 100px;
background: #ff0;
}
.header01 {
display: flex;
}
.header02 {
display: flex;
justify-content: center;
}
.header03 {
display: flex;
justify-content: space-between;
}
.header04 {
display: flex;
justify-content: space-between;
}
.header05 {
display: flex;
}
.header05 nav {
margin: 0 0 0 auto;
}
.basic {
line-height: 100px;
}
.basic .container {
display: flex;
width: 1200px;
margin: 0 auto;
}
.basic nav {
margin: 0 0 0 auto;
}
.basic nav ul {
display: flex;
gap: 30px;
}
.basic .icon {
margin: 0 0 0 30px;
}
.basic1 .container {
display: flex;
width: 1200px;
margin: 0 auto;
}
.basic1 .container nav {
display: flex;
margin: 0 0 0 auto;
background: #e0ecf8;
}
.basic1 .container nav ul {
display: flex;
gap: 50px;
}
.basic1 .iocn {
margin: 0 0 0 auto;
}
.pra_header06 {
display: flex;
justify-content: space-around;
}
p {
line-height: 30px;
text-align: center;
}<css>
결과물 : http://127.0.0.1:5502/doc/box04.html
+ MEMO +
✔display :
- flex : 박스 가로 배치(float-유지보수에만 사용, grid, table와 기능 동일)
- none : 없앤다.(<->block)
- block : 나타나다. box의 속성(width, height, margin, padding 다 적용 가능)을 가짐
- inline-block : inline(box의 속성을 없애는)의 속성을 가지고, box의 속성을 가진다.
- inline은 width, height, padding/border/margin top, bottoom사용 할 수 없다.= padding, border, margin 좌,우는 적용가능
'수업내용' 카테고리의 다른 글
| [HTML, CSS with JS] position의 기초_2022.05.19.THU (0) | 2022.06.01 |
|---|---|
| [HTML, CSS with JS] position의 기초_2022.05.19.THU (0) | 2022.06.01 |
| [HTML, CSS] BOX의 성질(3)_2022.05.17.TUE (0) | 2022.06.01 |
| [HTML, CSS] BOX의 성질(2)_2022.05.17.TUE (0) | 2022.06.01 |
| [HTML, CSS] BOX의 성질(1)_2022.05.17.TUE (0) | 2022.05.31 |
