<body> <div class="container"> <nav> <ul> <li>νλλμ λ·λ€μ―μ¬μ―μΌκ³±μ¬λ</li> <li>νλλμ λ·λ€μ―μ¬μ―μΌκ³±μ¬λ</li> <li>νλλμ λ·λ€μ―μ¬μ―μΌκ³±μ¬λ</li> <li>νλλμ λ·λ€μ―μ¬μ―μΌκ³±μ¬λ</li> <li>νλλμ λ·λ€μ―μ¬μ―μΌκ³±μ¬λ</li> </ul> </nav> <section>μ΄λ νμ§ κ° κ²¨μΈλ μ κ°λ―Έλ€μ΄ μμ λ€μ΄ μ¬λ¦μ² μ λͺ¨μ λμ(곑물)λ€μ λ§λ¦¬κ³ μμμ΄μ. κ·Έλ κ΅Άμ£Όλ¦Όμ λ€ μ£½μ΄κ°λ λ² μ§±μ΄ ν λ§λ¦¬κ° μ§λκ°λ€ βλ¨Ήμ κ±Έ μ’ λ§ λλ μ£Όκ² λ?βλΌλ©° λΉμμ΄μ. κ°λ―Έλ€μ΄ λ² μ§±μ΄μκ² λ¬Όμμ΄μ. βκ·ΈλΌ λ μ¬λ¦μ² μ μμμ λͺ¨μλμ§ μκ³ λ ν κ±°λ?β λ² μ§±μ΄κ° λλ΅νμ΄μ. βλ μκ°λ λΆμ‘±νλκ±Έ. 맀μΌκ°μ΄ λ ΈλνλλΌ λ€ λ³΄λμ§.β κ·Έλ¬μ κ°λ―Έλ€μ΄ μ‘°λ‘±νλ©° λ§νμ΄μ. βμ¬λ¦μ² λ΄λ΄ λ Έλλ νκ³ μμ μ λλ‘ μ΄λ¦¬μλ€λ©΄, κ·ΈλΌ κ²¨μΈμ λ°₯μ κ±°λ₯΄λ©΄μκΉμ§ μΆ€λ§ μΆ°λλ©΄ λκ² λ€μ.β λͺ©λμ΄ μλΌλ₯Ό λκ³ μ²μ λ€μ΄κ°λ€ κ·Έλ§ μ΄λ¦°μ«μ‘μμ§ ν λ§λ¦¬λ₯Ό μκ³ λ§μμ΄μ. νμ°Έμ μ μ² μμ΄ μ°Ύλ λͺ©λμ΄ μ΄λ κ² λ§ΉμΈλ₯Ό νμ§μ. βμ‘μμ§λ₯Ό νμ³κ° λλλλ§ μ°Ύμ μ μλ€λ©΄, ν€λ₯΄λ©μ€(μ λ Ήμ μ μ΄μ λλμ μ . 그리μ€μ ν)μ ν(λͺ©λμ μ ) κ·Έλ¦¬κ³ μ²μ μνΈμ λλ€μ μν΄ μ΄λ¦°μ ν λ§λ¦¬λ₯Ό μ λ¬Όλ‘ λ΄λκ² μ΅λλ€.β κ·Έ ν λ¨Έμ§μμ κ·Έκ° μ‘°κΈ λμ κ³³μΌλ‘ μ¬λΌκ°λ³΄μλλ, λ°(μ¬μμ λ°)μ μ‘μμ§λ₯Ό λκ³ λ§ μ‘μλ¨Ήκ³ μλ μ¬μλ₯Ό λ°κ²¬νκ² λμμ΄μ. κ·Έ κ΄κ²½μ μμ€λΌμΉκ² λλ λͺ©λμ΄ λ μμ λ€μ΄ νλμ μ°λ¬λ¬λ³΄λ©° λ§νμ΄μ. βμ κ° λλλλ§ μ°Ύμ μ μλ€λ©΄ μ²μ μνΈμ λ€μκ² μ΄λ¦°μμ λ΄ λκ² λ€ λ°©κΈ λ§ΉμΈνμ΅λλ€. κ·Έλ°λ° μ΄μ λ λ°μ§ κ²λ μμ΄ μ μ¬μλ‘λΆν° μ λΌλ μμ νκ² λλ§μΉ μ μλ€λ©΄ μ κ° λ°©κΈ μμ μ‘μμ§μλ€ λ€ μλ ν©μκΉμ§ λν΄ μ λ¬Όλ‘ λλ¦¬κ² λμ΄λ€.β</section> </div> <footer>κ°λ―Έμ λ² μ§±μ΄ & λͺ©λκ³Ό κ·Έμ ν©μ (μ΄μ μ°ν)</footer> </body>
μκΈ°body { height: 1000px; margin-bottom: 120px; } .container { position: relative; border: 2px solid lightslategray; } nav { position: absolute; left: 0; /* positionκ³Ό left μμ± λμ float: left; λ₯Ό λ£μ΄λ κ²°κ³Όλ¬Όμ κ°λ€ */ width: 200px; background-color: pink; } section { margin-left: 200px; background-color: powderblue; } footer { position: fixed; bottom: 0; left: 0; background-color: lightgreen; width: 100%; height: 50px; }
(1) position: fixed;
λ₯Ό μ΄μ©ν΄ κ³ μ ν€λλ νΈν°λ₯Ό λ§λ€ λλ λ€λ₯Έ μμλ€μ΄ ν€λλ νΈν°μ κ°λ €μ§μ§ μκ³ μ¨μ ν λ³΄μΌ μ μλλ‘ <body>
μ (ν€λλ νΈν°μ height κ°λ³΄λ€ ν°) margin κ°μ μ€μ ν΄μΌ νλ€
(2) position: absolute;
λ₯Ό μ μ©ν navμ nav μ€λ₯Έμͺ½μ μ€λ sectionμ΄ κ²ΉμΉμ§ μλλ‘ sectionμ margin-left κ°μ μ€μ ν΄μΌ νλ€
float
, clear
, clearfix
(1) float
μμ±μ΄ μ μ©λ μμ μμ£Όλ‘ λ€λ₯Έ μμλ€μ΄ νλ₯΄λ―μ΄ λ°°μΉλλ€
(2) μμ±κ°: left, right...
img {
float: right;
margin: 0 0 1em 1em;
}
(1) float μμ±μ΄ λΆμ¬λ μμμ λμ΄κ° float μμ±μ΄ λΆμ¬λμ§ μμ λΆλͺ¨ μμμ λμ΄λ³΄λ€ λμ λ, float μμκ° λ°κΉ₯μΌλ‘ νλ¬λμΉκ² λλ€ ex) μ΄λ―Έμ§κ° 컨ν μ΄λ λ°κΉ₯μΌλ‘ νλ¬λμΉλ€
(2) float μμ±μ΄ λΆμ¬λ μμμ λΆλͺ¨ μμκ° float μμ±μ΄ λΆμ¬λ μμλ€λ§μ ν¬ν¨ν λ, λΆλͺ¨ μμμ λμ΄κ° 0μΌλ‘ μ²λ¦¬λμ΄ float μμ±μ΄ λΆμ¬λ μμμ λ€μ μμκ° μλ‘ μ¬λΌμ float μμ±μ΄ λΆμ¬λ μμμ κ²ΉμΉκ² λλ€
(1) float μμ±μ λΆμ¬ν μμμ 'λΆλͺ¨ μμ'μ overflow: auto;
λ₯Ό μ μ©νλ€ πββοΈ
<div class="clearfix"> <img src=""> </div>
img { float: left } .clearfix { overflow: auto; /* IE6μ μ§μνλ €λ©΄ ZOOM: 1; μΆκ° */ }
Q1.
overflow: auto;
μ μλ―Έλ μλλ° μ΄κ² μ΄λ»κ² μ¬κΈ°μ floatλ₯Ό ν΄μ²΄ν΄μ£Όλμ§ μ°κ΄μ§μ΄ μκ°μ΄ μ λλ€. λ΄μ©λ¬Όμ΄ λμΉλ©΄ μ€ν¬λ‘€μ λ§λ€μ΄μ£Όλ μμ± μλκ°.A1.
overflow: auto;
mdn μ¬μ΄νΈ μ€λͺλ΄μ©μ΄ ν¨λ© μμ μμ λ€μ΄κ° κ²½μ° νμλλ λ΄μ©κ³Ό λμΌνκ² λ³΄μ΄μ§λ§,
μ λΈλ‘ νμ μ§μ 컨ν μ€νΈ
λ₯Ό μ€μ ν©λλ€. λ°μ€ν¬ν± λΈλΌμ°μ λ μ½ν μΈ κ° μ€λ²νλ‘λ κ²½μ° μ€ν¬λ‘€ λ§λλ₯Ό μ 곡ν©λλ€.
(2) float μμ±μ λΆμ¬ν μμ λ°λ‘ λ€μμ 'νμ μμ'λ₯Ό νλ μμ±νκ³ , μ¬κΈ°μ clear μμ±μ λΆμ¬νλ€
(3) float μμ±μ λΆμ¬ν μμμ 'λΆλͺ¨ μμμ κ°μ μμ'λ₯Ό μμ±νκ³ , μ¬κΈ°μ clear μμ±μ λΆμ¬νλ€
.clearfix::after { content: ''; display: table; /* λλ display: block; */ clear: both; }
'λΈλΌμ°μ 'μ 'λλ°μ΄μ€'μ λ°μνλ μ¬μ΄νΈλ₯Ό λ§λ€κΈ° μν΄ μ¬μ©λλ€
μκΈ°μμ nav, section λΆλΆ λμ μ΄κ±Έ λ£λλ€
@media (min-width: 600px) { nav { float: left; width: 25%; } section { margin-left: 25%; } } @media (max-width: 599px) { nav li { display: inline; } }
Q2. λμ΄ 599px μ΄νλΆν°λ μ nav liμ
display: inline;
μ μ°λ©΄ navκ° section μλ‘ μλμΌλ‘ μ¬λΌκ°λκ°. nav liμμ μ€λ°κΏμ΄ μ¬λΌμ§λ 건 μκ² λλ° νλ©΄ λλΉλ₯Ό μ€μμ λ°λΌ μ λλ μ½ν μΈ κ° λ°μΌλ‘ κΈΈμ΄μ§μ§ μκ³ navκ° μλμΌλ‘ μλ‘ μ¬λΌκ°λ κ±΄μ§ λͺ¨λ₯΄κ² λ€.
display: inline-block;
.box{foo}*10+.swan{bar}
/* β float μ μ© */ .box { float: left; width: 200px; height: 100px; margin: 1em; background-color: lime; } .swan { clear: left; background-color: yellow; } /* β‘ inline-block μ μ© */ .box { display: inline-block; width: 200px; height: 100px; margin: 1em; background-color: lime; } .swan { background-color: yellow; }
β κ³Ό β‘μ κ²°κ³Όλ¬Όμ κ°λ€
nav { display: inline-block; vertical-align: top; width: 25%; background-color: pink; } section { display: inline-block; vertical-align: top; width: 74.6%; background-color: powderblue; }
Q3. 74.6%...navμ section μ¬μ΄μ μλ κ³΅λ°±μ΄ μ΄λ»κ² ν΄λ μ μ¬λΌμ§
A3. μλ
display: inline-block;
μ μ© μ μμλ€ μ¬μ΄μλ (font-sizeμ λΉλ‘ν΄) κ³΅λ°±μ΄ μκΉ
- ν΄κ²° λ°©λ²
β HTMLμμ</nav>μ <section>
μ μ€λ°κΏ νμ§ μκ³ λΆμ¬ μ΄λ€ β λΉμΆμ²
β‘ μ‘°μ(μμ) μμμfont-size: 0;
μ μΆκ°νλ€
λμ , display: inline-blockμ΄ μ μ©λ μμ μμ μ½ν μΈ λ κ³μ λ³΄μΌ μ μλλ‘ ν΄λΉ μμμλ font-size μμ±μ μΆκ°ν΄μ€μΌ νλ€
cf. 컬λΌ=λ¨=μ΄
column-count
column-width
column-gap
column-rule
column-span
column-fill
<div class="column"> μ΄λ νμ§ κ° κ²¨μΈλ μ κ°λ―Έλ€μ΄ μμ λ€μ΄ μ¬λ¦μ² μ λͺ¨μ λμ(곑물)λ€μ λ§λ¦¬κ³ μμμ΄μ. κ·Έλ κ΅Άμ£Όλ¦Όμ λ€ μ£½μ΄κ°λ λ² μ§±μ΄ ν λ§λ¦¬κ° μ§λκ°λ€ βλ¨Ήμ κ±Έ μ’ λ§ λλ μ£Όκ² λ?βλΌλ©° λΉμμ΄μ. κ°λ―Έλ€μ΄ λ² μ§±μ΄μκ² λ¬Όμμ΄μ. βκ·ΈλΌ λ μ¬λ¦μ² μ μμμ λͺ¨μλμ§ μκ³ λ ν κ±°λ?β λ² μ§±μ΄κ° λλ΅νμ΄μ. βλ μκ°λ λΆμ‘±νλκ±Έ. 맀μΌκ°μ΄ λ ΈλνλλΌ λ€ λ³΄λμ§.β κ·Έλ¬μ κ°λ―Έλ€μ΄ μ‘°λ‘±νλ©° λ§νμ΄μ. βμ¬λ¦μ² λ΄λ΄ λ Έλλ νκ³ μμ μ λλ‘ μ΄λ¦¬μλ€λ©΄, κ·ΈλΌ κ²¨μΈμ λ°₯μ κ±°λ₯΄λ©΄μκΉμ§ μΆ€λ§ μΆ°λλ©΄ λκ² λ€μ.β λͺ©λμ΄ μλΌλ₯Ό λκ³ μ²μ λ€μ΄κ°λ€ κ·Έλ§ μ΄λ¦°μ«μ‘μμ§ ν λ§λ¦¬λ₯Ό μκ³ λ§μμ΄μ. νμ°Έμ μ μ² μμ΄ μ°Ύλ λͺ©λμ΄ μ΄λ κ² λ§ΉμΈλ₯Ό νμ§μ. βμ‘μμ§λ₯Ό νμ³κ° λλλλ§ μ°Ύμ μ μλ€λ©΄, ν€λ₯΄λ©μ€(μ λ Ήμ μ μ΄μ λλμ μ . 그리μ€μ ν)μ ν(λͺ©λμ μ ) κ·Έλ¦¬κ³ μ²μ μνΈμ λλ€μ μν΄ μ΄λ¦°μ ν λ§λ¦¬λ₯Ό μ λ¬Όλ‘ λ΄λκ² μ΅λλ€.β κ·Έ ν λ¨Έμ§μμ κ·Έκ° μ‘°κΈ λμ κ³³μΌλ‘ μ¬λΌκ°λ³΄μλλ, λ°(μ¬μμ λ°)μ μ‘μμ§λ₯Ό λκ³ λ§ μ‘μλ¨Ήκ³ μλ μ¬μλ₯Ό λ°κ²¬νκ² λμμ΄μ. κ·Έ κ΄κ²½μ μμ€λΌμΉκ² λλ λͺ©λμ΄ λ μμ λ€μ΄ νλμ μ°λ¬λ¬λ³΄λ©° λ§νμ΄μ. <div class="merge"> βμ κ° λλλλ§ μ°Ύμ μ μλ€λ©΄ μ²μ μνΈμ λ€μκ² μ΄λ¦°μμ λ΄ λκ² λ€ λ°©κΈ λ§ΉμΈνμ΅λλ€. κ·Έλ°λ° μ΄μ λ λ°μ§ κ²λ μμ΄ μ μ¬μλ‘λΆν° μ λΌλ μμ νκ² λλ§μΉ μ μλ€λ©΄ μ κ° λ°©κΈ μμ μ‘μμ§μλ€ λ€ μλ ν©μκΉμ§ λν΄ μ λ¬Όλ‘ λλ¦¬κ² λμ΄λ€.β </div> </div>
.column { padding: 1em; -moz-column-count: 3; -webkit-column-count: 3; -column-count: 3; -moz-column-gap: 1em; -webkit-column-gap: 1em; -column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-rule: 1px solid black; -column-rule: 1px solid black; } .merge { -moz-column-span: all; -webkit-column-span: all; -column-span: all; margin: 20px 0; }
column μμ±μ μκΈ΄ μ§ μΌλ§ μ λκΈ°μ μ¬λ¬ λΈλΌμ°μ λ₯Ό μ§μνκΈ° μν΄ μ λμ¬λ₯Ό λΆμ¬ μ¨μΌ νλ€
Q1. λ°λ‘κ°κΈ° β ν΄κ²° (210925)
Q3. λ°λ‘κ°κΈ° β ν΄κ²°
learnlayout
Google Clone
HTML μμ μ°Έκ³ μ