망각에 재주 있는 나를 위해 기록하는 곳.

[HTML] html tag 정리 본문

HTML, CSS

[HTML] html tag 정리

baobabtree 2021. 7. 13. 23:32

<!-- -->

: 주석(comment)

소스의 설명이나 이해를 돕기 위해 삽입한다. 물론 브라우저에 나타나지 않는다.

<!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas architecto expedita 
laudantium modi possimus magni molestias officia harum, tempore placeat optio quidem adipisci, 
reiciendis est dolorum quaerat, at nihil dolores? -->

 

<a>

: 다른 페이지를 연결할 때 쓰는 하이퍼링크를 정의한다.

href는 이 태그의 가장 중요한 속성이다.

<a href="http://www.google.com" title="google"> 구글로 페이지 이동 </a>

페이지를 이동하는 링크가 걸린다.

<p>

: 문단을 정의하는 태그.

문단과 문단 사이에 약간의 공백이 들어가 문단의 구분을 확실히 지어줌.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
    Magni eveniet deleniti consectetur aut nisi harum praesentium dolorum ullam at, eos, ducimus et.  <br>
    Sit asperiores, consequuntur totam quod perferendis rerum molestiae.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
   Repellat sed vitae dignissimos quibusdam, atque harum at alias quia ab. <br>
   Necessitatibus quidem, rem repellendus eum hic recusandae. <br>
   Alias quibusdam ducimus accusantium.</p>

각 문단 사이에 약간의 공백이 생겨짐.

 

<br>

: 줄을 바꿀 때 사용한다.

html에서 엔터키로 줄을 바꿔도 웹페이지에서는 나타나지 않는다.

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? Consequatur!</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br>
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? Consequatur!</p>

 

위 둘의 결과는 다르다.

 

<html>

: html 태그는 doctype을 제외한 해당 문서가 html임을 알려주는 역할을 한다.

 

 

 

<head>

: 해당 html의 대한 정보인 메타 데이터를 정의한다.

정의에 사용되는 요소 <title>, <style>, <base>, <link>, <meta>, <script>, <noscript>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

 

 

 

<body>

: 해당 html의 본문을 정의한다. html에 하나만 존재할 수 있다.

 

 

<h1> ~ <h6>

: html의 제목을 정의할 때 사용한다. <h1>이 글자가 가장 크고 <h6>가 가장 작다.

    <h1>안녕하세요1</h1>
    <h2>안녕하세요2</h2>
    <h3>안녕하세요3</h3>
    <h4>안녕하세요4</h4>
    <h5>안녕하세요5</h5>
    <h6>안녕하세요6</h6>

 

<ul>, <ol>

: <ul>은 unordered list로 정렬되지 않은 목록을 정의한다.

<ol>은 ordered list로 정렬된 목록을 정의한다.

 

 

<li>

: <li>은 각 <ul>과 <ol>의 리스트들의 아이템을 정의한다.

    <ul>    순서가 없는 <!-- list(unordered list) -->
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
        <li>목록4</li>
    </ul>

   <ol>     순서가 있는 <!-- list(ordered list) -->
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <li>list4</li>
    </ol>

 

 

<hr>

: 수평 가로선이다. 주제가 바뀌거나 내용을 구분 지을 때 사용한다.

    <ol>
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
    </ol>
    
    <hr>
    
    <ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>

 

<mark>

: 형광팬처럼 지정된 부분을 강조한다. 하이라이팅(highlighting) 효과.

<p>Lorem ipsum dolor sit, <mark> amet consectetur adipisicing elit. </mark>
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? Consequatur!</p>

 

<s>

: 텍스트 가운데에 라인을 그어 올바르지 않은 텍스트임을 표시.

<del>과 비슷하게 표현되나 의미가 다름.

<p>Lorem ipsum dolor sit, <s>amet consectetur adipisicing elit.</s> <br>
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? Consequatur!</p>

 

<del>

: 텍스트 가운데에 라인을 그어 문서에서 삭제된 텍스트를 표현함.

<p>Lorem ipsum dolor sit, <del>amet consectetur adipisicing elit. </del><br>
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? Consequatur!</p>

 

<ins>

: 텍스트 아래쪽에 라인이 그어져 새로 추가된 텍스트임을 표현함.

<del>과 같이 쓰여 수정되거나 업데이트되는 내용에 사용한다.

<p>Lorem ipsum dolor sit, <del>amet consectetur</del><ins> adipisicing elit.</ins> <br>
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? Consequatur!</p>

 

<strong>

: 텍스트를 굵게 표시하는데 중요성이 담긴 강조이다.

<p>Lorem ipsum dolor sit, <strong>amet consectetur</strong> adipisicing elit. <br>
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? Consequatur!</p>

 

 

<em>

: 텍스트의 글꼴을 기울여서 이탤릭체로 강조한다. 텍스트 중간에 구어적인 표현같이 문장의 의미가 변할 때 사용한다.

<p>Lorem ipsum dolor sit, amet consectetur <em> adipisicing elit. </em><br>
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? Consequatur!</p>

 

<i>

: <em>과 같은 효과이지만 단순히 효과만 주는 경우에 쓴다.

<p>Lorem ipsum dolor sit, amet consectetur <i> adipisicing elit. </i><br>
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? Consequatur!</p>

<b>

: 단순히 텍스트를 굵게 표시한다.

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br>
    amet qui alias commodi magnam harum, aliquam repudiandae mollitia cum? <b> Consequatur! </b></p>

 

 

 

'HTML, CSS' 카테고리의 다른 글

[HTML] 태그(tag) 여러개 한번에 쓰기 / Emmet Abbreviation  (0) 2021.07.16
[HTML] 시맨틱 태그 (& html tag 정리2)  (0) 2021.07.15
'HTML, CSS' Related Articles more