nika-blog

HTML 최단시간으로 작성하기 본문

FE/HTML

HTML 최단시간으로 작성하기

nika0 2021. 9. 2. 09:50

요즘은 프레임워크를 많이 사용해서 HTML을 일일이 작성하는 경우는 많이 없지만, 

그래도 작성할 일을 대비해 작성해보겠습니다.

 

 

바로 요즘에 거의 모든 IDE(IJ)와 Text Editor(vscode) 등에 탑재되어 있는 

Emmet 입니다. 

바로 아래와 같이 작성하는 것이데, 

기억할 것은 다음과 같습니다. 

 

  • 부모 > 자녀
  • 형제 +
  • . class
  • # id
  • {text}
  • Tab키 누르기
  • * 곱하기

전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  div.container>h1.title+p.description+ul#users>li{user}*5
</body>
</html>

 

후(Tab키 누르기)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <h1 class="title"></h1>
    <p class="description"></p>
    <ul id="users">
        <li>user</li>
        <li>user</li>
        <li>user</li>
        <li>user</li>
        <li>user</li>
    </ul>
</div>
</body>
</html>

 

추가로 숫자로 클래스 명이나 내용을 작성할 때 자동으로 지정할 수 있는데요, 

p.class${item $}*5

tab 누르면 다음과 같이 작성됩니다. 

<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>

 

마지막 tip은 의미없는 내용을 넣고 싶을 때 lorem을 입력하는 것인데요, 

 

 

tip을 이용해서 코딩시간 단축하면 좋겠습니다!

오늘은 여기까지에요!

 

'FE > HTML' 카테고리의 다른 글

HTML 태그 분류  (0) 2021.08.30
HTML 시멘틱 태그 제대로 사용하기  (0) 2021.08.17
'FE/HTML' Related Articles more