0301
HTML이란
Hyper Text Markup Language의 줄임말
하이퍼텍스트(Hyper Text)란 문서를 서로 연결해 주는 링크를 의미한다.
마크업(Markup) 이란 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미한다.
HTML 문서의 기본 구조
웹 문서는 보통 <!DOCTYPE html> 로 시작해 <html>, <head>, <body> fksms 3개의 영역으로 구성되어 있음.
<!DOCTYPE html> : 현재 문서가 HTML5로 작성한 웹 문서라는 뜻
<html>~<\html> : 웹 문서의 시작과 끝을 나타내는 태그. 웹 브라우저가 <html> 태그를 만나면 <\html>까지 소스를 읽어 화면에 표시
<head>~<\head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분.
<meta> : 태그는 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용한다. <meta> 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것. 웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표시할 때에는 UTF-8 이라는 문자 세트를 사용한 다고 웹 브라우저에 다음과 같이 알려저야함 <meta charset="UTF-8">
<title> : <title>태그는 <title>제목<\title> 다음과 같이 웹 문서의 제목을 입력한다. <title> 태그에서 지정하는 내용은 웹 브라우저의 제목 표시줄에 표시된다. 또한 해당 페이지의 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지의 전체 내용을 추측할 수 있다.
<body>~<\body> : 실제로 웹 브라우저 화면에 나타나는 내용.
시맨틱 태그
HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱(semantic)태그라고 한다. 텍스트 단락(paragraph)을 줄인 <p> 태그나 앵커(anchor)를 줄인 <a> 태그 등 이름만으로도 어떤 역할을 하는지 쉽게 알 수 있다.
시맨틱 태그 종류
<header> : 헤더 영역을 의미한다. 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있음. 사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입한다.
<nav> : 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다. 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있다. 웹 문서에서 <nav> 태그를 여러개 사용할 경우 각각 id 속성을 지정하면 내비게이션 마다 다른 스타일을 적용할 수 있다.
id 속성은 page 안에서 중복으로 사용할 수 없으며 주로 JavaScript에서 다루기 위해 지정한다. name 속성으로도 JavaScript를 통해 속성이나 값을 변경할 수 있는데 중복 값을 가질 수 있어 id 속성의 값으로 주로 접근한다.
<main> : <main>태그는 웹 문서에서 핵심이 되는 내용을 넣는다. 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성한다. <main> 태그는 웹 문서에서 한 번만 사용할 수 있다.
<article> : <article> 태그는 아티클의 사전적 의미인 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 넣는다. 예를 들어 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 말한다. 문서 안에는 <article> 태그를 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있다.
<section> : <section> 태그는 웹 문서에서 콘텐츠 영역을 나타낸다. <section> 태그는 <article> 태그와 비슷해 보이기도 합니다. 하지만 <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 쓴다.
<aside> : <aside> 태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다.
<footer> : <footer> 태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다. 푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣는다. 푸터 영역에는 <header> 태그를 비롯하여 <section>, <article> 등 시맨틱 태그를 이용해 푸터 안에 다양한 정보를 넣는다.
<div> : HTML의 <header>, <section> 같은 시맨틱 태그가 나오기 전에는 헤더나 내비게이션, 푸터 등을 구별할 때 <div> 태그를 사용했다. <div> 태그는 <div id="header">나 <div id="detail">처럼 id나 class속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다. 영역을 구별하거나 스타일로 문서를 꾸밀수 있다.
텍스트 태그
웹 사이트에서는 텍스트로 정보를 쉽게 전달할 수 있습니다. 신문 기사나 블로그, 쇼핑몰 상세 페이지 등 대부분의 사이트에서 텍스트를 사용한다.
<hn> : 웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다. 이렇게 자주 사용하는 제목 스타일을 미리 태그 형태로 만든 것이 제목 태그이다. n의 자리에는 1~6의 숫자가 들어가면 제목 텍스트를 크기별로 표시할 수 있다.
<hn>제목<\hn>
<p> : <p>와 <\p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. 이때 기억해 두어야 할 점은 편집기에서 줄을 바꾸더라고 웹 브라우저에서는 한 줄로 표시된다는 것이다. 그리고 텍스트 단락의 내용이 길어서 한 줄로 표시할 수 없을 경우 자동으로 줄이 바뀐다.
<br> : 원하는 위치에서 줄바꿈을 해준다. <br> 태그는 단독으로 사용하므로 닫는 태그가 필요없다.
<blockquote> :
Last updated