[HTML] 기본 개념 및 주요 태그 정리

나경·2024년 10월 25일
html
0

HTML(HyperText Markup Language)

웹(www)을 위한 하이퍼텍스트 문서 작성 언어이다
첫 줄에 DOCTYPE을 선언하고, 그 이후 줄부터 요소들을 넣는다
파일 확장자는 .htm이나 .html을 사용한다

요소(element)

문서 일부분의 특징을 지정하는 마크업이다
내용(content)과 이를 둘러싼 태그(tag)로 구성되어 있다

<시작태그>내용</닫는태그>

태그(tag)

<시작태그></종료태그>
<h1></h1>
<p></p>
<span></span>

위의 코드에서 <h1>은 시작태그가 되고 </h1>은 닫는 태그가 된다

단독태그

꼭 닫는 태그가 있어야하는 것은 아니다 단독태그도 존재한다

<태그이름 />
<br />
<hr />
<img />

속성

요소에 추가정보를 주기 위해서 사용한다
ex) 모양, 색상, 링크 등

이름="속성값"
이름='속성값'
<a href="test.html" target="blank"></a>

-> 요소의 시작태그에 작성한다
-> 하나의 요소에 여러 개의 속성을 사용할 수 있으며, 이 대 빈칸으로 구분한다

기본 구조

html 파일에서 !를 입력하면 emmet이 나타나서 엔터를 누르면 바로 아래의 구조를 확인할 수 있다

<!DOCTYPE html> // html5로 인식하겠다는 의미
<html> // html이 시작함을 의미
	<head>
    
    </head>
    <body> // 브라우저에서 보여주는 부분
    
    </body>
</html> // html이 끝남을 의미

<title>

문서의 제목을 나타낸다

<title>Document</title>

<meta>

문서 관리를 위한 메타정보를 기록한다

  • 문서 정보
  • 키워드
  • 저장 정보
  • 언어
  • 인코딩 정보

name 속성과 content 속성을 이용한다

<meta name="viewport" content="width=device-width, initial-scale=1.0">

메타데이터 종류의 이름을 속성이름으로 사용한다

<meta charset="UTF-8">

특수문자

<
>
"

위의 특수문자는 이미 역할이 있기 때문에 엔티티코드로 표현해야 화면에 나타낼 수 있다

공백<>"&
&nbsp;&lt;&gt;&quot;&amp;

주석

<!-- 주석은 여기에 작성합니다 -->

텍스트 관련 태그

<h1> ~ <h6>

제목을 나타낸다
<h1>이 제일 크기가 크고 h뒤에 오는 숫자가 작아질수록 폰트 사이즈가 작아진다

<p>

문단을 나타내서 줄간격을 띄운다

<br>

문단 내에서 줄을 바꾸고 싶을 때 사용한다
단독 태그이다

<hr>

문단이나 내용 사이에 구분을 확실히 하고자 할 때 사용한다
사용하면 가로선이 생긴다

<p>
    안녕하세요
    <hr>
    반갑습니다
</p>

<pre>

화면에 입력한 상태 그대로 보이고자 할 때 사용한다

<pre>
    안녕하세요
        반갑습니다
    파       이     팅       !!
</pre>

실행하면 내가 쓴 상태 그대로 화면에 나타나는 것을 확인할 수 있다
원래 같았으면 아래처럼 출력되는 것이 일반적이다

<p>
    안녕하세요
        반갑습니다
    파       이     팅       !!
</p>

확실히 <p> 태그를 사용했을 때와는 다르게 나타난다

<blockquote>

다른 글의 내용을 단락 단위로 인용하여 포함할 때 들여쓰기로 구분해서 나타낸다

<p>안녕하세요</p>
<p>반갑습니다</p>

<blockquote>
    <p>안녕하세요</p>
    <p>반갑습니다</p>
</blockquote>

<em>

텍스트를 기울여 표시해서 강조한다

<em>안녕하세요</em>

<strong>

<strong>안녕하세요</strong>

<small>

조금 작은 폰트 사이즈로 나타낸다

<p>안녕하세요</p>
<small>안녕하세요</small>

<p>와 비교했을 때 <small>폰트 사이즈가 더 작은 것을 알 수 있다

<mark>

텍스트를 너 눈에 띄게 하기 위해 형광펜 표시를 한다

<p>
    <mark>안녕</mark>하세요
</p>

<sub> <sup>

첨자를 나타낸다
<sub> 는 아래첨자이고 <sup>는 위첨자이다

<sub>안녕하세요</sub>
<sup>안녕하세요</sup>

목록 관련 태그

<ul>

=Unordered List
순서 없는 목록을 나타낼 때 사용한다
나열된 항목에는 하위 요소인 <li>를 사용한다

<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ul>

<ol>

=Ordered List
순서 있는 목록을 나타낼 때 사용한다
나열된 항목에는 하위 요소인 <li>를 사용한다
각 항목 앞에는 순서를 나타내는 숫자나 기호가 나타난다

<ol>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>

type="1"

type을 따로 지정하지 않으면 type="1"이 default값으로 사용된다

<ol type="1">
    <li>안녕하세요</li>
    <li>반갑습니다</li>
</ol>

type="A"

<ol type="A">
    <li>안녕하세요</li>
    <li>반갑습니다</li>
</ol>

type="a"

<ol type="a">
    <li>안녕하세요</li>
    <li>반갑습니다</li>
</ol>

type="I"

<ol type="I">
    <li>안녕하세요</li>
    <li>반갑습니다</li>
</ol>

type="i"

<ol type="i">
    <li>안녕하세요</li>
    <li>반갑습니다</li>
</ol>

표 관련 태그

<table>

<table> 안에 <tr>, <td>, <th>를 넣어서 표를 구성한다

<tr>

하나의 행을 의미한다

<td>

각 셀의 데이터를 의미한다

<th>

중앙에 굵은 글씨로 제목을 나타낸다

위의 태그들을 이용해서 표를 만들어보겠다

<table border="1">
    <tr>
        <th>영화 제목</th>
        <th>평점</th>
    </tr>
    <tr>
        <td>타이타닉</td>
        <td>5.0</td>
    </tr>
    <tr>
        <td>클래식</td>
        <td>5.0</td>
    </tr>
    <tr>
        <td>비긴어게인</td>
        <td>4.9</td>
    </tr>
</table>

표의 구조적 표현

표의 셀을 rowspan과 colspan 속성을 사용해서 합칠 수 있다
이 속성은 셀을 병합하는 기능이기 때문에 <td>에 사용하면 된다

rowspan

위아래 줄의 셀을 병합한다

<table border="1">
    <tr>
        <td rowspan="4">
            보고싶은 영화
        </td>
    </tr>
    <tr>
        <td>위플래쉬</td>
    </tr>
    <tr>
        <td>시네마 천국</td>
    </tr>
    <tr>
        <td>내 머리 속의 지우개</td>
    </tr>
</table>

colspan

옆 칸의 셀을 병합한다

<table border="1">
    <tr>
        <td colspan="3">보고싶은 영화</td>
    </tr>
    <tr>
        <td>위플래쉬</td>
        <td>시네마 천국</td>
        <td>내 머리 속의 지우개</td>
    </tr>
</table>

<caption>

표의 제목을 설정할 수 있다

<thead>

표의 머리줄을 나타낸다

<tbody>

표의 몸체를 나타낸다
여러 번 사용할 수 있다

<tfoot>

표의 꼬리줄을 나타낸다

위의 태그들을 종합적으로 사용해보면 아래처럼 사용할 수 있다

<table border="1">
    <caption>보고싶은 영화</caption>
    <thead>
        <tr>
            <th>카테고리</th>
            <th>제목</th>
            <th>평점</th>
            <th>장르</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3">영화</td>
            <td>타이타닉</td>
            <td>9.69</td>
            <td rowspan="2">로맨스</td>
        </tr>
        <tr>
            <td>내 머리 속의 지우개</td>
            <td>9.09</td>
        </tr>
        <tr>
            <td>위플래쉬</td>
            <td>8.88</td>
            <td>드라마</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>기대평</td>
            <td colspan="3">얼른 보고싶다!</td>
        </tr>
    </tfoot>
</table>

문서 구조화

최근에 검색엔진이나 반응형 레이아웃의 사용 빈도가 증가했다 사람은 화면에서 보이는 문단의 글자 크기, 모양, 색상 등으로 내용을 구분하지만 기계는 문단의 의미를 정확히 지정해야 파악이 가능하다

여기서 알아야 할 점은 의미적인 구분만 할 분 모양은 구분하지 않는다는 점이다

웹문서에서 머리말 영역이다

다른 웹문서나 문서 내의 다른 부분을 이동하는 링크를 포함하는 탐색 메뉴이다

<article>

웹문서에서 주요 내용을 가진 독립된 본문을 나타낼 때 사용한다
여러 개의 <arricle>에 별도의 제목, header, footer 등을 넣을 수도 있다

<section>

문서 내에서 의미가 비슷한 섹션들을 그룹화한다

<aside>

본문의 내용과 구별되는 별개의 정보를 표현한다

웹문서의 꼬리말에 해당한다
저자 정보, 저작권 정보, 이용조건, 관련 링크 등이 포함한다

profile
나경
이전 포스트

[백준/c++] 14241: 슬라임 합치기

다음 포스트

[컴퓨터비전] data acqusition with camera lens

0개의 댓글