공부 출처 : HTML 독학백서 / 이도해

HTML(HyperText Markup Language)
웹 페이지 화면의 뼈대 (골격)을 만드는 데 사용되며, 웹 브라우저 상에서 동작하는 언어를 의미한다.
정보 기술을 위한 언어이다 보니 사용자와의 상호작용을 위해 다른 언어와 결합되어야 한다.
하이퍼텍스트
비순차적 접근이 가능한 문서(A를 선택하면 정확히 A지점으로 바로 이동)
마크업 언어
태그 등을 이요해 문서를 작성(표현)하는 언어
정보를 기술하는 언어(프로그래밍 언어에 해당하지 않는다)
HTML5
HTML에서 불가능 한 부분들이 추가된 최신 버전을 의미한다.
웹(WEB)
World Wide Web을 간략히 표현한 것으로, 인터넷에 연결된 사용자들이 정보를 주고 받을 수 있는 연결된 공간을 의미
인터넷상에서의 텍스트, 이미지, 동영상 등과 같은 정보를 하이퍼링크를 통해 연결하여 제공하는데, 이때 HTML을 사용해 웹 문서로 표현
HTML로 작성된 문서 → 웹 페이지
여러개의 웹 페이지 → 웹 사이트
태그 구조
<태그이름 속성이름="속성값">
위와 같은 구조로 작성 되어야 한다.
<body></body>
<img/>
태그는 짝을 이루는 태그와 혼자 쓰이는 태그로 구분할 수 있고, 닫는 태그 앞에는 /(슬래시)를 붙임
주석
문서 내부에 작성자가 원하는 코멘트를 작성하는 것
<!-- 주석 -->
IDE에서의 단축키는 Ctrl(Command) + /
<html></html>
HTML 언어로 작성되는 코드들이 작성될 HTML영역
문서의 시작과 끝을 나타낸다.
<head></head>
HTML문서에 대한 기본 정보를 포함하는 영역
문서의 제목, 제작자, 문서 정보등을 기술하는 곳
웹페이지에 보이지는 않지만 웹 브라우저에게 필요한 내용을 알려주는 역할
<head>의 내부 태그
• <title>
• <link>
• <script>
• <style>
• <meta>
<link>
닫는 태그가 따로 없는 싱글 태그
스타일 시트 파일 등의 외부 문서를 HTML 문서로 불러와 연결할 때 사용
[태그 내부에 들어가는 속성]
rel : 관계를 나타냄
type : 가져오려는 외부 문서의 종류
href : 가져오려는 외부 문서의 경로
<script></script>
스크립트를 문서에서 바로 작성하거나, 외부 위치한 스크립트 파일을 HTML문서로 불러와 연결할 때 사용되는 태그
스크립트를 HTML문서에 바로 작성하기 위해서는 <script>와</script>태그 사이에 스크립트 언어를 작성
위치에 종속되지 않기 때문에 <body></body>사이에도 작성 가능
src : 외부에 위치한 스크립트 파일을 연결하기 위해서 사용 (가져올 파일의 주소를 절대, 상대 주소로 지정)
<style>
<!DOCTYPE html>
<html>
<head> </head>
<body style="background-color: red;"></body>
</html>
Inline : HTML 문서 내부에 직접 스타일 속성을 지정하는 방법
HTML에서 바로 스타일을 지정할 수 있지만 문서가 길어질수록 많은 태그들과 분간하기가 어려워 유지 보수성이 매우 떨어져 되도록 사용하지 않는 것이 좋다.
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: red}
</head>
<body></body>
</html>
Internal : <head> 태그 내부에 <style> 태그를 사용해 스타일을 지정하는 방법
지정된 스타일이 작성된 HTML 문서 전체 태그에 영향을 주기 때문에, 스타일 지정이 많이 필요하지 않고 문서가 독립적인 스타일을 가질 때 적용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
</html>
html {
background-color: red;
}
External : 외부에 스타일 시트를 따로 작성(CSS)한 뒤, 링크로 연결하여 적용
<meta>
<head>태그의 다른 내부 태그들로 표현할 수 없는 다양한 정보를 기술하기 위해 사용되는 태그
웹페이지에 표시되지는 않지만 웹 브라우저와 검색 엔진에 정보를 제공하는 역할
싱글태그
name과 value 한 쌍으로 구성되며, 속성에 따라 웹 브라우저와 검색 엔진에 각각 다른 정보로 전달
*charset : 문서의 문자 인코딩 방식을 명시
한글을 사용할 수 있는 인코딩 방식 (UTF-8, euc-kr 등)
*name : 메타데이터를 구분하기 위한 이름을 명시하기 위해 사용
• author : 저자
• description : 페이지의 설명
• application-name : 웹 애플리케이션의 이름
• viewport : 웹 페이지의 뷰 포트 영역
• keywords : 검색 엔진에 적용되는 키워드 목록
• generator : 문서에 사용되는 소프트웨어 패키지
*http-equiv : 지정된 HTTP 헤더를 제공하는 역할
<!--문서를 3초 후 새로고침-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="3" />
</head>
<body></body>
</html>
• refresh : 문서를 새로 고침할 시간
• default-type : 우선적으로 사용할 스타일 시트
• content-type : 문서의 문자 인코딩 방식
<body></body>
문서의 본문
<head> 태그와 다르게 웹 브라우저 화면에 보이는 부분을 담당
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<p>Hello</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<span class="red">빨강</span>
<h1 class="orange">주황</h1>
<span class="yellow">노랑</span>
<span class="green">초록</span>
</body>
</html>
블록태그 : 항상 전체 너비를 차기하는 덩어리 태그, 앞뒤로 오는 태그에 줄바꿈이 생김(예. h1태그)
인라인태그 : 자신의 크기만큼만 차지하는 태그(여는 태그와 닫는 태그로 쌓은 부분만을 차지하는 태그),
줄바꿈이 생기지 않음 (예. span태그)

태그 | 설명 | 태그 | 설명 |
<address> | 연락처 정보 | <fieldset> | 필드 집합의 라벨 |
<li> | 목록의 각 항목 | <article> | 단락 |
<figcaption> | 그림의 설명 | <main> | 유일한 메인 콘텐츠 |
<aside> | 부가 콘텐츠 | <figure> | 미디어 콘텐츠 그룹 |
<nav> | 탐색 링크 포함 | <blockquote> | 인용구 |
<ol> | 정렬된 목록 | <details> | 상세 정보 위젯 |
<footer> | 페이지 및 구역의 푸터 | <p> | 문단 |
<dialog> | 대화 상자 | <form> | 입력 폼 |
<pre> | 미리 서식 적용한 글 | <dd> | 설명 목록의 정의 설명 |
<h1> ~ <h6> | 제목 | <section> | 웹 페이지의 구역 |
<div> | 문서의 분할 | <header> | 페이지 및 구역의 헤더 |
<table> | 표 | <dl> | 설명 목록 |
<hgroup> | 헤더 정보 그룹 | <ul> | 정렬되지 않은 목록 |
<dt> | 설명 목록 | <hr> | 구분선 |
*블록 태그 내부에는 다른 블록 태그와 인라인 태그가 중첩될 수 있다.
*블록 태그 중 <p>태그 내부에는 인라인 태그만 중첩될 수 있다.
*인라인 태그 내부에는 다른 인라인 태그만 중첩될 수 있다.
제목(Headline)
웹 페이지의 섹션이나 문단의 제목을 나타내는 블록 태그
<h1> ~ <h6>까지 총 6개로 나누어져 있다.
태그 명의 숫자가 낮을 수록 주요하고 글자의 크기도 크다.
단순히 글씨만 큰 것이 아닌, 컴퓨터와 검색 엔진도 해당 텍스트가 제목를 인지하기 때문에 문서의 구조를 파악할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

리스트 (List)
목록을 생성하는 블록 태그
목록의 성격에 따라 <ul>, <ol>, <dl>로 구분
<ul></ul>태그 : 순서가 없는 목록을 만들 때 사용하며, 각각의 항목은 <li></li>태그를 사용해 표현한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>오늘 할 일</h2>
<ul>
<li>청소</li>
<li>빨래</li>
<li>설거지</li>
</ul>
</body>
</html>

<ol></ol>태그 : 순서가 있는 목록을 만들 때 사용하며, 각각의 항목은 태그를 사용해 표현한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>오늘 할 일</h2>
<ol>
<li>2시에 약먹기</li>
<li>5시에 친구와 약속</li>
<li>8시에 운동</li>
</ol>
</body>
</html>

<dl></dl> : 정의 목록을 만들 때 사용
<dt></dt>태그는 이름을 나타내고 <dd></dd>태그는 뜻을 나타낸다.
<dl></dl>태그는 반드시 하나 이상의 <dt></dt>-<dd></dd>태그의 짝을 포함해야 함
하나의 <dt></dt>태그가 여러 개의 <dd></dd>태그를 포함 할 수도 있고
여러개의 <dt></dt>태그가 하나의 <dd></dd>태그를 포함 할 수도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>키워드 정리</h2>
<dl>
<dt>도서</dt>
<dd>
일정한 목적, 내용, 체재에 맞추어 사상, 감정, 지식 따위를 글이나 그림으로
표현하여 적거나 인쇄하여 묶어 놓은 것.
</dd>
<dd>그림, 글씨, 책 따위를 통틀어 이르는 말.</dd>
<dt>독학</dt>
<dt>독습</dt>
<dd>스승 없이 혼자 배워서 익힘.</dd>
</dl>
</body>
</html>

텍스트(Text)
<p></p> : 문단을 나타낼 때 쓰는 블록 태그, 줄바꿈을 해도 엔터는 적용되지 않는다.
</br> : 문단 내부에서 줄바꿈을 표현하기 위해 사용되는 싱글 / 인라인 태그
줄바꿈을 표현하기 위해 줄을 바꾸고자 하는 곳에 <br/>태그를 작성하면 원하는 위치에 줄바꿈이 일어난다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세
무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
</p>
<p>
남산위에 저 소나무 철갑을 두른듯
바람서리 불변함은 우리기상 일세
무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
동해물과 백두산이 마르고 닳도록<br/>
하느님이 보우하사 우리나라만세<br>
무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
</p>
<p>
남산위에 저 소나무 철갑을 두른듯<br/>
바람서리 불변함은 우리기상 일세<br/>
무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
</p>
</body>
</html>

<pre></pre> : 미리 서식이 지정된 그대로 텍스트를 출력
<pre>태그로 감싸진 텍스트에 적용된 엔터(줄바꿈), 탭(들여 쓰기), 스페이스바(띄어쓰기) 등이 코드에 작성한 그대로 출력되는 태그
</br>태그를 사용하지 않아도 엔터가 그대로 출력되지만, Tab(들여쓰기)도 그대로 출력되기 때문에 앞쪽 공백도 같이 출력된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<pre>
가을하늘 공활한데 높고 구름없이
밝은달은 우리가슴 일편단심일세
무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
</pre>
</body>
</html>

<hr/> : 텍스트 사이에 구분선을 넣어주는 싱글 / 블록 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
이 기상과 이 맘으로 충성을 다하여
<hr/>
괴로우나 즐거우나 나라사랑하세
<hr/>
무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
</p>
</body>
</html>

엔티티(Entity) :
대표적으로 태그를 표현할 때 쓰는 꺾쇠 <, >와 같은 것이 예약어이다.
HTML에서 예약어를 표현하기 위해 제공하는 문자 집합인 엔티티를 사용해야 한다.
엔티티는 https://www.w3.org/TR/html4/sgml/entities.html 에서 확인할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
<meta>는 과거 <facebook>이었다.
</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
<meta>는 과거 <facebook>이었다.
</p>
</body>
</html>

표시문자 | 엔티티 이름 | 16진수 엔티티 |
(공백) | |   |
< | < | < |
> | > | > |
& | & | & |
" | " | " |
‘ | ‘ | ‘ |
’ | ’ | ’ |
“ | “ | “ |
” | ” | ” |
× | × | × |
÷ | ÷ | ÷ |
? | − | − |
… | … | … |
위의 표는 외우지 않아도 된다.
모르면 충분히 검색해서 엔티티를 적용할 수 있다.
서식(Format)
텍스트에 '굵게', '기울임' 등 다양한 효과를 적용하는 것
<b></b> : 텍스트 굵게
<strong></strong> : 텍스트 굵게, 해당 텍스트 중요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
<b>그냥 굵은 글씨</b><br/>
<strong>중요한 의미가 내포되어 있는 굵은 글씨</strong>
</p>
</body>
</html>

<i></i> : 기울림(이탤릭체) 효과만 주는 태그
<em></em> : 기울임(이탤릭체), 해당 텍스트 중요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
<i>그냥 이탤릭체</i><br />
<em>중요한 의미가 내포되어 있는 이탤릭체</em>
</p>
</body>
</html>

<q></q> : 짧은 인용문을 표현할 때 적합
<blockquote></blockquote> : 긴 인용문을 표현할 때 적합
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
짧은 인용문을 작성할 때는 <q cite="http://abc.com">이처럼 q태그를 사용합니다.</q> 인라인 속성이므로 텍스트 흐름에 줄바꿈이 생기지 않습니다.
</p>
<blockquote cite="http://abc.com">
<p>
blockquote 태그는 블록 태그입니다.
긴 인용문을 작성할 때 적합합니다.
<cite>해달별, HTML 독학백서, 2020</cite>
</p>
</blockquote>
</body>
</html>

<cite></cite>태그는 인용구를 표현하는 태그가 아닌 책, 그림 등 창작품의 제목을 지정하는 태그로 <blockquote></blockquote>태그와 함께 사용 됨
<q></q>태그와 <blockquote></blockquote>태그는 cite의 속성을 사용해서 인용한 사이트의 URL을 지정할 수 있지만 화면에는 표시되지 않는다.
<blockqute></blockquote>태그의 속성 cite와 <cite></cite>태그를 혼동하지 말아야 함.
<ins></ins> : 텍스트 아래 밑줄을 표현하는 인라인 태그
<del></del> : 텍스트 중앙에 취소선을 표현하는 인라인 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
안녕하세요. <ins>요미</ins>와 <ins>로이</ins>입니다.<br/>
안녕하세요. <del>말썽꾸러기</del>입니다.
</p>
</body>
</html>

'개발일지 > HTML' 카테고리의 다른 글
HTML 공부 - 2 (하이퍼링크와 이미지, 의미 없는 태그와 의미 부여 태그) (0) | 2022.12.14 |
---|