[codetip]

CSS RESET

html로 웹페이지 제작시 다양한 태그들을 이용한다.
기본적으로 제공하는 스타일이 표준화가 되어있지 않기때문에
웹에서 제공하는 CSS를 초기화하는 것이 좋다.
resetcss

code pen 활용하기

CodePen
HTML,CSS,JavaScript등을 바로 적용할 수 있다.

Emmet 문법

다양한 text editor에서 코딩을 간편하게
작성할 수 있게 도와준다. VS code에서 div입력후 tab을 누르면 div태그를 열고 닫아주는 것이다.

.container>ul.list>ul.list-item*10>a{list$}  작성후 tab
결과값으로
<div class="container">
    <ul class="list">
        <ul class="list-item"><a href="">list1</a></ul>
        <ul class="list-item"><a href="">list2</a></ul>
        <ul class="list-item"><a href="">list3</a></ul>
        <ul class="list-item"><a href="">list4</a></ul>
        <ul class="list-item"><a href="">list5</a></ul>
        <ul class="list-item"><a href="">list6</a></ul>
        <ul class="list-item"><a href="">list7</a></ul>
        <ul class="list-item"><a href="">list8</a></ul>
        <ul class="list-item"><a href="">list9</a></ul>
        <ul class="list-item"><a href="">list10</a></ul>
    </ul>
</div>

• class가 container인 div태그를 만들고 그 div 태그는 자식요소로
  class가 list인 ul 태그를 만든다.
• 그 ul 태그는 자식요소로 class가 list-item인 ul태그를 10개 만든다.
• 그 ul태그는 자식요소로 a태그를 갖게되는데 a태그의 content는 list$이다.
• $는 1부터 증가한다.
  css에서 ab 선택자 처럼 a이면서 b인것을 찾는 것처럼
  emmet문법에서도 사용 가능하다고 생각하면 쉽다.