λΈλΌμ°μ λ‘λ© κ³Όμ μ€ μ€νμΌ μ΄νμ κ³Όμ (μ€νμΌ -> λ μ΄μμ -> νμΈνΈ -> ν©μ±)μ λ λλ§μ΄λΌκ³ νλ€. μ΄ λ λλ§ κ³Όμ μ μν©μ λ°λΌ λ°λ³΅νμ¬ λ°μν μ μλ€.
- DOMμ΄ μΆκ°/μμ λκ±°λ, κΈ°νμ μΈ μν₯(λμ΄, λμ΄, μμΉ)μ μ£Όλ CSS μμ±κ°μ λ³κ²½λλ©΄, λ λ νΈλ¦¬λ μ¬κ΅¬μ±λλ€.
- λ μ΄μμ μ΄ν κ³Όμ λΆν° λ€μ μννλ κ²μ λ μ΄μμ λλ 리νλ‘μ°λΌκ³ νλ€.
- λ μ΄μμμ νλ©΄μμμ μ 체 ν½μ μ λ€μ κ³μ°ν΄μΌ νλ―λ‘ λΆνκ° ν¬λ€. λ°λΌμ λΆνμν λ μ΄μμμ΄ λ°μνμ§ μλλ‘ μ£Όμν΄μΌ νλ€.
- κΈ°νμ μν₯μ μ£Όλ css μμ±κ° : height, width, left, right, font-size, ...
- κΈ°νμ μΈ μμμλ μν₯μ μ£Όμ§ μλ CSS μμ±κ°μ λ³κ²½νλ©΄ λ μ΄μμμ 건λλ°κ³ , νμΈνΈλΆν° μννκ² λλ€. μ΄λ₯Ό 리νμΈνΈλΌκ³ νλ€.
- μ΄λ―Έ κ³μ°λ ν½μ κ°μ μ΄μ©νμ¬ νλ©΄μ 그리기 λλ¬Έμ, λ μ΄μμμ λΉν΄ λΆνκ° μ λ€.
- κΈ°νμ μν₯μ΄ μλ css μμ±κ° : color, visibility, text-decoration, ...
리νλ‘μ°μ 리νμΈνΈμ μν₯μ μ£Όλ css μμ±μ μ¬κΈ°μμ νμΈν μ μλ€.
νμ± μ€ λΈλ‘ 리μμ€κ° λ°μν μ μλλ°, cssμ jsκ° λΈλ‘ 리μμ€μ ν΄λΉνλ€.
-
CSSλ νμ HTML λ¬Έμ μ΅μλ¨μ λ°°μΉνλ€.
CSSOM νΈλ¦¬λ CSSλ₯Ό λͺ¨λ ν΄μν΄μΌ ꡬμ±ν μ μλ€. μ¦, CSSOM νΈλ¦¬κ° ꡬμ±λμ§ μμΌλ©΄, λ λ νΈλ¦¬κ° λ§λ€μ΄μ§μ§ μκ³ λ λλ§μ΄ μ°¨λ¨λλ€. λ λλ§μ΄ μ°¨λ¨λμ§ μλλ‘ HTML λ¬Έμ μ΅μλ¨μ λ°°μΉνλ€.
<head>
<link href="style.css" rel="stylesheet" />
</head>
-
νΉμ 쑰건μμλ§ νμν CSSκ° μμ λ, λ―Έλμ΄ μΏΌλ¦¬λ₯Ό μ¬μ©νλ€.
νμ΄μ§λ₯Ό μΈμνκ±°λ, νλ©΄μ΄ μΈλ‘ λͺ¨λμΌ κ²½μ°μλ§ μ¬μ©νλ CSSκ° μλ€λ©΄, ν΄λΉ μ€νμΌμ μ¬μ©νλ κ²½μ°μλ§ λ‘λν μ μλλ‘media
μμ±μ λͺ μνμ¬ μ¬μ©νλ€.
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
-
μΈλΆ μ€νμΌμνΈλ₯Ό κ°μ Έμ¬ λ
@import
μ¬μ©μ νΌνλ€.
|@importλ₯Ό μ¬μ©νλ©΄, λΈλΌμ°μ λ μ€νμΌ μνΈλ₯Ό λ³λ ¬λ‘ λ€μ΄λ‘λν μ μμ΄μ, λ‘λ μκ°μ΄ λμ΄λ μ μλ€.
/* foo.css */
@import url("bar.css")
-
λμ λ°λΌ λ΄λΆ μ€νμΌ μνΈλ₯Ό μ¬μ©νλ€.
μΈλΆ μ€νμΌ μνΈλ₯Ό κ°μ Έμ¬ λ λ°μνλ μμ² νμλ₯Ό μ€μΌ μ μλ€. λ¨, λ΄λΆ μ€νμΌ μνΈλ 리μμ€ μΊμλ₯Ό μ¬μ©ν μ μμΌλ―λ‘, νμν κ²½μ°μλ§ μ¬μ©νλ€.
<head>
<style type="text/css">
.wrapper {
background-color: red;
}
</style>
</head>
μλ°μ€ν¬λ¦½νΈ μ΅μ ν
-
μλ°μ€ν¬λ¦½νΈλ HTML λ¬Έμ μ΅νλ¨ (
</body>
μ§μ )μ λ°°μΉνλ€.μλ°μ€ν¬λ¦½νΈλ DOMνΈλ¦¬μ CSSOMνΈλ¦¬λ₯Ό λμ μΌλ‘ λ³κ²½ν μ μμ΄, HTML νμ±μ μ°¨λ¨νλ€. λν, script νκ·Έ μ΄μ κΉμ§ μμ±λ DOMμλ§ μ κ·Όν μ μλ€.
<script>
νκ·Έλ₯Ό λ§λλ©΄, μ€ν¬λ¦½νΈ μ€νμ΄ μλ£λ λκΉμ§ DOM νΈλ¦¬ μμ±μ΄ μ€λ¨λλ€. μλ°μ€ν¬λ¦½νΈκ° HTML νμ±μ μ°¨λ¨νμ§ μκ² νκΈ° μν΄, HTML λ¬Έμ μ΅νλ¨μ λ°°μΉνλ€.
<body>
<div>...</div>
<div>...</div>
<script src="app.js" type="text/javascript"></script>
</body>
-
<script>
νκ·Έμdefer
λasync
μμ±μ λͺ μνλ€.\defer, asyncλ DOM νΈλ¦¬μ CSSOM νΈλ¦¬λ₯Ό λ³κ²½νμ§ μκ² λ€λ μλ―Έμ΄λ―λ‘, λΈλΌμ°μ κ° νμ±μ λ©μΆμ§ μλλ€. λ°λΌμ, headμ μλ°μ€ν¬λ¦½νΈ νμΌμ λμ΄λ λλ€. κ·Έλ¬λ, μ§μνλ λΈλΌμ°μ κ° νμ μ μ΄λ―λ‘ μ¬μ©μ μ μνλ€.\
-
defer
- deferλ μ€ν¬λ¦½νΈλ₯Ό 'λ°±κ·ΈλΌμ΄λ'μμ λ€μ΄λ‘λνλ€. λ°λΌμ μ€ν¬λ¦½νΈλ₯Ό λ€μ΄λ‘λ νλ μ€μλ HTMLμ νμ±μ ν μ μλ€.
- defer μ€ν¬λ¦½νΈ μ€νμ νμ΄μ§ ꡬμ±μ΄ λλ λκΉμ§ μ§μ°λλ€.
- DOMContentLoaded μ΄λ²€νΈ λ°μ μ μ μ§μ° μ€ν¬λ¦½νΈκ° μ€νλλ€. λ°λΌμ λμ μ νν μμλ μμΈ‘ν μ μλ€.
- deferλ μΈλΆ μ€ν¬λ¦½νΈμλ§ μ ν¨νλ€.
- μ§μ° μ€ν¬λ¦½νΈλ HTMLμ μΆκ°λ μμΌλ‘ μ€νλλ€.
-
async
- async λν μ€ν¬λ¦½νΈλ₯Ό 'λ°±κ·ΈλΌμ΄λ'μμ λ€μ΄λ‘λνλ€. => HTML νμ±μ λ§μ§ μλλ€.
- λ¨, async μ€ν¬λ¦½νΈκ° μ€νμ€μλ HTML νμ±μ λ©μΆλ€.
- DOMContentLoaded μ΄λ²€νΈμ λΉλκΈ° μ€ν¬λ¦½νΈλ μλ‘λ₯Ό κΈ°λ€λ¦¬μ§ μλλ€.
- λ€λ₯Έ μ€ν¬λ¦½νΈμ λΉλκΈ° μ€ν¬λ¦½νΈλ μλ‘λ₯Ό κΈ°λ€λ¦¬μ§ μλλ€.
- νμ΄μ§μ async μ€ν¬λ¦½νΈκ° μ¬λ¬ κ° μλ κ²½μ°, κ·Έ μ€ν μμκ° μ κ°κ°μ΄ λ©λλ€. μ€νμ λ€μ΄λ‘λκ° λλ μ€ν¬λ¦½νΈ μμΌλ‘ μ§νλλ€.
-
<head>
<script async src="https://google.com/analatics.js" type="text/javascript"></script>
</head>
<body>
<div>...</div>
</body>
</html>
μ©λμ΄ ν° λ¦¬μμ€λ μΉ νμ΄μ§ λ‘λ© μκ°μ λλ¦¬κ² νλ€. λΆνμν λ°μ΄ν°λ₯Ό μ κ±°νκ³ , μμΆνμ¬ μ¬μ©νλ κ²μ΄ μ’λ€.
μμ£Ό μ¬μ©λλ μ½λλ utils.js νμΌλ‘ μ λ¦¬ν΄ μ¬μ©νλ€.
loadshμ κ°μ λ§λ₯ μ νΈ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©ν λ, μΌλ°μ μΈ λ°©μμΌλ‘ κ°μ Έμ μ¬μ©νλ©΄ μ νΈν¨μ μ μ²΄κ° ν¬ν¨λμ΄ μλ°μ€ν¬λ¦½νΈ νμΌ μ©λμ΄ μ»€μ§λ€. νμν ν¨μλ§ λΆλΆμ μΌλ‘ κ°μ Έμμ μ©λμ΄ λμ΄λμ§ μλλ‘ νλ€.
import array from 'lodash/array';
import object from 'lodash/fp/object';
array(...);
object(...);
λΆνμν λ§ν¬μ μ μ¬μ©νμ¬ DOM νΈλ¦¬κ° 컀μ§λ κ²μ λ§κ³ , HTML νμΌ μ©λμ΄ λμ΄λμ§ μλλ‘ νλ€.
- HTMLμ νκ·Έμ μ€μ²©μ μ΅μννμ¬ λ¨μνκ² κ΅¬μ±νλ€.
- 곡백, μ£Όμ λ±μ μ κ±°νμ¬ μ¬μ©νλ€.
- μ νμλ μ΅μννμ¬ μ¬μ©νλ€.
- ν΄λμ€ μ νμλ₯Ό μ¬μ©νλ©΄ μ€λ³΅λλ μ€νμΌμ λ¬Άμ΄μ μ²λ¦¬νλ€.
- HTML, JS, CSS λͺ¨λ μμΆνμ¬ μ¬μ©
- λΆνμν μ£Όμκ³Ό 곡백μ μ κ±°ν ν, λλ ννμ¬ μ¬μ©νλ€.
- webpackκ³Ό κ°μ νλ¬κ·ΈμΈμΌλ‘ μ΄λ₯Ό μ²λ¦¬ν μ μλ€.
λ μ΄μμμ DOM μμλ€μ΄ νλ©΄μ λ°°μΉλλ κ²μ κ²°μ νλ κ³μ° λ¨κ³μ΄λ€. λ μ΄μμμ μΌμΌμ΄ κ³μ°νκ³ , μμκ° κ΄κ³λ₯Ό λͺ¨λ νμ ν΄μΌ νλ―λ‘ μκ°μ΄ μ€λ 걸리λ κ³Όμ μ΄λ€. λ μ΄μμ μ΅μ νλ₯Ό ν΅ν΄ λ μ΄μμμ 걸리λ μκ°μ μ΅λν λ¨μΆν΄μΌ νλ€.
μλ°μ€ν¬λ¦½νΈμ μ€ν μκ°μ΄ κΈΈ 겨μ , ν νλ μ μ²λ¦¬κ° μ€λ κ±Έλ € λ λλ§ μ±λ₯μ΄ λ¨μ΄μ§λ€.
-
κ°μ λκΈ° λ μ΄μμ νΌνκΈ°
μλ λ μ΄μμμ λΉλκΈ°λ‘ μΌμ΄λμ§λ§, νΉμ μν©μμ λκΈ°μ μΌλ‘ λ μ΄μμμ΄ λ°μνλ€. μ΄λ₯Ό κ°μ λκΈ° λ μ΄μμμ΄λΌκ³ νλλ°, κ°μ λκΈ° λ μ΄μμμ JSμ μ€ν μκ°μ λμ΄λκ² νλ―λ‘ μ£Όμν΄μΌ νλ€.
μ€νμΌμ λ³κ²½ν λ€μ
offsetHeight
,offfsetTop
κ³Ό κ°μ κ³μ°λ μμ±μ μΌμ λ, κ°μ λκΈ° λ μ΄μμμ΄ μνλλ€. μ΄μ κ°μ μ½λλ₯Ό μ΅λν μ¬μ©νμ§ μλλ‘ μ£Όμνλ€.
const tabBtn = document.getElementById('tab_btn');
tabBtn.style.fontSize = '24px';
console.log(testBlock.offsetTop); // offsetTop νΈμΆ μ§μ λΈλΌμ°μ λ΄λΆμμλ λκΈ° λ μ΄μμμ΄ λ°μνλ€.
tabBtn.style.margin = '10px';
// λ μ΄μμ
-
λ μ΄μμ μ€λ μ± νΌνκΈ°
ν νλ μ λ΄μμ κ°μ λκΈ° λ μ΄μμμ΄ μ°μμ μΌλ‘ λ°μνλ©΄, μ±λ₯μ΄ λμ± μ νλλ€. forλ¬Έμ΄ λ°λ³΅λ λλ§λ€ λ μ΄μμμ΄ λ°μνλ κ²μ λ μ΄μμ μ€λ μ±μ΄λΌκ³ νλ€. λ°λ³΅λ¬Έ λ°μμ box μ리먼νΈμ λλΉλ₯Ό μ½μ΄μ€λ©΄ λ μ΄μμ μ€λ μ±μ νΌν μ μλ€.
function resizeAllParagraphs() {
const box = document.getElementById('box');
const paragraphs = document.querySelectorAll('.paragraph');
for (let i = 0; i < paragraphs.length; i += 1) {
paragraphs[i].style.width = box.offsetWidth + 'px';
}
}
// λ μ΄μμ μ€λμ±μ κ°μ ν μ½λ
function resizeAllParagraphs() {
const box = document.getElementById('box');
const paragraphs = document.querySelectorAll('.paragraph');
const width = box.offsetWidth;
for (let i = 0; i < paragraphs.length; i += 1) {
paragraphs[i].style.width = width + 'px';
}
}
- κ°λ₯ν νμ λ
Έλμ DOMμ μ‘°μνκ³ μ€νμΌμ λ³κ²½
- DOM νΈλ¦¬μ μμ λ Έλμ μ€νμΌμ λ³κ²½νλ©΄ νμ λ Έλμ λͺ¨λ μν₯μ λ―ΈμΉλ€.
- λ³κ²½ λ²μλ₯Ό μ΅μννμ¬ λ μ΄μμμ λ²μλ₯Ό μ€μΈλ€.
- μ¨κ²¨μ§ μλ¦¬λ¨ΌνΈ μμ
- μ¨κ²¨μ§ μνμμ μ리먼νΈλ₯Ό λ³κ²½νκ³ λ€μ 보μ΄λλ‘ νμ¬, λ μ΄μμ λ°μμ μ΅λν μ€μΈλ€.
visibility: hidden
μ 보μ΄μ§ μμ 리νμΈνΈλ λ°μνμ§ μμ§λ§, 곡κ°μ μ°¨μ§νκΈ° λλ¬Έμ λ μ΄μμμ λ°μνλ€.display: none
μΌλ‘ μ¨κ²¨μ§ μ리먼νΈλ₯Ό λ³κ²½νλ©΄, λ μ΄μμκ³Ό 리νμΈνΈκ° λ°μνμ§ μμ μ±λ₯μ μ 리νλ€.
-
cssκ·μΉ μ μ΅μ ν
- μ¬μ©νλ κ·μΉμ΄ μ μμλ‘ κ³μ°μ΄ λΉ λ₯΄λ―λ‘ μ΅μννλ€.
- 볡μ‘ν μ νμλ μ€νμΌ κ³μ°μ λ§μ μκ°μ΄ 걸리λ―λ‘ νΌνλ€.
-
DOM κΉμ΄ μ΅μν
DOMνΈλ¦¬κ° κΉμ μλ‘, νλμ λ Έλμ μμ λ Έλκ° λ§μμλ‘ DOM νΈλ¦¬λ 컀μ§λ€. κ·Έλ§νΌ DOMμ λ³κ²½νμ λ, μ λ°μ΄νΈμ νμν κ³μ°μ λ§μμ§λ€.
- DOMμ΄ μκ³ κΉμ΄κ° μμμλ‘ κ³μ°μ΄λΉ λ₯΄λ€.
- λΆνμν λνΌ μ리먼νΈλ μ κ±°νλ€.
ν νλ μ μ²λ¦¬κ° 16msλ΄λ‘ μλ£λμ΄μΌ λ λλ§μ λκΈ°λ νμμμ΄ μμ°μ€λ¬μ΄ λ λλ§μ λ§λ€μ΄λΌ μ μλ€. μ λλ©μ΄μ μ ꡬνν λ, λ€μ΄ν°λΈ μλ°μ€ν¬λ¦½νΈ APIλ₯Ό μ¬μ©νλ κ²λ³΄λ€, CSS μ¬μ©μ κΆμ₯νλ€.
-
requestAnimationFrame() μ¬μ©
- requestAnimationFrame APIλ₯Ό μ¬μ©νλ©΄ λΈλΌμ°μ μ νλ μ μλ(λ³΄ν΅ 60fps)μ λ§μΆμ΄ μ λλ©μ΄μ μ μ€νν μ μλλ‘ ν΄μ€λ€.
- νλ μμ μμν λ νΈμΆλλ―λ‘, μΌμ ν κ°κ²©μΌλ‘ μ λλ©μ΄μ μ μνν μ μλ μ₯μ μ΄ μλ€.
- νμ¬ νμ΄μ§κ° 보μ΄μ§ μμ λλ μ½λ°±ν¨μκ° νΈμΆλμ§ μμΌλ―λ‘ λΆνμν λμμ νμ§ μλλ€.
-
CSS μ λλ©μ΄μ μ¬μ©
μλ°μ€ν¬λ¦½νΈλ₯Ό μ¬μ©ν μ λλ©μ΄μ μ μ±λ₯μ΄ λμ μ μλ€. CSS3 μ λλ©μ΄μ μ μ¬μ©νλ©΄, λΈλΌμ°μ κ° μ λλ©μ΄μ μ μ²λ¦¬νλλ° μ΅μ νλμ΄ μμ΄μ λΆλλ¬μ΄ μ λλ©μ΄μ μ ꡬνν μ μλ€.
-
position:absolute μ²λ¦¬
μ λλ©μ΄μ μ΄ μ£Όλ³ μμμ μν₯μ μ£Όμ§ μλλ‘ μ£Όμν΄μΌ νλ€. positionμ absoluteλ fixedλ‘ μ€μ νμ¬ μ£Όλ³ λ μ΄μμμ μν₯μ μ£Όμ§ μλλ€.
-
transform μ¬μ©
position, width, heightμ κ°μ΄ κΈ°νμ λ³νλ₯Ό μ λ°νλ μμ±μ λ³κ²½νλ©΄ λ μ΄μμμ΄ λ°μνλ€. transformμ μ¬μ©νλ μ리먼νΈλ λ μ΄μ΄λ‘ λΆλ¦¬λμ΄, μν₯λ°λ μ리먼νΈκ° μ νλλ―λ‘ λ μ΄μμκ³Ό νμΈνΈλ₯Ό μ€μΌμ μλ€. λν ν©μ±λ§ λ°μμν€κΈ° λλ¬Έμ μ λλ©μ΄μ μ¬μ©μ λ λλ§ μλκ° ν₯μλ μ μλ€. νλμ¨μ΄κ° μ§μλ κ²½μ°, GPUλ₯Ό μ¬μ©ν μ μμ΄ μ±λ₯μ΄ λΉ λ₯΄λ€.
-
μλ°μ€ν¬λ¦½νΈμ DOM κ°μ²΄λ μ°μ°μ μνν λλ§λ€ DOM treeλΌλ μλ£κ΅¬μ‘°μ μ κ·Όν΄μΌ νκΈ° λλ¬Έμ μλ°μ€ν¬λ¦½νΈμ μ±λ₯μ μ νμν€λ μ£Όλ μμΈ μ€ νλμ΄λ€. λ°λΌμ, μλ°μ€ν¬λ¦½νΈμ μ±λ₯μ μ΅μ ννκΈ° μν΄μλ DOM κ°μ²΄ μ κ·Όμ μ΅μννλλ‘ μ½λλ₯Ό μμ±ν΄μΌ νλ€.
DocumentFragmentλ λ©μΈ DOM νΈλ¦¬μ μΌλΆκ° λμ§ μλλ€. λ°λΌμ, DocumentFragmentλ₯Ό λ³κ²½νμ¬λ λ¬Έμμλ μν₯μ΄ μμΌλ©°, 리νλ‘μ°λ μΌμΌν€μ§ μλλ€.
DocumentFragmentλ μ£Όλ‘, createDocumentFragment()λ‘ DocumentFragmentλ₯Ό μμ±νκ³ , κ·Έ μμμ DOM νμ νΈλ¦¬λ₯Ό 쑰립ν λ€μ, DocumentFragmentλ₯Ό DOM νΈλ¦¬μ μΆκ°νλ κ²μ΄λ€. μ΄λ κ² νλ©΄ DocumentFragmentμ λ Έλλ€μ΄ DOMμΌλ‘ μ΄λλκ³ λΉ DocumentFragmentλ§ λ¨κ² λ©λλ€. μ΄λ₯Ό ν΅ν΄, μ¬λ¬λ² 리νλ‘μ°μ λ λλ§μ΄ μΌμ΄λμ§ μκ³ , λ¨ ν λ²λ§ 리νλ‘μ°μ λ λλ§μ΄ μΌμ΄λκ² λλ€.
- μ΅μ ν μμ
function addElements() {
var target = document.getElementById('list');
for (var i = 0; i < 100; i++) {
var div = document.createElement('div');
div.innerText = 'div';
target.appendChild(div);
}
}
μμ μ½λλ DOM κ°μ²΄μ 100λ² μ κ·Όνκ² λλ€.
μλ°μ€ν¬λ¦½νΈμμ μ 곡νλ DocumentFragment κ°μ²΄λ₯Ό μ΄μ©νλ©΄ DOM κ°μ²΄ μ κ·Όμ μ΅μνν μ μλ€.
function addElements() {
var target = document.getElementById('list');
var docFrag = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
var div = document.createElement('div');
div.innerText = 'div';
docFrag.appendChild(div);
}
target.appendChild(docFrag);
}