처음부터 차근차근

[HTML] 자주 쓰는 HTML 태그</> 종류 본문

Mark Up/HTML

[HTML] 자주 쓰는 HTML 태그</> 종류

HangJu_95 2023. 11. 25. 22:33
728x90

Head 태그 정리

head는 title 웹문서의 제목, CSS의 링크, 파비콘, 그외 meta 데이터(설명, 작성자, 중요한 키워드와 같은 HTML에 대한 내용)을 포함합니다. 그 외 script 파일을 불러오거나 웹폰트 파일을 불러오는 link등이 head 사이에 삽입됩니다.

<meta>

html 문서에 대한 정보가 담겨있습니다. (문자 인코딩 및 문서 키워드, 설명 등)

  • name 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.
  • http-equiv 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.
  • charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.
  • itemprop 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.

<title>

웹 브라우저의 제목 표시줄에 표시되는 내용을 넣어둡니다.

<link>

외부 파일을 연결할 때 사용합니다.

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />

link 요소의 속성들을 살펴보면, 'href'는 해당 css파일의 주소를 적게 됩니다.

'type'과 'rel'에는 각각의 맞게 적어주게 되며, link 요소의 쓰임새가 css파일 연결 외에도 다른 외부요소를 연결하는 데에도 쓰이기 때문에 type 과 rel을 적어줍니다.

 

ex) 
<link href="/style.css" rel="stylesheet" type="text/css" />

rel="stylesheet" 는 연결할 파일이 stylesheet 라는 의미
type="text/css" 는 스타일시트 코드가 텍스트 파일로 된 css 유형이라는 의미

<style>

스타을 정보를 정의할 때 사용하는 태그입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
    .myDiv {
      border: 5px outset red;
      background-color: lightblue;    
      text-align: center;
    }
    </style>
  </head>
  
  <body>
    <div class="myDiv">
      <h2>This is a heading in a div element</h2>
      <p>This is some text in a div element.</p>
    </div>
    <p>This is some text outside the div element.</p>
  </body>
</html>

<script>

자바스크립트 파일을 불러올 수 있으며, 두 가지 방법이 있습니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
	document.write("Hello World !");
</script>

외부에 있는 js를 불러와 사용할 수 있으며, 혹은 <script> 태그 사이에 자바스크립트 코드를 넣어 사용할 수 있습니다.

글자 / 폰트 관련 태그 모음

<hn>

제목을 나타내며, <h1>~<h6>까지 존재합니다. h1이 글자가 가장 크고 h6로 갈 수록 작아집니다.

해당 태그는 해당 내용이 제목이 된다는 "정보"를 주는 것이기 때문에 다른 내용과 구별해서 사용해야 합니다.

<hr>

 긴 가로선 표시

 

<br>

줄 바꿈

<br>태그가 삽입된 위치에서만 줄이 바뀝니다. 주로 p 태그 내에서 줄바꿈을 하고 싶은 경우 넣습니다.

 

<p>

 단락, paragraph

사용하면 내용 앞뒤로 빈 줄이 생기면서 단락이 생깁니다. ( block level 태그)

<p>first paragraph</p><p>second paragraph</p>

<i>

기울임, italic

주로 css에서 처리하는 경향이 있습니다.

<em>

emphasized(중요한, 강조) text를 지정합니다. i tag와 동일하게 italic체로 표현됩니다.

<b>

bold, 진하게묶은 내용들을 굵게 표시합니다.

<strong>

중요한 내용을 강조할 떄 사용하며, 굵게 표시합니다.

<strong><em>과 <i><b>의 차이점은 내용의 강조 차이입니다. 의미 없이 진하게 표시하거나 기울임 꼴로 표현할 떄는 i와 b를 사용하지만, 내용을 강조해야 할 경우 strong, em을 사용하는게 좋습니다.(시각 장애인 사용 시 강조할 수 있음..?)

<strike>, <del>

취소선 텍스트를 의미합니다.

<u>, <ins>

밑줄 텍스트입니다.

<small>

small text를 지정합니다.

<mark>

내용에 하이라이트 text를 지정해줍니다.

<sub>

아래에 쓰인 text를 지정합니다.

<sup>

위에 쓰인 text를 지정합니다.

<pre>

pre 태그 내의 content는 작성된 그대로 브라우저에 표시됩니다.주로 코드 블럭을 표현할 떄 사용됩니다.

<q>

짧은 인용문을 지정합니다. 큰따옴표로 감싸서 보여줍니다.

리스트 태그 모음

<ul>

순서가 없는 list를 의미하며, 글자 앞에 ●같은 불릿이 붙습니다.

<ol>

순서가 있는 list를 의미하며, 숫자나 영문 숫자가 들어갑니다.

 

1. type

1 숫자(default)
a 영어 소문자
A 영어 대문자
i 로마숫자 소문자
I 로마숫자 대문자

 

2. start : 중간부터 시작해야 할 때 이 속성을 사용합니다.

3. reversed: 역순으로 할 때 사용됩니다.

<li>

리스트 안에서 각 항목을 나열할 때 사용합니다.

 

테이블 태그 모음

Tag Description
table 표를 감싸는 태그
tr 표 내부의 행
th 행 내부의 제목 셀
td 행 내부의 일반 셀을 의미한다. 
    <table>
      <caption>
        선물용과 가정용 상품 구성
      </caption>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</th>
        <th>가격</th>
      </tr>
      <tr>
        <td>선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>가정용</td>
        <td>5kg</td>
        <td>18~26과</td>
        <td>50,000원</td>
      </tr>
    </table>

table의 디자인은 CSS를 통해서 변경할 수 있습니다.

링크 태그 모음

<a>

웹 페이지나 외부 사이트와 연결해줍니다.

링크 태그는 text 뿐만 아니라 이미지도 연결이 가능합니다.

<h2><a href="index.html" target="_blank">홈페이지 돌아가기</a></h2>

1. herf : 이동하고자 하는 파일의 위치를 값으로 받습니다.

Value Description
절대 URL 웹 사이트 URL ( http://www.naver.com)
상대 URL 자신의 위치를 기준으로 한 대상의 URL ( html/index.html )
fragment identifier 페이지 내의 특정 id를 갖는 요소에 링크
메일 mailto:
script  href="javascript:alert('hello')"

 

2. target : 새 창 or 새 탭에서 링크를 열 때 사용합니다.

  • _blank : 새로운 탭 or 창
  • _self : 현재 탭 or 창
  • _parent : 현재 화면을 불러낸 부모 탭 or 창, 없으면 현재 탭 or 창
  • _top : 최상위 탭 or 창, 없으면 현재 탭 or 창

3. title : 링크의 툴팁을 표시합니다.

4. id : 같은 페이지 안에서 이동할 때 사용합니다. (fragment identifier를 사용할 때 주로 사용)

5. download

링크가 가리키는 파일을 다운로드 합니다.

미디어 태그 

<img>

이미지를 삽입하는 태그입니다.

반드시 src 속성을 사용해서 이미지의 경로를 지정해줘야 합니다.

이미지를 직접 다운로드 한 뒤, 파일 경로를 삽입하는 방법이나, 다른 웹 페이지의 이미지 주소를 복사해서 삽입하는 방법이 있습니다.

  • width : 너비
  • height : 높이
  • alt : 이미지를 설명해주는 대체 텍스트를 추가 (필수적으로 넣는다)
  • title : 툴팁(설명)
  • usemap : 이미지 맵 (하나의 이미지에 여러 개의 링크를 만드는 것)

<audio>

음악 삽입

  • src : 음악 파일 경로
  • preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정
  • autoplay : 음악 파일을 자동의 재생 개시할 것인지 지정
  • loop : 음악을 반복할 것인지 지정
  • controls : 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.

최신 브라우저에서는 오디오가 자동 재생을 지원하지 않는다.

마찬가지로 크롬, 파이어폭스 브라우저에서는 음소거 해야 비디오를 자동 재생할 수 있다.

<video>

영상 삽입

  • src : 음악 파일 경로
  • preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정
  • autoplay : 음악 파일을 자동의 재생 개시할 것인지 지정
  • loop : 음악을 반복할 것인지 지정
  • controls : 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
  • width : 동영상 너비를 지정
  • height : 동영상의 높이를 지정
  • muted : 비디오의 오디오 출력이 음소거됨을 명시한다.

참조

https://inpa.tistory.com/entry/HTML-%F0%9F%8F%B7%EF%B8%8F-%ED%83%9C%EA%B7%B8-%EC%9A%94%EC%95%BD%ED%91%9C#%3Chead%3E_%ED%83%9C%EA%B7%B8_%EC%A0%95%EB%A6%AC

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

 

'Mark Up > HTML' 카테고리의 다른 글

[HTML] HTML이란?  (0) 2023.11.25
'Mark Up/HTML' Related Articles more