β μ§μ°λλ νλ‘μ νΈμ μΈλ ₯μ λ ν¬μ νλ©΄ μ€νλ € λ λ¦μ΄μ§λ€. β
- Frederick Philips Brooks
Mythical Man-Month μ μ
728x90
βπ» λ μ΄μμ - flex μ ν βπ»
flex layoutμ μμλ€μ΄ ν¬ν¨λ ν° λ°μ€μ flexλ₯Ό μ μΈνκ³ , μμ μλ μμλ€μκ²λ μ μ°νκ² λ°°μΉνλ μμ±λ€μ λΆμ¬νλ λ μ΄μμμ μ‘λ κ²μ΄λ€.
display: flex;β
flex μ νμ λΆλͺ¨μ μμμλ§ μ¬μ©ν μ μκ³ λΆλͺ¨μ μμμ μμμλ μ¬μ©ν μ μμ΅λλ€.
μ λ² μκ° (λ μ΄μμ - float μ ν - λ°μν ν λ²μ μ΄ν΄νκΈ° : https://xoouxa58.tistory.com/21)μ
곡λΆν μμ λ₯Ό μ΄μ©νμ¬ flex μμ μ ν΄λ³΄κ² μ΅λλ€.
<!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>λ μ΄μμ12 - flex μ ν</title>
<style> //head νκ·Έμ style νκ·Έλ₯Ό μ
λ ₯ν΄μ€λλ€.
* {
margin: 0; //ꡬμμ μ΄κΈ°ν μν€κΈ° μν΄ μ 체 ꡬμ *{ }μ margin: 0;, padding: 0;μ μ€λλ€.
padding: 0;
}
body {
background-color: #E8F5E9;
}
#wrap {
width: 1200px;
margin: 0 auto; //wrapꡬμμ΄ κ°μ΄λ° μ λ ¬μ΄ λ μ μλλ‘ margin: 0 auto;λ₯Ό μ
λ ₯ν΄μ€λλ€.
}
#header {
width: 1200px;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 1200px;
height: 100px;
background-color: #A5D6A7;
}
#main {
width: 1200px;
display: flex; //μΈλ‘λ‘ λμ΄λ 3κ°μ ꡬμμ κ°λ‘λ‘ λμ΄νκΈ° μν΄μλ 3κ°μ ꡬμμ λΆλͺ¨μΈ main ꡬμμ
//flex μ νμ μ¬μ©νκ² ν΄μ£Όλ display: flex; λ₯Ό μ
λ ₯ν΄ μ€λλ€.
}
#aside { //aside ꡬμμ μλ§λ widthκ°κ³Ό hegihtκ°κ³Ό λ°°κ²½μμ μ
λ ₯ν΄μ€λλ€.
width: 300px;
height: 780px;
background-color: #81C784;
}
#section { //section ꡬμμ μλ§λ widthκ°κ³Ό hegihtκ°κ³Ό λ°°κ²½μμ μ
λ ₯ν΄μ€λλ€.
width: 600px;
height: 780px;
background-color: #66BB6A;
}
#article { //article ꡬμμλ μλ§λ widthκ°κ³Ό hegihtκ°κ³Ό λ°°κ²½μμ μ
λ ₯ν΄μ€λλ€.
width: 300px;
height: 780px;
background-color: #4CAF50;
}
#footer {
width: 1200px;
height: 100px;
background-color: #43A047;
}
</style>
</head>
<body>
<div id="wrap"> //μ 체 ꡬμμ λ§λ€μ΄μ£Όκ³ κ° κ΅¬μμ νλμ© λ§λ€μ΄ μ€λλ€.
<header id="header"></header> //header ꡬμ, nav ꡬμ, main ꡬμ, footer ꡬμμ λ§λ€μ΄μ€λλ€.
<nav id="nav"></nav>
<main id="main"> //main ꡬμ μμ 3κ°μ λ μ΄μμμ λ§λ€κΈ° μν΄ aside ꡬμ, section ꡬμ, article ꡬμ 3κ°λ₯Ό λ§λ€μ΄μ€λλ€.
<aside id="aside"></aside>
<section id="section"></section>
<article id="article"></article>
</main>
<footer id="footer"></footer>
</div>
</body>
</html>
β¨ κ°μ¬ν©λλ€.
'css' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| λ¬Έμ κ΄λ ¨ μ€νμΌ μλ²½μ 리 (11) | 2023.03.02 |
|---|---|
| λ μ΄μμ - grid μ ν (12) | 2023.03.02 |
| λ μ΄μμ - float μ ν - λ°μν ν λ²μ μ΄ν΄νκΈ° (10) | 2023.03.01 |
| CSS μ νμ ν λ²μ μλ²½ μ 리 (13) | 2023.02.26 |
| what is λ μ΄μμ float ? (15) | 2023.02.26 |