망각에 재주 있는 나를 위해 기록하는 곳.

[HTML] 태그(tag) 여러개 한번에 쓰기 / Emmet Abbreviation 본문

HTML, CSS

[HTML] 태그(tag) 여러개 한번에 쓰기 / Emmet Abbreviation

baobabtree 2021. 7. 16. 01:14

https://blog.naver.com/wook2124/221945093099

태그를 여러 개를 써야 하는데 하나하나 반복적으로 쓰기 귀찮을 때 한 번에 쓰는 법.

 

1) 한 가지 태그 반복

위와 같이 태그*숫자를 입력하면 그 숫자만큼 태그가 생성된다. 

 

2) 하위 태그

태그1>태그2>태그3, >는 하위태그를 만드는 기호.

 

3) 같은 레벨 다른 태그 나열

태그1*숫자+태그2*숫자, +는 같은 레벨

 

4) 클래스 붙이기

태그.클래스이름*숫자,  .을 붙이면 클래스까지 만든다.

 

5) 클래스 번호 증가

태그.클래스이름$*숫자, $은 만드는 개수만큼 숫자가 증가한다.

 

6) 내용삽입

태그1>태그2{태그2내용$}*숫자, { }가 내용을 넣는 기호.

 

위의 것들을 잘 조합해서 쓰면 편하다.

위처럼 한 줄로 쓰면 아래처럼 하나하나 손으로 직접 칠 필요가 없다.

예제가 div와p만 있는데, 말고도 table이나 ul, ol, dl 등등 활용하기 나름이다.

'HTML, CSS' 카테고리의 다른 글

[HTML] 시맨틱 태그 (& html tag 정리2)  (0) 2021.07.15
[HTML] html tag 정리  (0) 2021.07.13