HTML 많이 사용하는 문법 및 태그 정리.

티스토리 뷰

HTML

HTML 많이 사용하는 문법 및 태그 정리.

코닥쿠 2025. 3. 19. 15:41

문법.

HTML에는 문법이 존재한다 기존의 프로그래밍 언어(c, c++, java 등)같은 언어와 달리 웹의 기본적인 요인이 받혀주기 때문에 문법이 존재한다(당연히 프로그래밍 언어에도 절차지향성이라는 개념이 존재하지만 성향 자체가 다르다).

먼저, 알아야 할것은 태그이다.

태그란? 정보(콘텐츠)를 정의하는 형식이며 <></>로 시작과 끝을 구분합니다. 이러한 태그들은 콘텐츠들을 감싸며, 태그명은 구분과 기능을 나태냅니다(하지만, 단일 태그는 끝 태그없이도 끝낼 수 있다).

기본적인 구조는 아래와 같이 들어가야 하며 자세한 내용은 아래 코드로 세세하게 달아 놓았습니다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

undefined

위와 같이 <!DOCTYPE html>은 우리가 HTML5를 사용한다는 것을 알리는 것이며, <html></html>안에서 모든 구문들을 기입해야 한다. 그렇게 <head></head>, <body></body> 순으로 태그의 이름으로만 알 수 있게 단락이 구분되어 설정할 수 있다(script와 style 태그는 CSS, JavaScript로 대체 되기에 설정하든 안하든 상관이 없다).

주석.

주석은 기존의 프로그래밍 언어와 같이 TODO. 설명, 코멘트를 남기기 위한 용도이며 당연히 코드를 실행하는데 있어 어떠한 영향도 주지 않는다.

기본적으로 문법은 '', '//' 같은 방식이지만, 간편하게 'ctrl + /'으로 해당 구분에 맞는 주석을 생성할 수 있습니다.

태그.

태그란? 우리가 HTML에 문서를 다루기 위한 기초적인 기능으로 강조를 하거나 단락을 나눌때 등 여러가지 용도로 용의하게 만드는 것이다.

<meta>

특성	내용
content	메타데이터의 내용.
charset	해당 문서의 문자 인코딩 방식을 명시하며 명확하게는 문자 인코딩, 문서 키워드의 요약 정보를 기입하는 태그이며, 여기서 문자 인코딩은 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해서는 'utf-8'방식을 많이 사용한다.
http-equiv	콘텐츠 속성 정보에 대한 http헤더로 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다.
name	name은 말 그대로 이름을 부여하여 'content'과 같이 이용해 해당 쌍을 이루어 구분하고 사용할 수 있다.
viewport	뷰포트는 우리가 보는 화면의 영역을 의미하며, 우리가 기기의 발전으로 컴퓨터를 사용하다 점점 발전하며 스마트폰 같은 화면이 작아지고 비가 커지며 콘텐츠들이 화면에 벗어나거나 맞지 않는 상황에 그 영역에 맞게 표현하고자 해당 태그 방식이 생겨났다.

식별	내용
<br>	해당 태그는 단일태그로 줄바꿈을 해준다.
&nbsp	해당 기능은 들여쓰기 즉, 'Tab'과 같은 기능으로 작동한다.

식별	내용
블록 레벨	해당 요소는 자신의 속한 영역을 할당하여 블록형식의 너비를 얻어 그 안의 콘텐츠를 생성하는 요소이다. 대표적으로는 <p>, <hr> 등 태그와 같은 블록 라벨로 이루어져 있다.
인라인	인라인은 자신이 사용하고자 하는 영역만 따로 나누어 영역을 얻는 방식이다.

식별	내용
<strong>	strong 태그는 감싸고 있는 콘텐츠 즉, 텍스트를 굵게 표시하는 태그이다.
<em>	em 태그는 감싸고 있는 콘텐츠 즉, 텍스트의 기울여 표시하는 태그이다.
<mark>	mark 태그는 감싸고 있는 콘텐츠 즉, 텍스트의 형광으로 표시하는 태그이다.

식별	내용
<div></div>	블록 레벨 컨테이너.
<span></span>	인라인 컨테이너.

식별	내용
id	요소에 고유한 이름을 부여하는 식별자 역할 속성.
class	요소를 그룹 별로 묶을 수 있는 식별자 역할 속성.
style	요소에 적용할 css 스타일을 선언하는 속성.
title	요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁 제공.

식별	내용
url	주소를 나타내는 속성.
target	_self, _blank; 해당 url에 접속할경우 현재 페이지 또는 새로운 페이지에서 열지 결정하는 속성.
tel, mailto	tel은 전화번호를 나타내며, mailto는 메일을 나타내는 속성

식별	내용
<li></li>	li 태그의 경우에는 자신이 나열하고자 하는 태그 안에 항목을 지정하는 태그이다 (항목 지정) .
<ul></ul>	항목을 지정하며 목록안에 다른 태그의 목록 태그들도 범용적으로 사용할 수 있다 (순서 없는 목록).
<ol></ol>	항목을 지정하며 위와 같이 목록 태그로 감싸기가 가능하고 이외에도 <ol type="">을 이용하여 숫자, 로마 숫자, 알바벳으로 지정하여 순서를 표현할 수 있다. (순서 있는 목록)
<dl></dl>	기본적으로 <dt></dt>, <dd></dd> 태그를 사용하며 dt(Descrition Term) 태그는 항목의 이름과 이름에 대한 설명으로 의미하고 dd(Description-Description) 태그는 해당 항목의 설명을 나타내는 태그이다 (설명 있는 목록) .

식별	내용
text	기본 값이며 단일 줄 텍스트 필드로 줄 바꿈은 입력 값에서 자동으로 제거된다(maxLength, placeholder; 최대 문자 길이, 입력전 텍스트 문구를 지정할 수 있는 태그들이 추가로 있다).
button	말 그대로 버튼이며, 기본적으로 값은 비어있다(value; 버튼안의 값을 변경할 수 있다).
color	색상을 지정하기 위한 컨트롤러이며, 색상 선택기가 열린다.
range	지정한 범위에 값을 지정하기 위한 컨트롤러이며, 중간 값으로 기본 설정되고 최댓값과 최솟값을 지정하여 사용한다(min, max, step; 최소, 최대, 단위).
date	날짜를 지정할 수 있는 컨트롤러이며, 년, 월, 일를 설정한다.

식별	내용
action	값을 전송할 서버의 url(여기서 php파일을 이용하여 시험삼아 해보는것이다).
method	클라이언트가 입력할 데이터를 어떤 식으로 전송할지 정한다(Get, Post; 데이터를 url과 구분자 뒤에 양식을 연결하여 전송, 데이터를 요청하는 본문으로 양식을 전송한다).

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

티스토리 뷰

HTML 많이 사용하는 문법 및 태그 정리.

문법.

주석.

태그.

티스토리툴바