STEP 1 HTML/CSS - μ²μλΆν° CSS μ νμκΉμ§ (νμ¬ CSS Layout νμ΅ μ€)
MDN 'CSS first steps'
μνμ½λ© WEB1 1~15κ°
λ§ν¬λ€μ΄ μμ±λ²
(1) mailto:
μ΄λ©μΌ
(2) tel:
μ ν
(3) κ°μ νμ΄μ§μ λ€λ₯Έ μμΉλ‘ μ΄λ
<p id="here">μ¬κΈ°</p>
<a href="#here">'μ¬κΈ°'λ‘ μ΄λ</a>
(1) a:link (λ§ν¬ λ°©λ¬Έ μ )
(2) a:visited (λ§ν¬ λ°©λ¬Έ ν)
(3) a:hover (λ§ν¬ μμ λ§μ°μ€ 컀μλ₯Ό μ¬λ Έμ λ)
(4) a:active (λ§ν¬ ν΄λ¦νλ μκ°)
a:link {
text-decoration: none;
}
λ°λμ κΈ°μ΅ν΄μΌ νλ CSS μ νμ 30κ° μ°Έκ³
(1) νλμ classλͺ μ΄ νλ μ΄μμ HTML μμμ μ μ©λ μ μλ€
(2) νλ μ΄μμ classλͺ μ΄ νλμ HTML μμμ μ μ©λ μ μλ€ (λμ΄μ°λ©΄ κ°κ°μ classλͺ μΌλ‘ μΈμ)
<p class="list name">μ΄λ¦</p>
.list {
color: red;
}
.name {
font-wieght: bold;
}
(2) νλμ idλͺ μ λ°λμ νλμ HTML μμμλ§ μ μ©λμ΄μΌ νλ€
(1) νμ μ νμ(X Y) : μ§κ³ μλ κ²κΉμ§ λͺ¨λ
(2) μμ μ νμ(X > Y) : μ§κ³λ§
(1) X[μμ±] : μ΄λ° μμ±μ΄ μμΌλ©΄
(2) X[μμ±="κ°"] : μμ±κ°μ΄ μ΄λ¬λ©΄
(3) X[href*"μ λ ₯κ°"] : μμ±κ° μ΄λκ°μ μ΄ μ λ ₯κ°μ΄ μμΌλ©΄
(4) X[href^="μ λ ₯κ°"] : μμ±κ° 맨 μμ μ΄ μ λ ₯κ°μ΄ μμΌλ©΄
(5) X[href$="μ λ ₯κ°"] : μμ±κ° 맨 λ€μ μ΄ μ λ ₯κ°μ΄ μμΌλ©΄
(1) X + Y : κ°μ λΆλͺ¨λ₯Ό κ°μ§κ³ , X λ°λ‘ λ€μ μλ Y
(2) X ~ Y : κ°μ λΆλͺ¨λ₯Ό κ°μ§κ³ , X λ€μ μλ λͺ¨λ Y
(1) X[data-*="foo"]
<a href="image1.jpg" data-filetype="image">Image Link 1</a>
<a href="image2.png" data-filetype="image">Image Link 2</a>
a[data-filetype="image"] {
color: red;
}
(2) X[foo~="bar"]
cf. 3)(3)κ³Ό λΉκ΅!
<a href="image.jpg" data-info="external image">Click</a>
/* data-info μμ±μ μμ±κ°μ "external"μ΄ λ€μ΄κ°λ a νκ·Έ */ a[data-info~="external"] { color: red; } /* data-info μμ±μ μμ±κ°μ "image"κ° λ€μ΄κ°λ a νκ·Έ */ a[data-info~="image"] { border: 1px solid black; }
μ νμμ μΆκ°νλ ν€μλλ‘, νΉμ μν
μ μ€νμΌ μ μ©
(1) X:checked
<!-- λΌλμ€ --> <input type="radio" name="yes-or-no" id="yes"> <label for="yes">yes</label> <input type="radio" name="yes-or-no" id="no"> <label for="no">no</label>
/* type μμ±κ°μ΄ "radio"μΈ inputμ 체ν¬νμ λμ 'λΌλ²¨' */ input[type="radio"]:checked + label { color: hotpink; } /* type μμ±κ°μ΄ "radio"μΈ inputμ 체ν¬νμ λμ 'λΌλμ€' */ input[type="radio"]:checked { box-shadow: 0 0 0 1px hotpink; }
(2) X:nth-child(n)
nλ²μ§Έ μμμμκ° XμΈ κ²½μ°μλ§ μ μ©λ¨!
(3) X:nth-of-type(n)
(4) X:nth-last-child(n)
(5) X:nth-last-of-type(n)
(6) X:only-child
(7) X:only-of-type
μ νμμ μΆκ°νλ ν€μλλ‘, νΉμ λΆλΆ
μ μ€νμΌ μ μ©
(1) X::after
μ νν μμμ 맨 λ§μ§λ§ μμμΌλ‘ μμ¬ μμλ₯Ό νλ λ§λ λ€
λ³΄ν΅ content μμ±κ³Ό ν¨κ» μ§μ§μ΄, μμμ μ₯μμ© μ½ν μΈ λ₯Ό μΆκ°ν λ μ¬μ©νλ€
κΈ°λ³Έκ°μ inline
clearfix ν΅ - CSS floatκ³Ό clearfix μ°Έκ³
<div class="clearfix"> <h1>λμ΄λ</h1> <section> <article>μ΄λ €μΈκΉ</article> <article>μ¬μΈκΉ</article> </section> </div> <div>clearfix μ°μ΅</div>
h1 { float: left; } section { float: left; } .clearfix::after { content: ''; display: block; clear: both }
(2) X::first-line
(3) X::first-letter
<div class="out"> <div class="in">calc ν¨μ μ°μ΅</div> </div>
.out { border: 5px solid black; padding: 0; } .in { background-color: darksalmon; margin: 0; width: calc(50% - 100px); color: white; font-weight: bold; }
CSSμ νλ λ°©λ²μ λν μ§μΉ¨μ μ 곡νλ νΉμ κ·μΉ
νΉμ μ‘°κ±΄μ΄ μ°ΈμΌ λλ§ (μ: νλ©΄ ν΄μλκ° μΌμ ν μ΄μμ΄κ±°λ νλ©΄μ΄ μΌμ νλ³΄λ€ λμ λ) CSS λ₯Ό μ μ©ν μ μλ λ―Έλμ΄ μΏΌλ¦¬λ₯Ό μ¬μ©ν μ μλ€
ex) 50emλ³΄λ€ λμ viewportκ° μλ λΈλΌμ°μ μλ§ μ μ©λλ μ€νμΌ μνΈ
@media (min-width: 50em) { body { background-color: navajowhite; } }
background: red url(image.png) 10px 10px repeat-x fixed;
(1) DOMμ΄λ CSSμ λ¬Έμμ λ΄μ©μ΄ λ§λλ κ³³μΌλ‘ νΈλ¦¬ ꡬ쑰λ₯Ό μ΄λ£¬λ€
(2) DOM λ Έλ(node): νΈλ¦¬ ꡬ쑰λ₯Ό μ΄λ£¨κ³ μλ λ§ν¬μ μΈμ΄μ κ° μμ, μμ± λ° ν μ€νΈ
(3) μΌλΆ μμλ μμ λ Έλμ λΆλͺ¨κ° λλ©°, μμ λ Έλμλ νμ κ° μλ€
<p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p>
P ββ "Let's use:" ββ SPAN | ββ "Cascading" ββ SPAN | ββ "Style" ββ SPAN ββ "Sheets"
(4) DOMμ μ΄ν΄νλ©΄ CSSλ₯Ό μ€κ³, λλ²κ·Έ λ° μ μ§Β·κ΄λ¦¬νλ λ° λμμ΄ λλ€. λΈλΌμ°μ DevToolsλ‘ μμ νλ©΄ μ μ©ν κ·μΉμ 보기 μν΄ νλͺ©μ μ νν λ DOMμ νμνκ² λλ€.
μμλ₯Ό λ§μΉ μ‘΄μ¬νμ§ μλ κ²μ²λΌ κ°μΆ° μ€
cf. visibility: hidden;
β μμλ₯Ό κ°μΆ°μ£Όμ§λ§ μ¬μ ν 곡κ°μ μ°¨μ§ν¨
(1) <li>
νκ·Έμ display μμ±κ°
(2) <li>
νκ·Έλ₯Ό μ°μ§ μκ³ λΉμ·νκ² ννλ λ μ΄μμμ μ΄ μμ±κ°μ λΆμ¬ν΄ κΉλνκ² μ 리ν μ μλ€
(3) μ΄ μμ±κ°μ λΆμ¬ν νμ list-style-type
, list-style-position
, list-style-image
μμ±μ μ¬μ©ν μ μλ€
/* width, margin */
#main {
width: 500px;
margin: 0 auto;
}
/* max-width */
#main {
max-width: 500px;
margin: 0 auto;
}
/* λͺ¨λ μμμ λλΉκ° paddingκ³Ό margin κ°μ μν₯λ°μ§ μλλ‘ */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing: border-box;
}
(1) κΈ°λ³Έκ°(=μμΉκ° μ§μ λμ΄ μμ§ μλ€)
(2) κ°μ₯ μ & κ°μ₯ μΌμͺ½μΌλ‘ λ°°μΉλλ€
(3) top, left, bottom, right κ°μ 무μνλ€
(1) μλ μμ΄μΌ ν μμΉ(κΈ°λ³Έκ° static μν)λ₯Ό κΈ°μ€μΌλ‘ μλμ μΌλ‘ μμΉκ° λ³κ²½λλ€
(2) position: relative;
μΈμ top, right, bottom, left
κ°μ μ£Όμ΄μΌλ§ μμΉ λ³κ²½μ΄ μΌμ΄λλ€
top, right, bottom, left: κΈ°μ€μ΄ λλ κ³³μμ μΌλ§λ§νΌ λ¨μ΄μ§ μμΉμΈμ§ λνλΈλ€
ex) `left: 200px;` κΈ°μ€μ΄ λλ κ³³(left)λ‘λΆν° 'μ€λ₯Έμͺ½μΌλ‘' 200px λ¨μ΄μ§ κ³³
<div class="div1"></div> <div class="div2"></div> <div class="div3"></div>
.div1, .div2, .div3 { width: 100px; height: 100px; } .div1 { position: static; background-color: red; } .div2 { position: relative; background-color: orange; left: 100px; } .div3 { position: relative; background-color: yellow; left: 200px; }
(3) μλ μλ 곡κ°μ΄ μ μ§λλ€. λ°λΌμ μ£Όλ³μμ ν¨κ» μλ μμ΄ν λ€μ μ¬λ°°μΉλ μΌμ΄λμ§ μλλ€.
(1) viewport(νλ©΄μμ νμ μμ)
λ₯Ό κΈ°μ€μΌλ‘ μλμ μΌλ‘ μμΉκ° μ§μ λλ€. μ¦, μ€ν¬λ‘€μ μμ§μ¬λ μμΉκ° λ³νμ§ μλλ€.
(2) top, right, bottom, left κ°μ μ€ μ μλ€.
(3) ν¬κΈ°κ° μμ μ μ½ν μΈ λ§ ν΄μ§λ€. λ°λΌμ νμνλ€λ©΄ width, height κ°μ μ€μ ν΄μΌ νλ€.
(1) κ°μ₯ κ°κΉμ΄, μμΉκ° μ§μ λ, μ‘°μ μμ
λ₯Ό κΈ°μ€μΌλ‘ μλμ μΌλ‘ μμΉκ° λ³κ²½λλ€
(2) μ‘°μ μμκ° νλλ μκ±°λ μμΉκ° μ§μ λ μ‘°μ μμκ° μλ€λ©΄, λ³Έλ¬Έ(μλ¨, μΌμͺ½ 0, 0 κ°)μ κΈ°μ€μΌλ‘ μμΉκ° λ³κ²½λλ€
(3) ν¬κΈ°κ° μμ μ μ½ν μΈ λ§ ν΄μ§λ€. λ°λΌμ νμνλ€λ©΄ width, height κ°μ μ€μ ν΄μΌ νλ€
(4) μλ μλ 곡κ°μμ μ λΉ μ Έλμ¨λ€. λ°λΌμ μ£Όλ³μμ ν¨κ» μλ μμ΄ν λ€μ μ¬λ°°μΉκ° μΌμ΄λλ€.
λ°±ν±(`) 3κ°λ₯Ό λμ΄μ°κΈ° μμ΄ κ·Έ μ€ λ§¨ μμ μ μ΄μΌ νλ€
(1) λͺ©λ‘μ΄ ν κ°μΌ λ (νμ λͺ©λ‘x)
- κ³ΌμΌ
<p>ν λ§ν </p> <a href="">μ°ΈμΈ</a>
(2) λͺ©λ‘μ΄ λ κ°μΌ λ (νμ λͺ©λ‘o)
- κ³ΌμΌ
- μ€λ λ¨Ήμ κ³ΌμΌ
<p>ν λ§ν </p> <a href="">μ°ΈμΈ</a>
(3) λͺ©λ‘μ΄ μΈ κ°μΌ λ (νμ λͺ©λ‘o)
- κ³ΌμΌ
- μ€λ λ¨Ήμ κ³ΌμΌ
- μ’μνλ κ³ΌμΌ
<p>ν λ§ν </p> <a href="">μ°ΈμΈ</a>
λΈλ‘ μμ λΆλΆμμ Backspaceλ Space bar, Tabμ μλͺ» λλ₯΄λ©΄ λΈλ‘μ΄ ν리거λ λ°λλ―λ‘ μ£Όμ
(1) μλ€λ‘ λ°±ν± 3κ° μ°κΈ°
- κ³ΌμΌ
- μ€λ λ¨Ήμ κ³ΌμΌ
- μ’μνλ κ³ΌμΌ
<p>ν λ§ν </p> <a href="">μ°ΈμΈ</a> <img src="">
(2) Tab 2λ² λλ₯΄κΈ°
- κ³ΌμΌ
- μ€λ λ¨Ήμ κ³ΌμΌ
- μ’μνλ κ³ΌμΌ
<p>ν λ§ν </p>
Backpace
, Space bar
, Tab
ν€λ₯Ό μ΄λμμ λͺ λ² λλ₯΄λμ λ°λΌμ κΈ°νΈκ° λ³νλλ° κ·Έ κΈ°μ€μ λͺ¨λ₯΄κ² λ€
(1) Space bar
- ν μΌ
- ν μΌ
- ν μΌ
- ν μΌ
- ν μΌ
- ν μΌ
- ν μΌ
- ν μΌ
- ν μΌ
Q1) μ¬κΈ°μ Backspace, Space bar, Tabν€λ₯Ό μλͺ» λλ₯΄λ©΄ κ°μκΈ° κΈ°νΈκ° λ°λλ€
β A1) 1μΉΈμ© λλ €κ°λ©΄ κΈ°νΈκ° 4λ²μ§ΈκΉμ§ λκ°λ€κ° 5λ²μ§Έμ λ°λκ³ (μ μμ), 2μΉΈμ© λλ €κ°λ©΄ λ°λ‘ λ€μμ λ°λκ³ , 4μΉΈμ© λλ €κ°λ λ°λ‘ λ€μμ λ°λλ€
(2) λκ°μ΄ Tabν€ 1λ² λλ λλ° λ€λ₯Έ κΈ°νΈκ° λμ΄
- ν μΌ
- ν μΌ
- ν μΌ
Q1) 3λ²μ§Έ λͺ©μ°¨μλ νμ΄ν(-)μ μ°κ³ μΆμ΄μ λκ°μ μμΉμμ λκ°μ΄ tabν€λ₯Ό 1λ² λλ λλ° μ λ κ°μκΈ° λ«λ¦° λκ·ΈλΌλ―Έκ° λμ€λκ°
(3) κ·Έλμ Tabν€ 2λ² λλ λλ μ΄λ²μ νλμμ΄ λ¨
- ν μΌ
- ν μΌ
- ν μΌ
- ν μΌQ1) μ€κ°μ νλμμΌλ‘ λ¬ λΆλΆμ λ€λ₯Έ λΆλΆκ³Ό 무μμ΄ λ€λ₯Έκ° (Tabμ μ¬μ©ν λλ§ λνλλ νμμ μλλ€)
Q2) Tabμ 2λ² μ΄μ λλ₯΄λ©΄ κ³μ νμ΄ν(-)μ΄ λμ€λ 건κ°
CSS layout λλ¨Έμ§
HTML μμ μ°Έκ³ μ