[HTML] Emmet (div박스 여러 개 만들기)

! VS CODE를 기준으로 작성됨

 

우리는 보통 html에서 div태그를 여러 개 만들어 쓰는 경우가 많다

그럴 때

마구잡이 식으로 div태그를 필요할 때마다 만들거나 혹은

div태그를 복붙 복붙 해서 사용하곤 한다 

 

그럴 때 유용하게 사용할 수 있는 것이 바로 Emmet이다.

 

HTML

div.wrap>div

이렇게 입력하고 엔터 혹은 탭키를 눌러보면

 

<div class="wrap">
      <div></div>
    </div>

우리가 흔히 아는 div에 class="wrap"가 지정된 레이아웃을 만들 수 있다

 

여기서  > 표시는 바로 밑 자식 요소라는 뜻

 

 

HTML

div.wrap>div.content*3

이런 것도 가능하다

대충 무슨 뜻일까?

<div class="wrap">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>

그렇다 wrap이라는 클래스의 자식 요소들 content를 3개 추가해주었다

 

 

그냥 필요할 때마다 div를 만들어서 사용할 수 있지 않은가?
아니다.

Emmet을 처음부터 사용하는 습관을 기른다는 것은 처음 html을 작성할 때 우리가
class는 몇 개가 필요하고,
div는 몇개가 필요하고,

여기서 어떤 태그를 넣어줘야 하고를 자연스럽게 생각하게 된다 
이런 습관이 없다면 필요할 때마다 넣어주는 태그들은 불필요한 중복이 많아지고 코드량도 많아질 것이다

심심하다면 가끔 해보도록 하자

끝!!