Ch.Covelope

HTML 태그(tag) 본문

HTML

HTML 태그(tag)

Chrysans 2021. 10. 7. 18:22
728x90
반응형

 

 

 

HTML - tag

 

 

 

 

오늘은 현재 통계적으로 많이 사용되는 태그들을 보고 알아보는 시간을 가져볼까 합니다.

 

 

현재 사용되는 HTML 태그들 중에서 사용 빈도가 많은 순서대로 정리되어 보여주는 표입니다. (웹 통계)

 

 

 

https://www.advancedwebranking.com/html/#doctype

 

 

 

 

 

 

<!DOCTYPE html>

마크업 언어용 DTD 태그.

 

 

문서에 맨 첫줄에 작성하여 브라우저에게 해당 문서가 HTML 문서임을 알린다.

<html>태그와 같이 한번만 사용되며 모든 태그를 감싸는 <html> 태그 위에 작성한다.

 

 

 

1. <html>

 

HTML을 작성할때 기본적으로 작성해줘야 하는 필수 태그로써

해당 문서의 최상위 레벨이기 때문에 루트 요소라고도 한다. 

<html> 태그는 DTD를 제외한 모든 태그 전체를 감싸는 태그이다.

 

 

<html> --시작
  <head> 
    <meta> 
  </head> 
  <body>
    
    
    본문 내용
    
    
  </body>     
 </html> --끝

 

 

 

 

 

 

2. <head>

 

HTML 문서의 속성을 지정하기 위한 태그이며 그 안에 타이틀<title> 이나 메타<mete> 태그 등이 들어간다.

 

 

 

3. <body>

 

브라우저 상에 실제 표시되는 내용이 담기는 태그

 

 

4. <title>

 

HTML의 제목을 선언하는 태그.

타이틀 바에 보여지며 검색엔진은 제목 표시줄의 제목을 보고 내용을 예측하므로 적절하게 작성해야 한다.

 

 

5. <meta>

 

문서의 문자열 , 인코딩 등과 같이 문서의 다양한 정보를 제공한다.

※ <meta charset = "utf - 8"> 은 웹페이지의 문자 인코딩 방식을 utf - 8 을 따르라는 것이다.

 

 

6. <div>

 

의미가 없는, 컨텐츠들을 목적에 따라 묶을때 사용한다.

※ <div> 는 블록 레벨 엘리먼트(block level)로 줄바꿈이 된다.

 

 

7. <span>

 

의미가 없는, 컨텐츠들을 목적에 따라 묶을때 사용한다.

※ <span> 은 인라인 레벨 엘리먼트(inline level)로 줄바꿈이 되지 않는다.

 

 

8. <a>

 

anchor 의 약자로 웹페이나 외부 사이트로 연결하는 역할(하이퍼링크를 생성)을 하는 태그이다.

<a> 태그 안에 해당태그를 중첩사용 할수 없다.

 

<a> 태그의 활용 예시

 

<a href="https://www.naver.com">네이버</a>

 

9. <script>

 

외부 자바스크립트(JS) 파일을 연결하다가 javascript 코드를 입력할때 사용합니다.

 

 

 

10. <link>

 

외부 문서와 소스를 연결할때 사용합니다.

<link>는 빈 태그이며, 속성만을 포함합니다.

<head>태그 안에 사용하며, 사용 횟수는 제한이 없습니다.

주로 외부 stylesheet을 연결할때 사용합니다. (주로 CSS)

 

 

 

11. <img>

 

웹페이지에 이미지를 넣을때 사용하는 태로그로써 <img> 태그로 정의된 이미지는

직접 삽입되는 것이 아니라, HTML 문서의 링크가 되는 방식입니다.

 

<img>태그 하나당 1개의 이미지를 넣을수 있으며 src 속성과 alt 속성을 반드시 명시해야 합니다.

 

 

예시

 

<img src="이미지 경로" alt="사자">

 

 

12. <p>

 

단락(문단)을 나누는 태그로 브라우저는 자동으로 <p> 요소의 위,아래에 여백을 생성합니다.

 

(block level 태그)

 

 

 

13. <li> (ul) (ol)

 

list의 약어로 HTML 리스트에 포함되는 아이템(내용)을 정의할때 사용합니다.

 

<li>태그는 보통 <ul> 태그 또는 <ol> 태그 안에 사용되어 나열되는데

 

ul (unordered list) 사용시 순서가 없이 아이템(내용) 앞에 ● 블릿이 붙는다.

 

ol (ordered list) 사용시 아이템(내용) 앞에 숫자나, 영문 순서가 들어간다.

 

 

14. <style>

 

해당 HTML 문서의 스타일 정보를 정의할때 사용한다.

<head>태그 안에 사용되며 여러개의 <style> 요소를 포함할수있다.

 

 

15. <br>

줄 바꿈을 하는 태그로 빈 태그 이며 닫는 태그가 없습니다.

 

 

16. <h 1~6>

 

heading 의 의미로 제목을 정의 할때 사용되며

 

<h1> 요소가 가장 중요한 제목을 정의할때 사용되며 

숫자가 커질수로 중요도가 덜한 제목들에 사용한다.

 

 

 

17. <input>

 

사용자가 정보를 입력하는 부분을 만들기 위해 <form>요소 내부에서 사용됩니다.

<input> 의 type 속성을 다르게 함으로써 다야한 모양으로 나타낼수 있습니다.

 

 

속성명 속성값 설명
accept 파일 확장자
audio/*
video/*
image/*
미디어 타입		 서버로 업로드 할수 있는 파일의 타입을 정합니다.

 <input> 요소의 type 속성값이 “ifile”인 경우 
alt 텍스트 이미지를 텍스트로 대체 할때 사용합니다.

 <input> 요소의 type 속성값이 “image”인 경우
autocomplete on
off		  자동 완성 기능을 사용할때 사용합니다.
autofocus autofocus 접속시 <input> 요소로 자동으로 포커싱됨.
checked checked 접속시 미리 선택될 <input>요소를 명시합니다. "checkbox" 또는 "radio"에서 사용
formaction URL form dara 가 서버로 제출될 때 입력 데이터를 처리할 파일의 URL을 명시함. <input> 요소의 type 속성값이 “submit” 또는 “image”인 경우에만 사용할 수 있습니다.
max/min 숫자와 날짜 <input>요소의 최대값과 최소값을 지정
maxlength 숫자 <input> 요소에서 입력할 수 있는 최대 문자수를 지정.
readonly readonly 읽기 전용 필드로 만듭니다.
placeholder 텍스트 힌트를 표시하며 (필드 클릭시 사라집니다.)
type button 버튼
checkbox 체크박스(2개이상 선택가능)
color 색상표
data 사용자 국가 기준(연,월,일)
datetime-local 사용가 국가 기준(연,월,일,시,분,초,분할초)
email 메일주소 일력 필드
file 파일을 첨부할수있는 필드
hidden 서버로 보내는 값을 보내는 필드(사용자에게 보이지 않는다.)
image submit 대신 사용할수있는 이미지
month 사용자 국가 기준(연,월)
number 숫자를 조절할수 있는 화상표
password 비밀번호 입력 필드
radio 라디오 버튼 (1개만 선택가능)
range 숫자를 조절하는 슬라이드 막대
reset 리셋 버튼
search 검색필드
submit 서버로 전송하는 버튼
tel 전화번호 입력 필드
text 한줄짜리 텍스트를 입력할수있는 텍스트 필드
time 사용자 국가 기준 (시,분,초,분할 초)
url URL 주소 입력 필드
week 사용가 국가 기준(연,주)

 

 

 

 

 

19. <iframe>

 

 

사용중인 웹 페이지 안에 다른 웹 페이지를 넣고싶을때 사용한다.

 

 

속성명 속성값 설명
width 픽셀 <iframe> 의 너비를 지정.
height 픽셀 <iframe> 의 높이를 지정.
src URL <iframe> 의 보일 페이지의 URL.
name 텍스트 <iframe> 의 이름.
seamless seamless 불러온 문서의 테두리 없애기.

 

 

20. <nav>

 

현재 페이지의 또는 다른 페이지의 다른부분과 연결되는 네이게이션 링크(navigarion links)를 말한다.

 

사용되는 예로 메뉴, 목차, 인덱스 등이 있고 위치에 영양을 받지 않으므로 <header> , <footer>, <aside> 에 포함하거나

따로 사용할수 있다.

 

 

21. <strong>

 

해당 문서에서 중요한 내용을 강조하고 싶을때 사용한다.

브라우저에서 해당 태그는 일반적으로 굵을 텍스트로 표현됩니다.

 

<b> 태그와 비슷하게 보일수있지만 <b> 태그는 의미없이 진하게 표현되는 것이고

<strong> 태그는 내용을 강조하고 싶은 부분에 사용한다.

 

 

22. <footer>

 

문서의 특정 정보를 명시할때 사용합니다.

 

-저작권

-연락처

-사이트맵(sitemap)

-연관 페이지

-제장자 정보 등등

 

 

 

23. <header>

 

<head>와 다른 태그로써 여러번 사용 가능하며 문서안에 콘텐츠 들의 제목의 집합들을 포함할때 주로 사용됩니다.

 

<header>
        <h3>정보</h4>
        <h4>날짜</h4>
        <p>- 오늘의 뉴스 -</p>
    </header>

 

 

 

24. <button>

 

클릭할수 있는 버튼을 만들때 사용합니다.

버튼은 <input type="button"> 또는 <button> (컨텐츠 포함 가능) 으로 사용할수 있다.

 

속성 내용
submit 제출

<button type="submit">보내기</button>
reset 리셋

<button type="reset">리셋</button>
button 버튼 모양만 만든다.

 

 

 

주석처리

주석은 브라우저 상에서 사용자 눈에 보이지 않게 처리되므로 

HTML 문서의 어려운 단어나 부가 설명등을 작성하므로 유지보수에 도움을 주거나 설명이 필요할때 작성합니다.

 

HTML 에서 주석처리는 <>,  !  ,  -- 이 섞인 조합이며   <!-- 주석 -->    이렇게 사용합니다.ㅇㅇ

 

 

 

728x90
반응형

'HTML' 카테고리의 다른 글

멋쟁이 사자처럼 <HTLM> 수업하기!  (0) 2021.11.03
멋쟁이 사자처럼 <Front_end>과정 2일차  (0) 2021.11.01
HTML 이란?  (0) 2021.10.05
공유하기 링크
'HTML' Related Articles more
Comments