HTML이란?
HTML (HyperText Markup Language)
- HyperText (=링크)
- Markup Language
- '<>' 꺽새를 사용해 정보를 구조적 계층적으로 표현
- SGML (Standard General Markup Language)
- XML, MathML, EmotionML, (Markup Language)
- HTML 표준은 HTML(HyperText Markup Language)과 관련 API
- HTML을 마크업 언어로만 접근하지 않는 것을 권장
- Web Storage, Socket API (HTML Specification)
HTML의 탄생
- HTML은 문서를 표현하기 위해 만들어짐
- 문서 편집 프로그램이 상호호환되지 않았음
- 문서를 표현하기 위한 언어를 만들자 -> HTML
- HTML5는 공식으로 폐기된 상태
- 현재는 HTML Living
- Standard(html.spec.whatwg.org)
HTML 문법
태그란?
HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙
태그를 사용하는 방법
- 태그는 <> 기호로 표현하며 <>기호 사이에 태그 이름이 들어간다
- 대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙는다
- 시작 태그와 종료 태그 사이에 실제 화면에서 나타나는 내용이 위치하게 된다
<h1>Hello,HTML</h1>
태그의 중첩
- 태그 안에 다른 태그를 선언할 수 있음
- 태그를 중첩해서 사용할 경우, 중첩되는 태그는 부모 태그를 벗어나서는 안 됨
빈 태그
태그는 기본적으로 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있으며 그 사이에 내용이 들어가지만 그렇지 않은 태그도 존재한다
이런 태그를 내용이 없는 빈 태그라고 한다<br> <img src=""> <input type="">
빈 태그의 특징
- 빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그이다
- 빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우
- 이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 함
- 빈 태그에 대체되는 태그만 있는 것은 아니며 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재하며 위 예시 코드의
이 이런 경우이다
요소(Element)
- 내용을 포함한 태그 전체를 요소(Element)라고 한다
- 태그와 요소는 의미가 다르지만 많은 사람이 태그와 요소를 같은 의미로 사용하니 혼동하지 않도록 주의해야 한다
속성(Attribute)
속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미한다
속성을 사용하는 방법
- 속성은 이름과 값으로 이루어져 있음
- 시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현 된다
<h1 id="title" class="test">Hello,HTML</h1>
- 하나의 태그에 여러 속성을 선언할 수 있다
- 속성의 선언 순서는 태그에 영향을 미치지 않는다
- class를 id보다 먼저 선언해도 결과는 동일하다
공백
HTML은 두 칸 이상의 공백을 무시함
주석
화면에 노출되지 않고 메모의 목적으로만 사용하는 것
HTML 문서 구조
<!DOCTYPE html>
->태그가 아님. 이 문서가 어떤 버전으로 만들어졌는지를 알려줌.
<html lang="ko">
->해당 문서가 어느 언어로 만들어졌는지 나타내줌.
<head>
<meta charset="UTF-8">
-> charset= 문자 인코딩 방식 선언
<title>HTML</title>
-> tab바에 노출되는 내용
</head>
<body>
<h1>Hello,HTML</h1>
</body>
</html>HTML 태그
제목(HEADING)
- heading을 줄여서 h로 사용
- 제목의 레벨에 따라서
h1~h6까지 있음
단락(paragraph)과 개행
- paragraph를 줄여서 p
<p>: 글의 단락을 나타냄 <br>: 줄바꿈을 생성 <b>: bold 글자를 굵게 표현함 <i>: italic 글자를 기울여서 표현함 <u>: underline 글자의 밑줄을 표현함 <s>: strike 글자의 중간선을 표현함
앵커 요소
aanchor: a태그,앵커,링크 등 여러 이름을 불림<a href="http://www.naver.com/" target="_blank">네이버</a>- 다른 문서로 이동할 수 있는 링크를 생성
- href: 링크의 목적지가 되는 url을 지정
target 속성
- _self: 현재 화면에 표시함 target속성 선언하지 않으면 기본적으로 self와 같이 동작
- _blank: 새로운 창에 표시한다
- _parent, _top: 프레임이라는 특정 조건에서만 동작하는 속성
내부 링크
a태그를 통해 내부 링크로 초점을 이동할 수 있다.- 내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에
- 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 된다
<a href="#some-element-id">회사 소개로 이동하기</a> ..중략 <h1 id="some-element-id">회사 소개</h1>
컨테이너 태그
- 별다른 의미 없이 다른 목적으로 필요할 때 요소를 묶기 위한 태그
divblock-levelspaninline-level<div> <span>Lorem</span> ipsum dolor sit. </div> ```
리스트 태그
ul: unordered list 순서가 없는 리스트<ul> <li>콩나물</li> <li>파</li> <li>국 간장</li> </ul>
ol: ordered list로 순서가 있는 리스트<ol> <li>냄비에 국물용 멸치를 넣고 한소금 끓여 어쩌고</li> <li>콩나물을 넣어서</li> <li>맛있게 먹는다</li> </ol>
dl: description list 용어를 설명하는 리스트
dt: definition term로 용어를 구분
dd: definition description로 용어의 정의<dl> <dt>리플리 증후군</dt> <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로</dd> <dt>피그말리온 효과</dt> <dd>타인의 기대나 관심으로 인해 능률이 오르거나 결과가 좋아지는 현상</dd> </dl>
이미지 태그
- 문서에 이미지를 삽입함
- src 이미지 경로를 지정한다
- alt 이미지의 대체 텍스트를 입력한다
- width/height 이미지의 크기를 지정함
<img src="./images/pizza.jpg" alt="피자">
!!상대경로와 절대경로!!
src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있다 상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고, 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로<!-- 상대경로 --> <img src="./images/pizza.png" alt="피자"> <!-- 절대경로 --> <img src="C:/users/document/images/pizza.png" alt="피자"> <img src="http://www.naver.com/pizza.png" alt="피자">
표(Table) 태그
데이터 표를 나타내는 태그
td: 데이터 셀(table-cell)th: 제목 데이터 셀(table-cell)tr: 행(table-row)table: 표<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table>
!!테두리 만들어주기!!
<style> th, td { border: 1px solid; } </style>
caption: 표의 제목을 나타내는 태그
thead: 제목 행을 그룹화하는 태그
tfoot: 바닥 행을 그룹화하는 태그
tbody: 본문 행을 그룹화하는 태그
colgroup : 테이블 전체 column의 형식을 정의할 때 사용
col : 전체 column의 스타일을 관리할 때 사용
scope : 해당 헤더 셀이 관련되는 셀의 종류를 명시한다
웹브라우저에서 즉각적으로 나타나는 시각적 효과는 없더라도 스크린 리더기 같은
장치에서 유용하게 사용될 수 있다
>>그런데 col은 속성값인 span이 있으니 테이블을 묶을 때 사용한다지만
colgroup보다는 css에서 속성을 넣어주는 편이 더 편하지 않나?
그냥 이런 기능이 있다 정도만 알면 되는 걸까? 둘의 차이가 뭘까
>>이것도 아래에 있는 scope처럼 스크린리더기에서 읽힐 때를 위함일까?
http://www.tcpschool.com/html-tag-attrs/th-scope
폼요소
웹사이트에서 사용자로부터 데이터를 받아야 하는 경우 사용되는 요소
input 요소
- 대표적인 폼 요소
- 다양한 type 속성으로 여러 종류의 입력 양식으로 나타난다
- type 의 종류
: text(->placeholder), password, radio, checkbox, file, submit, reset, image, button 등<input type="..">
콘텐츠모델, 시멘틱마크업, 블록 & 인라인
콘텐츠 모델
Content Models 의 7 분류
- Metadata Content
- 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함
- 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분
head내에 들어간다는 것이 특징- Flow Content
- 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함
- Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함
- Sectioning Content
- Sectioning에는 문서의 구조와 관련된 요소들이 포함
article, aside, nav, section- Heading Content
- 각 section의 header를 정의하는 heading 태그가 포함
h1, h2, h3, h4, h5, h6- Phrasing Content
- 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함
- Embedded Content
- 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당
audio, canvas, embed, iframe, img, math, object, svg, video- Interacitve Content
- 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당
시멘틱 마크업
- 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML
- 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻함
- 마크업 할 때 의미에 맞는 태그, 요소를 사용하는 것
- 문서를 표현할 때는 구조화를 잘 해주는 것
- 정해진 약속대로 코드를 작성하게 되면 결국 기계뿐 아니라 사람도 이해하기 쉬운 코드가 된다
그외 시멘틱 요소
article기사 콘텐츠 요소
asideAside요소
details세부정보 공개 요소
위젯이 "열린" 상태로 전환된 경우에만 정보가 표시되는 공개 위젯을 만듭니다
figcaption그림 캡션 요소
figure선택적 캡션 요소가 있는 Figure
footer,header,main,mark,nav,section,time
블록과 인라인
블록 레벨 요소
- 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소
- 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생김
- 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함
div,h1~h6,p,ul,li,table...
인라인 레벨 요소
- 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소
- 라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있다
- 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없음 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없다
- 다만, HTML5 버전에서 생겨난 한가지 예외 경우가 있는데
a는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있다
span,i,img,em,strong,a...
