μ€λμ HTML / CSS μ λ°μ λν΄ λ°°μ λ€.
볡μ΅ν κ±°μ κ°κΉκΈ΄ νλ°.. λͺ¨νΈνλ μ©μ΄λ€ λ€μ νλ² μ‘κ³ κ°μ.
<a src="https://velog.in/@planethoon">Content</a>
// a - νκ·Έ, μ λΆλΆμ opening tag, λ· λΆλΆμ closing tag
// κ°λ ν΄λ‘μ§ νκ·Έ μλκ²(br, img λ±) μλλ° μ격λͺ¨λμμ μλμνλ <br /> μ΄λ° μμΌλ‘ λ«μμ£Όμ.
// src - attribute name, λΈλ‘κ·Έ μ£Όμμ리 - attribute value.
μμ μλ κ°μ μ΄λ κ² κ°λ‘ κΈΈμ΄κ° κ³ μ μν€κ³ HTMLμμ€μ½λλ‘ μ°μ¬μ§ κ² μ²λΌ 보μ¬μ§κ² ν΄μ£Όλ μ½λμ΄λ€. display νμ μ blockμ΄λ€.
/*bodyλ selector(μ νμ)*/
body {
/*μ΄ μλλ μ μΈ(declaration); λ°°κ²½μμ κ²μμμ΄λΌκ³ μ μΈν κ².*/
background-color:black;
color:white;
/*background-color, colorλ property*/
/*black, whiteλ value*/
}
<head>
<style>
.style {
background-color: whitemint;
}
.layout {
margin: 0;
}
</style>
</head>
<body>
<div class="style layout">Planet = Sung</div>
// ν΄λμ€ κ΅¬λΆμ μ€νμ΄μ€ νλ²μΌλ‘ νλ€.
</body>
μ λ λ¨μ - pt, px**
μλ λ¨μ - rem, em, %, vw, vh ...
μ£Όλ‘ μ¬μ©νλ κ²μ
remμΈλ°, μ¬μ©νλ λΈλΌμ°μ rootκ°μ λ°λΌ ν¬κΈ°κ° λ¬λΌμ§λ€. // 2rem μ΄λ©΄ λ£¨νΈ ν°νΈ κ°μ λλ°°ν¬κΈ°.
emμ λΆλͺ¨ μΈμμ μν₯μ λ°λλ€.
vw, vhλ κ°κ° viewpoint width, viewpoint heightμΈλ°,
컨ν
μΈ κ° νλ©΄μ κ°λμ°¨λ μΉνμ΄μ§κ° 100vw, 100vhλ₯Ό μ΄μ©ν μΉνμ΄μ§ μ΄λ€.
ex) https://www.tesla.com/ko_kr
λ²μΈλ‘ rem κ°μ μμλ valueλ‘ μ¬μ©ν μ μλλ° μ΄ κ²½μ° λ€λ₯Έ νκ·Έλ€κ³Ό κ²Ήμ³μ§ μ μλ€.
/*ν°νΈ κ΅΅κΈ°*/
font-weight: 500;
/*λ°μ€, κ°λ‘μ€*/
text-decoration: underline overline none;
/*μκ° μ‘°μ */
/*default value = 0*/
letter-spacing: 0px;
/*νκ° μ‘°μ */
/*chrome default value = 24px*/
line-weight: 1px;
ν μ£Όλ₯Ό 무μ¬ν, κΈ°λΆ μ’κ² λ§μ³€λ€!
HTMLκ³Ό CSSλ₯Ό 볡μ΅νλ μκ°μ κ°μ‘λ€.
μλ‘μ΄ νκ·Έλ€κ³Ό μ νμλ€μ λ°°μ°κ³ μλ‘μ΄ λ°©μμ μ¬μ©λ²μ μμλ΄€λ€.
HTMLκ³Ό CSSλ₯Ό μ‘°κΈ κ³΅λΆνμλλ°, κ²ν₯κΈ°λ‘ μμ² μ‘°κΈ κ³΅λΆν΄λκ³€ λ€ μλκ±°λ§λ₯ μ€λ μ€λ 곡λΆν μ μ΄ λΆλλ½λ€.
μ΄μ νκΈ°λ‘ νλ κ°μ²΄κ³΅λΆκ° λ°λ Έλ€.
λ΄μΌμ κ°μ²΄ κΌ κ³΅λΆνμ!
λΈλ‘κΉ
λ°©ν₯ λ€μ νλ² κ³ λ―Όν΄λ³΄κΈ°.
μ΄κ±΄ μ½λμ€ν
μ΄μΈ μκΈ° μ§λ¨μλ μ΄ κΈμ΄μ§λ§ μ¬κΈ°μλ μ¨ λλλ€.
λ λ μκ°νλκ±°μ§λ§ μμ λͺ¨λ₯΄λκ±Έ λ°°μΈλμ λΉκ΅ν΄μ κ²ν₯κΈ°μμΌλ‘λΌλ μκ³ μλ κ²μ λ°°μΈλμ μ§μ€λ ₯ μ°¨μ΄κ° λ§€μ° ν° κ² κ°λ€.
μλ§νκΈ° μ¬μ΄ νμ
μ΄λκΉ, μ€λ λ€μ νλ² μΈμ§νμλ γ
λͺ¨λ₯΄λ μ£Όμ μ μλ€κ³ μ°©κ°νλκ² λΆλλ¬μ λ€.
λΈλ‘κΉ
λ°©ν₯μ΄ λ§€μ° κ³ λ―Όλλ€.
TILμ μ΄λ κ² μ¨κ°λ©΄μ νλ¨μ μΆκ°ν μ°Ύμλ³Έ κ²μ 짧μ κΈλ‘ λ°λ‘ λ¨κΈΈμ§,
μλλ©΄ μ€λμ²λΌ μ¨ λκ°λκ² μ’μμ§.
ν¬μ€ν
νλ€κ° μ μ λ©μΆκ³ μκ°ν΄λ΄€λλ° TIL λ°λ‘ μ°κ³ κ³ μ¬ν΄μ μ°ΎμΌλ©° λ°λ‘ μ 리ν΄μΌκ² λ€.
TILμ μ€λ λ°°μ΄κ±° λ³΅μ΅ + μΌκΈ° κ²Έ ν루 λ°μ±μ λͺ©μ μΌλ‘ ν¬μ€ν
νκ³ ,
짧μ κΈ°μ ν¬μ€ν
μ λ΄κ° λ€μ μ°Ύκ³ , 곡λΆν΄ λκ°λ©° 보μν΄ λκ° μ μ μμ ν΄ λ€λ¬μ΄ λκ°λ κ²μΌλ‘.
κ·Έλ¦¬κ³ μ€λ λκΈ°λΆμ¬ μΈμ
μμ μ»€λ¦¬μ΄ μ½μΉλμ΄ κ°λ°μκ° λκ³ μΆμ μ΄μ λ₯Ό ν¬μ€ν
ν΄λ³΄λΌκ³ μ΄μΌκΈ° ν΄μ£Όμ
¨λ€.
λ΄κ° κ°λ°μκ° λκ³ μΆμλ건 μ΄μ ν¬μ€ν
νλ―,
μ μ λ€κ³Ό μν΅νλ©° 무μμ΄ λ μ§ λͺ¨λ₯΄λ μ΄λ€ κ²μ μμ±ν΄ λκ°λ©΄μ, μνμ΄ μμ±λμ λλ°λ μ±μ·¨κ°μ μ¦κΈ°κ³ μΆμ΄μ μΈλ°..
κ³μ μκ°ν΄ λκ°λ©° λκΈ°λ₯Ό λ§λ€μ΄ λκ°μΌκ² λ€.
κ³μ 곡λΆνλ©° μκ°ν κ±°λ¦¬κ° μκΈ°λ μ§μ
μ΄λΌ.
μ λ§ λλ§ λμΉλ μ§μ
μ΄λ€.