Kim Youngjae

Publisher and Developer

안녕하세요. Kim.YJ 입니다.

이번 포스팅은 이전 포스팅 에 이어서,
Tag 부분을 더 상세히 설명드리는 포스팅 이어가겠습니다.

많은 Tag들이 쓰이고 있지만,
대부분 많이 쓰이고 자주 쓰이는 Tag를 설명 드리겠습니다.

천천히 하나씩 알아보겠습니다.

[ Tag 모음 ]

자주쓰이는 Tag 통계에 맞춰 추가 설명을 하겠습니다.
아래 통계 이미지의 내용이 정리 안된 부분은,
이전 포스팅에서 확인할 수 있으니 이전 포스팅 을 참고해 주세요

https://images.velog.io/images/kyj0206/post/6cc2f226-f43b-4e02-a0b0-900aebce14a9/1111.png [ 출처 : Web Ranking ]

1. < link >

외부 스타일 시트 - 웹사이트의 전체 Css를 하나의 파일에서 변경할 수 있습니다.
유지보수가 편하고 안정적인 방식입니다.

<link rel="stylesheet" href="외부 파일 경로" type="text/css" />

rel=”stylesheet” 속성은 연결 파일이 stylesheet라는 것을 명시 합니다.

href=”외부 파일 경로” 속성은 연결 파일의 경로를 명시합니다.

< ink > 태그의 type 속성은 링크된 외부 리소스의 미디어 타입을 명시합니다.
이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다.

2. < style >

내부 스타일 시트 - Html문서 내 <head></head> 태그 사이에 태그를 사용하여,
Css스타일을 적용해 줍니다.

해당 html문서만 Css스타일을 적용 합니다.

<head>
  <style>
    html {
      font-size: 16px;
    }
    body {
      padding: 10px;
    }
  </style>
</head>

3. < script >

html 과 코드를 연결 해주는 태그 입니다.
일반적으로 javascript를 연결해 줄때 사용합니다.

기본적으로 < head >< /head >안에 위치하며,
< body >< /body >태그 안에 넣을 수도 있습니다.
< body >< /body >태그안에서 아래부분에 넣는 경우는 페이지 로딩(표시)을 빠르게 하기 위한 경우에 사용합니다.

보통, 페이지 로딩 후에 필요한 스크립트들을 body태그 안 최하위에 위치 시킵니다.

< script > 태그의 사용법은 위에 언급한 CSS의 태그들과 같이
크게 두가지 방법이 있습니다.

3-1) 기본

내부 스크립트

<script>
  document.getElementById("name").innerHTML = "Kim.YJ";
</script>
3-2) 파일 불러오는 방식

외부 스크립트

<script src="nameScript.js"></script>

or

<script src="nameScript.js" type="text/javascript"></script>

( nameScript )

document.getElementById("name").innerHTML = "Kim.YJ";

4. < div >

< div >< /div > 태그는 Division의 약자로 웹사이트의 레이아웃을 만들때 주로 사용합니다.

태그 자체의 의미는 없고 목적에 따라 컨텐츠를 묶어줄 때 사용합니다.
일반적으로 block태그의 태표적인 예 입니다.
자세한 설명은 이전 포스팅 을 참고 해주세요

<div>content1</div>
<div>content2</div>

5. < span >

< span >< /span > 태그는 < di v>< /div > 태그와 마찬가지로 별도의 기능을 갖고있지 않고, CSS와 함께 쓰입니다.

일반적으로 inline태그의 대표적인 예입니다.
자세한 설명은 이전 포스팅 을 참고 해주세요

<span style="background-color:red">content1</span>
<span style="background-color:blue">content2</span>
<span style="background-color:green">content3</span>

6. < a >

< a >< /a > 태그는 하이퍼링크를 걸어주는 태그입니다.

6-1) 속성
  • href : 클릭시 이동 할 link
  • target : link를 여는 방법
    • _self: 현재 페이지 (기본값)
    • _blank: 새 탭
    • _parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
    • _top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
    • 프레임이름: 직접 프레임이름을 명시해서 사용할 수도 있습니다.
<a href="https://kyj0206.github.io/KYJ0206.Git_BLog/" target="_blank"
  >My_Blog</a
>

7. < p >

< p >< /p > 태그는 문단(paragraph)을 정의할 때 사용합니다.

브라우저는 자동으로 < p > 요소의 위쪽과 아래쪽에 약간의 여백을 추가합니다.
이러한 여백은 CSS의 margin 속성을 사용하여 조정할 수 있습니다.

<p>문단1</p>

8. < img >

< img > 태그는 HTML 문서에서 이미지(image)를 정의할 때 사용합니다.

< img > 요소로 정의된 이미지는 HTML 문서에 이미지가 링크되는 형태입니다.
즉, < img > 요소는 이렇게 참조된 이미지를 위한 일종의 수용 공간을 만들어 주는 것입니다.

< img > 요소에는 src 속성과 alt 속성을 반드시 명시해야만 합니다.

<img
  src="https://images.velog.io/images/kyj0206/post/b7e57348-4e54-4b54-8c14-42441e6b2b27/my_profile.png"
  alt="블로그이미지"
/>

실제 출력시 아래 이미지와 같이 보여집니다.

https://images.velog.io/images/kyj0206/post/8d906b34-cc5d-4099-875e-2bcf4fe84834/my_profile.png

9. < ul >

순서 없는 목록 - ul

순서 없는 목록(Unordered List)은 번호 대신 점이나 사각형 등의 도형이 목록 앞에 붙습니다. 순서 없는 목록은 ul로, 목록의 내용은 li로 만듭니다.

<ul>
  순서가 없는 목록
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ul>

10. < ol >

순서 있는 목록 - ol

순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록입니다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만듭니다.

<ol>
  순서가 있는 목록
  <li>첫번째</li>
  <li>두번째</li>
  <li>세번째</li>
</ol>

11. < li >

< li >< /li > 태그는 list의 약자로, 목록을 만드는 태그입니다.
이 태그는 단독으로 쓰이지 않으며 < ul >< /ul > 혹은 < ol >< /ol > 태그 내부에 들어갑니다.

<ol>
  <li>목록1</li>
  <li>목록2</li>
</ol>

or

<ul>
  <li>목록1</li>
  <li>목록2</li>
</ul>

12. < dl >

< dl >< /dl > 은 Definition List 의 약자로 용어 정의할 때 사용합니다.
내부에 2개의 태그를 포함해서 사용하게 되는데 < dt > 와 < dd > 가 있습니다.
< dt > 는 Definition Title 약자로 제목을 나타내고
< dd > 는 Definition Data 로 용어의 설명이 위치하게 됩니다.

용어를 정의할 때 사용하는 < dl > 은 < dt >, < dd > 와 함께 아래와 형식과 같이 사용하게 됩니다.
< dt > 는 없어도 되지만 설명하는 부분은 < dd > 태그 안에 들어가야 합니다.

<dl>
  <dt>용어의 제목</dt>
  <dd>용어의 설명</dd>
</dl>

13. < br >

기본적으로 HTML은 가독성을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않습니다.

줄 바꿈을 하려면 직접 줄 바꿈을 한다는 명령어를 주어야 하며,
HTML에서는 < br >를 통하여 줄바꿈을 합니다.

첫번째 문단<br />두번째 문단

14. < h1 > ~ < h6 >

< h1 > ~ < h6 > 태그는 ‘Heading’의 의미를 가지며,
일반적으로 문서의 제목을 표시 할때 사용을 합니다.
제목 크기별로 < h1 > 부터 < h6 > 까지 사용이 됩니다.

< h1 > 이 가장 최상위 계층의 제목을 표시하며,
< h6 >가 가장 최하위 계층의 제목을 표시할 때 사용됩니다.

<h1>제목 1 입니다.</h1>
<h2>제목 2 입니다.</h2>
<h3>제목 3 입니다.</h3>
<h4>제목 4 입니다.</h4>
<h5>제목 5 입니다.</h5>
<h6>제목 6 입니다.</h6>

15. < form >

< form > 태그는 웹 페이지에서의 입력 양식을 의미합니다.
로그인 창이나, 회원가입 폼 등이 있습니다.

텍스트 필드에 글자를 입력하거나,
체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다.

실제로 백엔드 코드와 함께 < form >을 사용하기 위해서는 다음 속성들이 사용됩니다.

  • name: 폼의 이름
  • action: 폼 데이터가 전송되는 백엔드 url
  • method: 폼 전송 방식 (GET / POST)
<form
  name="폼 태그 이름"
  action="데이터를 보낼 주소"
  method="데이터 전송 방식"
></form>

< form > 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다.
실제로 사용자가 양식을 입력하기 위한 태그는 < input > 태그 등이 사용됩니다.

< input > 태그는의 설명은 아래 설명을 확인해 주세요.

16. < input >

Input 태그는 입력 형식을 구현하기 위한 태그입니다.
type 유형에 따라 다양하게 화면에 표시할 수 있습니다.

" <button input type="유형" id="id값" [ 속성="속성 값" ]>"</button>

type 은 input 태그를 입력할 때 필수적인 속성입니다.

type 값에 따라 input 태그는 다양한 기능과 모습으로 화면에 구현됩니다.

type 내용
text 텍스트 입력창 생성
password 비밀번호 입력창 생성
radio 라디오 버튼 생성
checkbox 체크박스 생성
file 파일이름 입력창 생성
image 이미지 전송 버튼 생성
hidden 사용자에게 보이지는 않지만 서버로 전송
submit 서버로 제출/전송하는 버튼 생성
button 일반 버튼 생성


위에 표기된 Type외에 HTML5 에는 더 다양한 < input > 종류가 있습니다.
위에 표기된 표에는 가장 자주 쓰이는 type을 표기 하였습니다.

다른 type은 추후에 상세 포스팅으로 설명드리겠습니다.

17. < iframe >

iframe은 Frame의 일종입니다.

Frame은 브라우저 창을 여러 세그먼트로 분할해 서로 다른 여러 페이지들을 한 페이지에서 표현할 수 있다고 명시되어 있습니다.

하지만 Frame 은 여러 이유로 W3C 에서 사용하지 않게 권고 하였고,
이후 Frame 구조로 된 웹 사이트는 점점 줄어들게 되면서, HTML5 규격에서는 제외 되었습니다.

하지만 아직 Frame 구조로 된 웹 사이트들이 남아있기 때문에 호환성을 위해
일부 브라우저에는 < iframe > 태그로 지원 하고 있습니다.

< iframe > 태그는 inline frame 의 줄임말이며, 페이지에 Frame 을 넣을 때 사용합니다.

iframe은 여러 속성을 가지고 있습니다.

attribute 내용
name iframe 이름
src 페이지 경로
srcdoc html 을 직접 삽입
width/height 프레임 크기
allow fullscreen/payment API 등에 대한 액세스 허용 여부
referrerpolicy iframe을 가져올 때 보낼 리퍼러 정보를 지정
sandbox 보안을 위해 iframe 에서 form 이나 자바스크립트 실행 제한 
<iframe
  src="./sub.html"
  name="프레임 이름"
  width="500px"
  height="500px"
  sandbox="allow-scripts allow-popups"
>
  iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공
</iframe>


태그의 간단한 설명의 포스팅이므로, 기본적 설명만 포스팅으로 진행하겠습니다.
< iframe > 태그의 추가 설명은, 차후 따로 상세 포스팅으로 진행해 드리겠습니다.

18. < nav >

< nav > 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는
네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.

< nav > 요소를 사용하는 일반적으로는 메뉴, 목차, 인덱스 등이 있습니다.

<nav>
  <a href="/html/intro">HTML</a>
  <a href="/css/intro">CSS</a>
  <a href="/javascript/intro">JavaScript</a>
</nav>

19. < strong >

< strong > 태그는 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용합니다. < strong > 태그는 일반적으로 콘텐츠를 굵은 텍스트로 표현됩니다.

19-1) < b > 태그와의 차이점

< b > 태그는 콘텐츠의 중요성보다는 텍스트 자체의 굵어짐 사용
< strong > 태그는 콘텐츠 자체의 중요성을 강조할 때 사용

19-2) < em > 태그와의 차이점

< em > 태그는 구어체 강조와 같이 문장의 의미를 변경하는데 사용
< strong > 요소는 문장의 일부분에 중요성을 추가하는데 사용

<p>나는 <strong>자랑스런 대한민국</strong> 국민이다!</p>

20. < button >

< button > 태그는 클릭할 수 있는 버튼을 정의할 때 사용합니다.

< button > 태그의 type에는 3가지 값을 지정해 줄 수 있습니다.

  • submit
  • reset
  • button

브라우저 호환성을 위해 명시하여야 할 부분을 정리해 드리겠습니다.

  1. < button > 태그의 type 속성을 항상 지정해 줍니다.
    IE(=익스플로러) 경우 기본 타입이 button 이지만,
    타 브라우저 경우 기본 타입이 submit 이기 때문입니다.

  2. < form > 태그 안에서 버튼 만들 땐,
    반드시 < input > 태그 이용해 버튼 만들어야 합니다.
    타 브라우저가 < button > 태그의 속성값을 전송하는 반면에,
    IE는 시작태그와 종료태그 사이의 텍스트나 이미지를 전송합니다.

<button 속성="속성값">텍스트 or 이미지</button>
20-1) < button > 태그와 < input > 태그의 차이

< input > 태그는 종료태그 없이 type 속성 이용해 버튼에 글자나 이미지를 넣어줍니다.

< input type="image"
src="https://images.velog.io/images/kyj0206/post/947a3102-cc60-45d1-b197-b28518b30a29/football-g26aef2ee8_640.png"
> 이미지만 표시됨.


< button > 태그는 시작태그와 종료태그 사이에 글자나 이미지를 넣어줍니다.

< button type="submit><img
  src="https://images.velog.io/images/kyj0206/post/947a3102-cc60-45d1-b197-b28518b30a29/football-g26aef2ee8_640.png"
/>< /button > 이미지 주위에 사각형 테두리와 배경색이 지정됨. button 태그 자체
패딩도 추가됨.

21. < aside >

< aside >태그는 본문 영역의 옆에 문서의 주요 내용과 간접적으로만 연관된 부분을 나타내는 태그입니다.
본문의 옆에 주로 사이드바 혹은 콜아웃 박스로 표현할때 사용합니다.

<aside>내용</aside>

[ semantic Tag ]

시멘틱 태그는 “의미가 있는 태그”라는 뜻입니다.
즉, HTML tag들 중에서도 나름의 의미가 있는 태그들을 말합니다.

Semantic Tag 중요점 3가지

1. SEO ( Search engine optimization )

검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 태그를 잘 활용한다면,
특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출될 수 있습니다.
다시 말해서, 브라우져의 검색 엔진이 내가 만든 웹사이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수 있습니다.

2. 웹 접근성

웹페이지를 시각적이 아니라, 음성으로 읽어주는 “스크린리더”를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹사이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹사이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있습니다.

3. 유지보수성

단순히, div tag로만 모든 구조를 만드는 것보다 시멘틱 태그를 활용하여 만들면 더 한 눈에 알아볼 수 있고,
다른 개발자들이 코드를 유지보수하기가 더 편해집니다.

시멘틱 태그 목록

tag 내용
< article > 내용을 정의
< aside > 페이지 콘텐츠를 제외한 콘텐츠를 정의
< details > 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의
< figcaption > < figure > 요소에 대한 캡션을 정의
< figure > 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정
< header > 문서나 섹션의 머릿글을 지정
< footer > 문서 또는 섹션의 바닥글을 지정
< main > 문서의 주요 내용을 지정
< mark > 강조표시된 텍스트를 정의
< nav > 네비게이션 링크를 정의한다
< section > < header >, < footer >와 함께 문서의 구역을 정의
< summary > < details > 요소를 위한 눈에 보이는 제목을 정의
< time > 날짜/시간을 정의
< hn > 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용한 태그
< hgroup > 의미는 없지만 제목과 부제목을 묶는 용도의 태그
< address > 웹페이지 피드백을 위한 이메일주소 등의 연락처주소를 넣기 위한 태그

[ 주석 ]

소스 코드가 뭐에 관련된 내용인지 설명할 때 사용하거나,
특정 소스를 브라우저에 실행시켜 보이고 싶지 않을 때 사용 합니다.

HTML 주석 구문
<!-- 주석내용 -->

script 태그 안 주석 구문
<!--주석 내용//-->



지금까지 HTML의 Tag 모음을 포스팅 하였습니다.

도움이 되는 포스팅이었길 바랍니다.

다음 포스팅은 더 유익한 정보로 찾아뵙겠습니다.
감사합니다!

태그: ,

카테고리:

업데이트:

참고