2021-01-08 게시 됨2021-01-10 업데이트 됨HTML/CSS8분안에 읽기 (약 1206 단어)

[HTML/CSS] 02. HTML 태그

본 내용은 필자가 부스트코스 웹UI 개발 코스를 수강 후 공부하기 위해 정리한 것임을 알려드립니다.

HTML 태그

Heading 태그(제목 태그)

문서 내의 제목을 표현할 때 사용.
<h>로 시작.
h1 ~ h6까지 존재한다.
숫자가 낮을수록 더 큰 제목으로 사용한다.
숫자가 올라갈수록 더 낮은 수준의 소제목으로 사용됨.

단락 태그

Paragraph 태그로 줄여서 <p>라고 쓴다.
쓰는 경우 자연스럽게 개행이 가능.
글의 단락을 나타냄.

개행 태그

Linebreak, 줄여서 <br> 태그라고 한다.
글의 개행을 나타냄.
<p>태그에서 강제로 개행을 해주려면 <br>태그를 사용해야만 함.

텍스트 관련 태그

`<b>` 태그

볼드 태그로 글자를 굵게 표현

`<i>` 태그

글자를 이탤릭체로 표현

`<u>` 태그

글자의 언더라인(밑줄)을 그려줌.

`<s>` 태그

글자에 중간선을 표현한다.

앵커 태그

링크를 생성하는 태그
HTML에 가장 큰 특징이 되는 태그
<a> 태그로 명시
링크를 만들기 위한 하나의 속성을 필수로 가져야 한다.
- href 속성
- 하이퍼 레퍼런스라고 불림.
- 링크의 목적지인 url이 들어간다.
  1
  <a href="https://www.naver.com">네이버</a>
  target 속성
링크된 리소스를 어디에 표시할지 나타내는 속성이다.
속성 값으로는 -self, _blank, _top이 있다.
_self는 현재 화면에 표시한다는 의미. 타겟 속성의 default값이기도 하다.
_blank는 새로운 창에 외부 페이지가 나타나게 하는 속성이다.
- 새로운 탭에 url 열기와 같은 기능.

내부 링크

<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 때 사용하는 태그.
속성 값에 #를 쓰고 페이지에서 이동하고자 하는 요소 id값을 넣으면 된다.
1
<a href="#some-element-id">자기소개 페이지로 이동</a>

의미가 없는 태그 요소

단순하게 요소들을 묶기 위한 태그
스타일을 주거나, 서버에서 보내는 데이터를 담기위한 용도로 사용.
의미는 없지만 사용빈도는 엄청 높다.

division 요소

<div>
블록 레벨 태그

span 요소

<span>
인라인 레벨 태그

리스트 요소 태그

`<ul>` 태그

ul : unordered list, 순서가 없는 리스트를 표현

<ul>
    <li>아이언맨</li>
    <li>캡틴 아메리카</li>
    <li>토르 오딘슨</li>
</ul>

각 항목을 나타내는 태그는 <li> 태그로 나타낸다.

`<ol>` 태그

ol : ordered list, 순서가 있는 리스트 표현.

<ol>
    <li>아이언맨1</li>
    <li>캡틴 아메리카: 퍼스트 어벤져</li>
    <li>토르 천둥의 신</li>
</ol>

`<dl>` 태그

<dl>(definition/description list) 태그로 용어 설명 리스트 구현.
용어와 그에 대한 정의를 표현.
<dt, <dd> 태그를 이용하여 항목을 나타냄
- <dt> : 용어
- <dd> : 용어에 대한 설명

이미지 요소 태그

1	<img src="./images/pizza.png" alt="피자">

이미지 경로를 알려주기 위한 src 필수 속성.
이미지의 대체 텍스트를 입력하기 위한 alt 속성.
- 웹 접근성을 위해 필요한 필수 속성 중 하나. (스크린 리더기)
width/height 속성 : optional한 속성. 이미지의 크기가 고정적이라면 너비, 높이 속성을 써주는 것이 성능적인 측면에서 좋다.

src 속성

상대경로 : 현재 웹 문서의 페이지를 기준으로 상대적으로 이미지의 위치를 나타낸다.
- 같은 이미지를 삽입하더라도 불러오는 이미지의 위치에 따라 이미지가 달라질 수 있다.
절대경로 : 실제 그 이미지가 위치해있는 곳의 전체 경로.
- 어느 페이지에서 불러오더라도 항상 같은 주소를 가지게 된다.
gif : 256색으로 제한적이지만 용량이 작고, 애니메이션과 투명 이미지가 가능
jpg : 높은 압축률과 자연스러운 색상 표현 가능
png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

테이블 태그

표는 셀로 이루어져 있다.
표의 행(row)과 열(column)
테이블 요소를 표현하는 방법은, 먼저 <table> 태그로 감싸준 후 시작한다.
테이블 구성 시, 위에서 밑으로, 왼쪽에서 오른쪽으로 그려준다고 생각하고 작성한다.
<table> : 표를 나타내는 태그. <table>은 하나 이상의 <tr>로 이루어져 있다.
<tr> : table-row를 나타내는 태그 (행). <tr>은 하나 이상의 <th>, <td>로 이루어져 있다.
<th> : 제목 셀을 나타내는 태그
<td> : 셀을 나타내는 태그

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>Table</title>
        <style>
            <!--th와 td 태그에 테두리 그리기-->
            th,td {border: 1px solid;}
        </style>
    </head>
    <body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </table>            
    </body>
</html>

[HTML/CSS] 02. HTML 태그

https://msj0319.github.io/2021/01/08/HTML-CSS-02-HTML-태그/

Author

MoonDoni

Posted on

2021-01-08

Updated on

2021-01-10

Licensed under

[HTML/CSS] 02. HTML 태그

HTML 태그

Heading 태그(제목 태그)

단락 태그

개행 태그

텍스트 관련 태그

`<b>` 태그

`<i>` 태그

`<u>` 태그

`<s>` 태그

앵커 태그

target 속성

내부 링크

의미가 없는 태그 요소

division 요소

span 요소

리스트 요소 태그

`<ul>` 태그

`<ol>` 태그

`<dl>` 태그

이미지 요소 태그

src 속성

테이블 태그

Author

Posted on

Updated on

Licensed under

댓글

링크

업데이트 소식 받기

광고

카테고리

최근 글

아카이브

태그

[HTML/CSS] 02. HTML 태그

HTML 태그

Heading 태그(제목 태그)

단락 태그

개행 태그

텍스트 관련 태그

<b> 태그

<i> 태그

<u> 태그

<s> 태그

앵커 태그

target 속성

내부 링크

의미가 없는 태그 요소

division 요소

span 요소

리스트 요소 태그

<ul> 태그

<ol> 태그

<dl> 태그

이미지 요소 태그

src 속성

테이블 태그

Author

Posted on

Updated on

Licensed under

댓글

링크

업데이트 소식 받기

광고

카테고리

최근 글

아카이브

태그

`<b>` 태그

`<i>` 태그

`<u>` 태그

`<s>` 태그

`<ul>` 태그

`<ol>` 태그

`<dl>` 태그