Visual Studio Code를 사용하는 경우 . 이 바로 가기를 알고

Visual Studio 코드 바로 가기를 알면 코드를 작성할 때 상상할 수 있는 것보다 더 많은 시간을 절약할 수 있습니다. 시간을 절약하기 위해 시도할 수 있는 이러한 단축키 중 일부를 확인하세요.



1. ID 및 클래스 속성

• HTML 태그에 Id 속성 추가
(사업부#정보)

<div id="info"></div>

• html 태그에 클래스 속성 추가
(div.헤더)

<div class="header"></div>

• Id 및 class 속성 추가
(양식#.info)

<form action="" id="" class="info"></form>

• 여러 ID 및 클래스 속성 추가
(p.info1.info2.info3.info4#info)

<p class="info1 info2 info3 info4" id="info"></p>

2.아이템 넘버링

• 정렬된 수의 클래스 이름을 하위 요소에 추가합니다.
(ul>li.아이템$*5)

<ul>
    <li class="items1"></li>
    <li class="items2"></li>
    <li class="items3"></li>
    <li class="items4"></li>
    <li class="items5"></li>
</ul>

3.동일 클래스의 하위 요소(암시적 태그 이름)

(ul>.항목)

<ul>
    <li class="item"></li>
</ul>

             OR

(테이블>.행>.열*3)

<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>

4. 그룹으로 묶기

(div> (헤더>ul>li*2>a) +바닥글>p)

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

5. 텍스트가 있는 HTML 태그

(a{구글})

`<a href="https://www.google.com/">Google</a>`

6. 다른 HTML 태그에 HTML 태그 추가(형제)

(사업부+초+p)

<div></div>
<sec></sec>
<p></p>

7. 자식 및 부모 요소 추가

•여러 자식 요소 추가

(울>리*)

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

•부모 요소에 자식 요소 추가

(ul>li)

<ul>
    <li></li>
</ul>