[Emmet] Emmet 빠르게 마크업 하기 2

- 그룹화 하기에는 () 를 사용한다.

그룹화 예시

위 이미지를 참고하면

div 안에 header가 있고 그 안에 ul가 있다. li 안에 a 태그가 7번 반복, header 옆에 footer가 있다.

 

div>(header>ul>li*7>a)+footer>p

 

저렇게 입력하면

div>(header>ul>li*7>a)+footer>p 실행

똑같은 모습

 

- 텍스트 입력하기

텍스트를 입력하기 위해서는 {} 를 사용하면 된다.

만약에 P태그 안에 Text area 라는 텍스트를 적고 싶다면

p>{text area} 라고 입력하면 된다.

p>{text area} 입력

p>{text area} 실행

 

- 숫자를 자동으로 입력하기 위해서는 $ 사용

class 이름이 "class 숫자" 라는 p 태그 안에 "text 숫자" 라는 텍스트가 들어가는게 5번 반복되는 태그를 작성한다고 치면

(글로 표현하기가 좀 어려움)

p.class${text $}*5라고 입력하면 된다.

p.class${text $}*5 입력

p.class${text $}*5 실행 값

 

- 더미 생성하기

p 태그안에 글을 넣어서 테스트 해보고 싶은데 마땅한 글이 생각 안나면 lorem 을 입력하면 된다.

p>lorem 입력

p>lorem 입력

p>lorem 실행 값

 

*드림 코딩 엘리님의 youtube를 보고 개인적인 공부를 위한 포스팅입니다 ^^

원본을 보실 분은 밑에 클릭 해 주시면 돼요 ^^

https://www.youtube.com/watch?v=m7wsrVQsVjI&t=446s