VSCODE | HTML

화면 출력을 바로 확인하기 위한 플러그인 설치

Extension -> Live Server 설치

Html 우클릭 Open with Live Server 클릭하면 화면에 출력됨

제대로 출력 안되면

이와 같이 폴더 생성후 작성 / 주석 색상 설정

브라우저 변경하는법

 

단축키

실행 :

마우스 우클릭

html:5 (구문) + 엔터 : html구문 자동완성

코드 실행 : ctrl + f5

코드 이동 : alt + 방향키
코드정렬 : alt + shift + f
글을 한번에 적을 수 있음 : alt + 커서(클릭) , esc 로 취소  

한번에 여러번 적기 : 태그명 + tab 버튼

주석 단축키 : (행 주석)ctrl + /
                       (전체)alt + shift + a삭제 : ctrl + shift + k

 

태그

<!--w3c, html5 
    * html은 정답이 없어 다 div로 짜도 되지만
      태그를 사용하는 것은 해당 태그의 의미가 있는 태그를 부여하여
      사용한다고 생각하면 된다.
    
      - 아이콘은 i태그(기울어진 글자 태그)
    - 굵은 글자 태그
      <b></b>
      <strong></strong>
    - a태그 속성 
      <a 변수 = "값"></a>
    - 순서가 없는 목록 태그 ul
    - 순서가 있는 목록 태그 ol -->

    <a href=""></a>

    <h3>제목</h3>
    <p>글자</p>
    <small>글자</small>
    <strong>글자</strong>
    <i>글자</i>
    <del>글자</del>
    <b>글자</b>

    <hr/>

    <ol>
        <li>목록</li>
        <li>목록</li>
        <li>목록</li>
    </ol>

    <ul>
        <li>목록</li>
        <li>목록</li>
        <li>목록</li>
    </ul>

    <!--table태그
        colspan 열 합치기
        rowspan 행 합치기
   
        img태그 - alt : 이미지가 없을 때 나오는 글자
                - src : 이미지의 경로 지정
        video태그(영상) - controls, type(확장자명)

        form태그 - name(이름), value(값)
        select태그 -name(이름)
                   -option태그(값을 의미)
                -->

블럭, 인라인 요소

 <!--html,css잘하는 법 : 개발자 도구 이용-->
    <!--블럭
        - 전체영역을 공간으로 가집니다.
        - 블럭태그의 자식으로 블럭과 인라인태그 모두 들어갈 수 있음-->

    <div>블럭</div>
    <div>블럭</div>
    <div>블럭</div>

    <p>블럭</p>
    <h3>블럭</h3>
    <ul>
        <li>블럭</li>
        <li>블럭</li>
        <li>블럭</li>
    </ul>
    <table>
        <tr>
            <td>블럭</td>
        </tr>
    </table>

    <div>
        <div>
            <div>블럭</div>
        </div>
    </div>

    <!--인라인
        -인라인요소는 태그자체의 크기를 가집니다.
        -인라인요소 안에는 인라인만 들어갑니다.-->
    
    <a href="#">인라인</a>
    <span>인라인</span>
    <i>인라인</i>
    <b>인라인</b>
    <strong>인라인</strong>
    <small>인라인</small>
    
    <!--시맨틱 태그 : 더 큰 의미를 부여하기 위해 만들어진 태그
    -->
    <header></header>
    <footer></footer>
    <section>여러중심내용을 감싸는 의미</section>
    <article>글자가 많이 들어가는 부분</article>
    <nav>내비게이션을 의미</nav>
    <aside>사이드에 위치</aside>

깃 연결