1. HTML 양식 작성
MS Visual Studio Code 에서 ! 만 누르면 아래에 자동으로 Emmet ~ 이 나옴. 이렇게 해서 HTML 코드를 빠르게 생성!
2. 태그 작성
div 누르고 tab 키 누르면 자동으로 태그가 생성됨
클래스는 . 아이디는 # 을 이용하면 자동으로 생성됨!
3. 부모, 자식, 형제 노드
div>ul>li 입력 후 tab 키
<div>
<ul>
<li></li>
</ul>
</div>
div>ul+ol 입력 후 tab 키(형제노드)
<div>
<ul></ul>
<ol></ol>
</div>
상위에 추가하고 싶을 경우:
div>ul>li^ol: ol 태그를 ul 태그와 같이 입력하고 싶을때 ^ 이용.
<div>
<ul>
<li></li>
</ul>
<ol></ol>
</div>
4. 그룹화 하기
div>(header>ul>li2>a)+footer>p* 입력 후 tab 키
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
5. 텍스트 입력하기
p{hello} 입력시
<p>hello</p>
6. 자동 번호 넣기
p.class${item $}*5
<p class="class1">item 1</p>
<p class="class2">item 2</p>
<p class="class3">item 3</p>
<p class="class4">item 4</p>
<p class="class5">item 5</p>
7. 더미용 텍스트 생성
p>lorem
4개의 단어만 입력하고 싶을 경우: p>lorem4
'Front' 카테고리의 다른 글
| 개발 환경 셋팅 - MS Visual Studio Code 환경설정 (0) | 2023.03.28 |
|---|---|
| MS Visual Studio Code 환경설정 (0) | 2022.03.20 |