HTML

Bloooooooooooooog..·2023년 2월 8일

Visunal Studio Code

프론트엔드를 다룰 때 가장 많이 사용하는 IDE이다. 애드온 적용도 간편하고, 가볍고, 깔끔하다.

<!DOCTYPE html>
<!-- 마크업 주석 ctrl + / -->
<!-- Document Type = !DOCTYPE -->
<html lang="ko">
<!-- html태그 : html문서의 내용을 정의하는 태그(이 안에 HTML 코드 작성) -->

    <head>
    <!-- head 태그 : html 문서를 정의하는 태그 
        문서의 제목, 스타일 시트(css), 스크립트(js), 메타데이터(문서의 일반적 정보)
    -->
        <meta charset="UTF-8">
        <!-- 현재 문서의 문자 형식이 UTF-8로 되어있음을 선언 -->
        <title>제목</title>
    </head>
    <body>
    <!-- body 태그 : 화면에 보여질 html 문서의 내용을 정의하는 태그 -->
    
    </body>
</html>

html 기본 구성을 자동으로 불러올 수 있다. 이 골격에서 html을 작성한다.

각종 문서 관련 태그

  <!-- body 태그 : 화면에 보여질 html 문서의 내용을 정의하는 태그 -->
        <!-- <h1> ~ <h6> 
            제목을 입력할 때 사용하는 태그
            1~6까지 6단계의 폰트 크기가 지정되어 있음.
            
            * 해당 태그는 시작부터 종료까지가 하나의 문단이 됨
            == 종료 태그 이후 줄바꿈이 일어난다.
        -->
        기본 글자 크기입니다.
        <h1>h1 태그에 작성된 내용입니다!</h1>
        <h2>h2 태그에 작성된 내용입니다!</h2>
        <h3>h3 태그에 작성된 내용입니다!</h3>
        <h4>h4 태그에 작성된 내용입니다!</h4>
        <h5>h5 태그에 작성된 내용입니다!</h5>
        <h6>h6 태그에 작성된 내용입니다!</h6>

        <hr>
        <!-- hr 태그 : 가로 줄 긋기 태그 -->

		<!-- html에서 연속 띄어쓰기나 엔터 모두 공백 한 칸으로 취급 -->
        
        가&nbsp;나  가&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;나
        <br>다
        <!-- 
            &nbsp; 띄어쓰기 한 칸
            <br> 줄 바꿈 코드 
        -->

		<h3>p, pre 태그</h3>
        <!-- 
            p 태그 :
            - 글을 작성하는 용도의 태그
            - 종료 시 줄바꿈
         -->
         <p>p 1번입니다.</p>
         <p>p 2번입니다.</p>
         <p>p 3번입니다.</p>

         <!-- 
            pre 태그 :
            - 글을 작성하는 용도의 태그
            - 시작, 종료 태그 사이에 작성된 문자열의 형식을 
            그대로 출력함
         -->
         <pre>가              나
            다
         </pre>
         <pre>pre 1번           입니다.</pre>
         <pre>pre 2번   입니다.</pre>
         <pre>pre 3번                   
            
            입니다.</pre>

        <hr>
        <h1>글자 관련 기타 태그</h1>
        <b>b 태그</b> : 단순히 글자를 굵게 표시하는 태그
        <br>
        <strong>strong 태그</strong> : 글자를 강조 (웹접근성)
        <!-- 웹 접근성
            일반인 뿐 아니라, 장애인, 고령자를 위해
            웹사이트에서 제공하는 서비스를 모두 이용할 수 있도록 보장하는 것
            (의무사항)
        -->
        <i>i 태그</i> : 단순히 글자를 기울이는 태그<br>
        <em>em 태그</em> : 글자를 기울이는 태그(웹접근성)<br>

        <mark>mark 태그</mark> : 형광펜 효과를 나타내는 태그<br>
        
        <u>u 태그</u> : 밑줄을 긋는 태그<br>
        
        <s>s 태그</s> : 취소선을 긋는 태그<br>
        
        <del>del 태그</del> : 취소선을 긋는 태그<br>

        <small>small 태그</small> : 글자를 작게<br>

        sup 태그(윗첨자) : x<sup>2</sup> <br>
        sub 태그(아랫첨자) : log<sub>10</sub><br>

        abbr(abbreviation 약어) 태그 : 마우스 오버 시 툴팁 : 
        <abbr title="Hyper Text Transfer Protocol">HTTP</abbr>

표 관련 태그

table 태그 
- 웹 문서에서 자료 정리를 위해 주로 사용
- 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 cell이라고 한다.

tr태그
- table row의 약자로 한 행을 의미

td태그
- table data의 약자로 한 컬럼(열)을 의미

th태그
- table header의 약자로 컬럼평 표시 용도의 태그
- 기본적인 성질의 td와 같지만 추가적으로 굵은 글씨, 가운데 정렬

caption태그
- 테이블의 제목이나 설명 내용을 추가하는 태그

thead
- 테이블의 상단 부분

tbody
- 테이블의 하단 부분

tfoot
- 테이블의 하단 부분

colspan 열 병합 (가로 병합)
rowspan 행 병합 (세로 병합)

영역 관련 태그

block 형식

수직 방향의 공간을 가로로 나누어 여러 행을 만드는 것
block 형식은 태그는 자동으로 줄바꿈이 된다. (이걸로 외우면 편하다)
block 태그는 한 줄을 그대로 차지하기 때문에 뒤에 오는 내용은 다음 줄에 작성된다

p/pre(문단 나누기) h1~h6(제목 영역 나누기), hr(수평선) div(영역 나누기)

inline 형식

수평 방향의 공간을 세로로 나누어 여러 열로 만드는 것
- 크기를 지정하는 width, height 속성을 사용할 수 없다.
inline 형식은 한 줄 내에 일정한 칸을 차지하므로, 뒤의 내용은 옆에 붙는다

strong/b (글자를 굵게), em/i (글자 기울이기), mark(형광펜), span(한 줄을 나누는 용도)

iframe 태그

웹 문서에 다른 웹문서를 추가하는 태그.
inline형식이지만 width와 height로 크기 지정 가능

<iframe width="800px" height="1000px" src="주소"></iframe>
<!-- 이와 같이 사용한다 -->

이미지 관련 태그

기본 형식

<img src="이미지 주소"(상대주소와 절대주소 모두 사용 가능)>

alt : 이미지가 출력되지 않는 상황에 이미지에 대한 설명을 해주는 태그

하이퍼 링크 관련 태그

a태그를 이용해서 하이퍼링크를 구현한다
<a href="태그할 주소">링크로이동</a>

<a href="태그할 주소" target="_blank">링크로이동</a>
<!--이 경우 새 창에서 링크로 이동한다.-->

<a href="#train1">Giant Steps</a>
# + 아이디값을 이용해 같은 페이지 내의 태그 위치로 이동 가능하다

. . . . . . . .


<h3 id="train1">Giant Steps</h3>
위의 하이퍼링크를 클릭하면 이 곳으로 이동한다.