2022. 1. 7. 11:52ㆍWeb
VSCode를 이용하여 웹개발을 많이 진행합니다. 그중에서도 빠른 마크업을 위한 도구인 Emmet(에밋)이
있는데요, 저도 놓치고 있었던 부분이 있어서 한번 정리해보고자 합니다.
빠른 마크업이 중요한 이유 ?
html이나 xml 같은 마크업 언어는 코드의 양이 많기 때문에 시간 단축이 중요합니다.
그래서 html에서는 emmet 같은 tool들이 개발자들이 좀 더 빠르게 코드를 작성할 수 있도록 지원해주죠.
정리하기 앞서, Nesting Operator에 대해 알아보도록 하겠습니다.
Nesting Operator은 약어 요소를 생성된 트리 안에 배치하는데 사용하고, 컨텍스트 요소의 내부 또는 근처에 배치할지 여부를 결정합니다. 해석을 하니 무슨 뜻인지 감이 잘 오지 않네요 ^^;;
웹개발 시작을 위한 <html> 요소들 한번에 작성하기
html:5
아마 현재 html5 버전이라 html:5를 쓰는 것 같네요.
자식 관계 : > 사용 (부모>자식)
만약, <div> 태그 안에 <ul> 태그 안에 <li> 태그를 순서대로 자식 요소로 배치하고 싶다면?
div>ul>li 그리고 tab키
<div>태그 내에 자식 요소 <ul>이, <ul>태그 안에 자식 요소로 <li> 태그가 들어왔습니다.
직접 코드를 치지 않고도 한번에 완성이 되었습니다.
형제 관계 : + 사용 (형제+형제)
자식 관계는 > 에서 하위 관계로 들어갔다면, 형제 관계는 코드에서 같은 줄에 위치해야겠죠? (들여쓰기X)
div>ol+ul 그리고 tab키로 완성
여기서 <ol>과 <ul>은 형제관계 입니다.
한 단계 위에 요소 추가 : ^
상위(부모)로 접근하게 되면 상위태그의 형제 노드가 추가됩니다.
div>ul>li^ol
반복 * (곱하기 연산자 기호)
만약에 <ul>태그 안에 <li>를 5번 반복해서 쓰고 싶다면?
ul>li*5 그리고 tab키
태그명에 텍스트 넣기
넘버링하기
$을 사용하며 $은 순번 부여하는 기호
ul>li#$*4
IF #(id)을 뺀다면?
ul>li 관계는 제대로 출력되나 원하는 넘버링으로 나오지 않고 <li>태그에 1,2,3,4 숫자가 붙어서 출력되네요.
덧붙여, #은 id이고 .은 class입니다.
연산자 추가
연산자 추가를 통해 id와 class 추가가 가능합니다.
div클래스 이름이 num이고, div 클래스 안에서 id가 num인 div 코드들을 3개 추가해봅시다.
div.num>div#num$*3
그룹화하기 () header,footer
div>(header>ul>li*2)+footer>p
header 내에서 <ul>태그와 <li> 태그를 그룹화하였고
footer은 header와 형제 관계로 +로 연결하였습니다.
'Web' 카테고리의 다른 글
| [firebase 설치 오류] firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 ~ 해결방법 (1) | 2022.01.13 |
|---|---|
| JavaScript의 내부동작원리는? (0) | 2022.01.12 |
| @ 미디어쿼리에 대하여 (0) | 2022.01.07 |
| html+JS 버튼을 이용하여 삼행시 한 줄씩 출력하는 프로그램 (1) | 2021.12.22 |
| Web 1.0부터 Web 3.0까지 정리해보기 (1) | 2021.12.22 |