[드림코딩] Markup 빠르게 입문해보기.

Markup 언어를 빠르게 입문해보기

이번 포스팅은 Markup 언어의 기초를 다룹니다.

 

Markup 언어란?

Markup 언어란 손으로 작성하는 () 괄호, <>태그 등 으로 이루어진 언어이다. boilerplate 라고도 불립니다.

boilerplate란? 반복적인 코드는 자동화로 맡겨 버리고 꼭 필요한 코딩만 합니다. 개발자들에게 불필요하고 복잡하고 도움이 안 되는 반복적인 일들을 하지 않도록 도와줍니다.

 

Markup 언어를 빠르게 사용하는 방법들을 소개

Emmet을 사용하면 html을 작성하는데 걸리는 시간과 손목의 노동을 줄일 수 있습니다.

나중에 Emmet의 Documentation를 https://docs.emmet.io/에서 공부하길 바랍니다. 

<!--Markup 빠르게 입문하기-->


<!-- # id -->
div# 
<div id=""></div>

<!-- . class -->
div.
<div class=""></div>


<!-- > -->
div>ul>li
<div>
    <ul>
        <li></li>
    </ul>
</div>

<!-- + -->
div>ul+ol
<div>
    <ul></ul>
    <ol></ol>
</div>

<!-- * -->
ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!-- ^ 상위 -->
div>ul>li^ol
<div>
    <ul>
        <li></li>
    </ul>
    <ol></ol>
</div>

<!-- ^^ 상위 두번-->

div>header>ul>li^^footer>p
<div>
    <header>
        <ul>
            <li></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>


<!-- () -->

div>(header>ul>li*2>a)+footer>p
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

<!-- {} -->

p>{hello}
<p>hello</p>


<!-- {$}-->

p.class${item $}*5
<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">it
    em 5</p>

<!--lorem-->
p>lorem4
<p>Lorem ipsum dolor sit.</p>