: μΉ νμ΄μ§μ λΌλ(ν)λ₯Ό ꡬμ±νλ λ§ν¬μ
μΈμ΄. (ꡬ쑰λ₯Ό νννλ μΈμ΄),
Β Β tag
λ€μ μ§ν©
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Hello world</h1>
<div>Contents here
<span>Here too!</span>
</div>
</body>
</html>
HTML | CSS | JS |
---|---|---|
Structure(ꡬ쑰) | Presentation(μ€νμΌ) | Interaction(μνΈμμ©) |
Tag | Role |
---|---|
<div> | Division (ν μ€ μ 체 μ°¨μ§) |
<span> | Span (μ½ν μΈ ν¬κΈ°λ§νΌ κ³΅κ° μ°¨μ§) |
<img src=βurlβ> | Image |
*<a href="url" target="_blank"> | Link |
<ul> & <li> | Unordered List & List Item |
<ol> | Ordered List |
<input type="checkbox" checked> | Input(Text, Radio, Checkbox) |
<textarea> | Multi-line Text Input |
<button> | Button |
<p> | νλμ λ¬Έλ¨ νν |
*<a target=β_blankβ>
: μ νμΌλ‘ λ§ν¬ νμ΄μ§ μ΄λ
<!-- placeholder μμ±: μ
λ ₯νΌ μμ μμ±ν΄μΌ νλ λ΄μ© ννΈ μ 곡 κ°λ₯ -->
<input type="text" placeholder="ID"></input>
<input type="password"></input>
<!-- nameμ΄ κ°μ Checkbox νμ
μ€ μ¬λ¬ κ° μ²΄ν¬ κ°λ₯ -->
<input type=βcheckboxβ name=βfruitsβ>
<!-- nameμ΄ κ°μ Radio νμ
μ€ νλλ§ μ²΄ν¬ κ°λ₯ -->
<input type=βradioβ name=βsubjectβ>
: Semantic
μ΄λ βμλ―Έκ° μλ, μλ―Έλ‘ μ μΈ'. β μλ―Έλ₯Ό κ°μ§ μμ
<article> | λ 립μ μ΄κ³ μ체 ν¬ν¨λ μ½ν μΈ μ§μ |
---|---|
<aside> | λ³Έλ¬Έμ μ£Όμ λΆλΆμ νμνκ³ λ¨μ λΆλΆμ μ€λͺ νλ μμ. (μ¬μ΄λλ°, κ΄κ³ μ°½) |
<footer> | νμ΄μ§λ ν΄λΉ ννΈμ κ°μ₯ μλ«λΆλΆμ μμΉ (μ¬μ΄νΈ λΌμ΄μ μ€, μ£Όμ ...) |
<header> | νμ΄μ§λ ν΄λΉ μΉμ μ κ°μ₯ μλΆλΆμ μμΉ (μ¬μ΄νΈ μ λͺ©) |
<nav> | μλ¨λ° λ± μ¬μ΄νΈλ₯Ό μλ΄νλ μμμ μ¬μ© (λ³΄ν΅ <ul> μ λ£μ΄ λͺ©λ‘ ννλ‘ μ¬μ©) |
<main> | λ¬Έμμ μ£Όλ μ½ν μΈ νμ |
<section> | μ λͺ©, μ½ν
μΈ κ° ν¬ν¨λ ꡬνμ λλ λ μ¬μ©. (<div> μ μν λΉμ·) |
<form> | μ¬μ©μκ° μ
λ ₯ν κ°μ λ€λ₯Έ νμ΄μ§λ‘ μ μ‘νλ μν (λ³΄ν΅ <input> , <button> μμ λ±μ μμ μμλ₯Ό κ°μΈλ κ²½μ°μ μμ£Ό μ¬μ©) |
βΒ <div>
, <span>
μμλ μλ©ν± μμλ‘ λΆλ₯ X
id
: κ³ μ ν μ΄λ¦μ λΆμΌ λ μ¬μ© (#
μΌλ‘ νμ) β μ€λ³΅ νμ© X
class
: λ°λ³΅λλ μμμ μ νλ³λ‘ λΆλ₯ν λ μ¬μ© (.
μΌλ‘ νμ)
βΒ μ½κΈ° μμ μ체λ κ³ μ β id
λ‘ μ΄λ¦ νμ
βΒ λ°λ³΅λλ νλͺ© βΒ class
λ‘ μ§μ (κ°μ class κ°μ μ§μ β λμΌν μ ν)
HTML tag | Selector |
---|---|
<div id=βwriting-sectionβ> | div#writing-section |
<li class=βcommentβ> | li.comment |
<!-- μλμ class valueμ κ°μ΄ νλμ νκ·Έμ μ¬λ¬ κ°μ classλ₯Ό μμ±νκ³ μΆμ λ λμ΄μ°κΈ°λ‘ κ΅¬λΆ -->
<!-- id, class, type : attribute name(μμ± μ΄λ¦) -->
<!-- "id-input", "input focus" ... : attribute value(μμ± κ°) -->
<input id="id-input" class="input focus" type="text" placeholder="ID"></input>
<script>
μμ: Javascript μ€νμ μν΄ μ¬μ©<script src="my-java-script.js"></script>