■ HTML
기본 템플릿 생성
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
태크 추가
div*3
<div></div>
<div></div>
<div></div>
자식요소 태그 추가
div>div*3
<div>
<div></div>
<div></div>
<div></div>
</div>
순서대로 태그 생성
div+p+span
<div></div>
<p></p>
<span></span>
태그에 클래스 넣어서 만들기
div.itme*3
<div class="itme"></div>
<div class="itme"></div>
<div class="itme"></div>
태그에 속성 넣어서 새로 만들기
div[class]*3
<div class=""></div>
<div class=""></div>
<div class=""></div>
태그에 클래스 넣어서 번호매기기
div.item$@*3
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
태그에 아이디 넣어서 번호매기기
div#item$@*3
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
태그에 내용 넣어서 번호매기기
div{안녕$@}*3
<div>안녕1</div>
<div>안녕2</div>
<div>안녕3</div>
역순으로 넣어만들기
div{안녕$@-}*3
<div>안녕3</div>
<div>안녕2</div>
<div>안녕1</div>
아이디, 클래스 가진 div 태그 생성
#a$@*3
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
.a$@*3
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
■ CSS
w10
width: 10px;
h10
height: 10px;
m10
margin: 10px;
p10
padding: 10px;
t10
top: 10px;
fz30
font-size: 30px;
bd1#s
border: 1px #000 solid;
bgc#f0f
background-color: #f0f;