강의 boostcource
HTML element reference
HTML (Hyper Text Markup Language)
- 웹페이지를 만들 때 사용되는 언어
- Hyper Text: 웹페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 == link
- Markup 언어 특징: 정보를 구조적으로 표현 가능
두 칸 이상의 공백 Ignore
<h1> Hello, HTML </h1> <h1> Hello, HTML </h1> <h1> Hello, HTML </h1> <!-- 셋 다 동일한 결과-->
주석 작성
<!-- 주석 내용 작성 -->
- 태그(tag)들의 집합
태그(Tag)
- tag: 이름표
- < 태그 이름 > 로 표현됨
- 시작 태그와 종료 태그로 구성, 종료 태그 이름 앞에 '/' 기호 들어감
<h1> Hello, HTML </h1>
태그 중첩 가능
→ 중첩되는 태그는 부모 태그 내부 에 있어야 함
<h1> Hello, <i> HTML </i></h1> <!-- 먼저 시작된 h1 이 부모 태그, 그러므로 i 태그는 h1 태그 안에서 종료 태그를 먼저 선언해야함 -->
빈 태그(empty tag)
- 내용 없는 태그
→ 내용 없으므로 종료 태그 불필요
<br> <!-- linebreak 개행을 위해 쓰임 --> <img src=""> <input type="">
요소(element)
- 내용을 포함한 태그 전체
속성(attribute)
- 태그에 추가 정보 제공 및 태그 동작 표현 제어 가능한 설정값
- 이름과 값으로 구성
- 형식: 속성 이름 = "속성값"
- 여러 속성 선언 시 공백으로 구분
- 속성 선언 순서는 태그에 영향 끼치지 않음
- 속성은 모든 태그에서 사용 가능한 글로벌 속성과 특정 태그에서만 사용가능한 속성으로 구분
- 또한 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분됨
<h1 id="title"> Hello, HTML </h1> <!-- h1 tag 에 id 속성 추가해 title 값 선언 --><h1 id="title" class="main"> Hello, HTML </h1> <!-- id, class 글로벌 속성 -->
HTML 기본 구조
- 문서 타입 정의 (DTD, doctype)
- 문서의 버전을 브라우저에 선언, 반드시 문서 최상단 선언
<html> 요소 - DTD 선언 후 <html> 태그 필요, 자식으로는 <head>, <body> 태그 - <html> 태그의 lang 속성은 문서 작성 언어를 의미 - <head> 태그에 위치하는 태그들은 브라우저 화면에 미표시, 문서 기본 정보 설정, 외부 스타일 시트 파일 및 js 파일 연결하는 역할 - <meta> 태그의 charset 속성은 문자의 인코딩 방식 지정 - <body> 태그에 실제 브라우저 화면에 나타나는 내용 들어감<!DOCTYPE html> <html lang="ko"> <!-- 한글로 작성된 문서 --> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1> Hello, HTML</h1> </body> </html>
제목 태그 (heading tag → h)
제목의 레벨에 따라 <h1>~<h6> 까지 존재
(h1 이 가장 큰 제목 - 굵고 크게 표현)단락 태그 (paragraph tag → p)
- block level tag
자연스럽게 개행이 됨
<p> 내부에서 강제 개행 위해서는 <br> 빈 태그 사용해야함 Semantic Markup(POSH, Plain Old Semantic HTML)
- 적절한 HTML 요소를 올바르게 사용
- 구조화 잘하고, 정해진 약속대로 코드 작성
- semantic 요소
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>- 각각의 요소가 같은 모습으로 표현되나 의미가 다름
- < b >: 단순 텍스트 굵게 표현
- < strong >: 중요하다는 의미 내포
- < em >: 글자의 특정 부분 강조
- < u >, < s >: 단순 글자에 선 그은 것
- < ins >, < del >: 내용이 새롭게 추가되거나 삭제되었음을 의미
텍스트 표현 태그 (text tag)
- inline level tag
<b> : bold 태그는 글자를 굵게 표현하는 태그 <i> : italic 태그는 글자를 기울여서 표현하는 태그 → HTML5 버전에서는 단순 표현용 태그가 아닌 의미가 가지는 태그로 변경됨 (기술적 용어, 외국어 문구, 인물의 생각 등 다른 글자와 구분하기 위한 상황에서 사용됨) <u> : underline 태그는 글자의 밑줄을 표현하는 태그 <s> : strike 태그는 글자의 중간선을 표현하는 태그 <!-- example --> <p> <b> Lorem </b> <i> ipsum </i> dolor sit amet <br> <b> Lorem </b> <s> ipsum </s> dolor sit amet </p>Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Content Model (7)
1. Metadata Content
base, link, meta, noscript, script, style, title
- 콘텐츠 스타일, 동작설정, 다른 문서와의 관계 등 정보를 포함하는 요소
- 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그 해당, 대부분 < head > 내에 들어감
2. Flow Content
a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr
- 문서의 자연스러운 흐름에 의해 배치되는 요소 포함
- Metadata에 해당하는 일부 tag 들만 flow 에서 제외, 요소 대부분이 flow 에 포함
3. Sectioning Content
article, aside, nav, section // 문서의 구조, 아웃라인에 영향 줌
- 문서 구조와 관련된 요소
4. Heading Content
h1, h2, h3, h4, h5, h6
- 각 section 의 header 를 정의하는 heading tag 포함
5. Phrasing Content
a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr
- 문서의 텍스트, 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소 포함
6. Embedded Content
audio, canvas, embed, frame, img, math, object, svg, video- 외부 콘텐츠 표현하는 요소 포함, 오디오, 비디오, 이미지 등 멀티미디어 관련 요소들이 해당
7. Interacitve Content
a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu, object[usemap], select, textarea, video[controls]
- 사용자와 상호작용하는 요소들이 포함, 대표적으로 form 요소들이 해당
Block level element
- 양옆으로 다른 요소가 배치되지 않게 박스 생성
- 박스 위아래로 줄 바꿈 생성
- 일반적 모든 요소 포함 (block, inline level)
div, h1~h6, p, ul, li, table ...
Inline level element
- 하나의 라인 안에서 자신의 내용만큼 박스 생성
- block level element를 포함할 수 없음
- exception: HTML5 버전에서 < a >는 inline level element 이나 자손으로 block level element 가질 수 있음
span, i, img, em, strong, a ...
다양한 속성
< a >: anchor tag
- 링크를 만들기 위해서는 < a > 는 반드시 href 속성(hypertext reference)을 가져야 함
- target 속성은 링크된 리소스를 어디에 표시할 지 나타내는 속성
- 속성값
- _self: 현재 화면에 표시, target 속성 미선언 시 기본적으로 self 로 동작
- _blank: 새로운 창에 표시, 외부 페이지 나타나게끔 하는 속성
- _parent & _top: frame 조건에서만 동작하는 속성
- 속성값
<a href="http://www.naver.com/" target="_blank">네이버</a>
- < a > 를 통해 페이지 내부 특정 요소로 이동 가능 == 내부 링크
- 내부 링크 사용시 href 속성값에 # 작성 뒤 페이지 내에서 이동하고자 하는 요소의 id 속성값 적기
- 주로 빠르게 화면의 최상단으로 이동하고자 할 때 사용
- ex. 웹페이지에서 화면 하단에 있는 top or 맨 위로 이동하기 버튼이 해당됨
<a href="#some-element-id"> 펭귄 소개로 이동하기 </a> .... 중략 .... <h1 id="some-element-id"> 펭귄 소개 </h1>
의미가 없는 컨테이너 요소
- 단순히 요소를 묶기 위해 사용되는 태그
- 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도
- 대표적인 태그
< div >, < span > < div > tag
- block level tag (한 줄 생성해 내용 표현)
< span > tag
- inline level tag (블록 레벨 요소 한 줄 내에서 표현)
단순 항목 나열
효율적으로 치는 법
만약 ol 안에 li 를 3개 정도 넣고 싶다면 그냥 아래처럼 입력하고 tabol>li*3
- 속성값 존재 ex. < ol type="i" >
< ul > tag
- unordered list
- 내부에 < li > 를 사용함
< ol > tag
- ordered list
- 내부에 < li > 를 사용함
< dl > tag
- definition/description list
- 용어와 정의 표현 시 사용
- 하나 이상의 항목으로 리스트가 이루어지는 구조
< dt >: 용어 나타내는 태그
< dd >: 용어에 대한 정의, 설명 나타내는 태그
< img > tag
- 문서에 이미지를 삽입하는 태그
- 종료 태그 없는 빈 태그
- src 속성: 필수 속성, 이미지 경로 나타냄
- alt 속성: 필수 속성, 이미지의 대체 텍스트 나타냄 (이미지 대체하는 글, 웹 접근성 측면에서 중요)
- width/height 속성: 이미지 가로/세로 크기 나타냄
- 값 단위 필요 X, 자동으로 픽셀 단위로 계산됨
- 이미지 크기 고정적일 시 이 속성 선언하는 것이 성능 측면에서 좋음
- 미설정 시 원본 크기대로 노출
- 둘 중 하나만 선언 시 선언한 속성 크기에 맞춰 자동으로 비율에 맞게 변경됨
<img src="./images/penguin.png" alt="펭귄">상대경로 & 절대경로
- 상대경로: 현재 웹페이지 기준, 상대적으로 이미지 위치 나타냄
- './' 는 페이지가 있는 현재 폴더 의미
- 절대경로: 실제 그 이미지가 위치한 곳의 전체 경로
<!-- 상대경로 -->
<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 element
- 행(row), 열(column)
<table>: 표를 나타냄 <tr>: 행을 나타냄 <th>: 제목 셀 나타냄 <td>: 셀을 나타냄
- 하나의 테이블은 하나 이상의 < tr > 로 이루어짐
- < tr > 은 < th >, < td > 를 자식으로 가짐
<table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td>13</td> <td>14</td> <td>15</td> <td>16</td> </tr> </table> <!-- 4행 4열 표 --> <!-- 테이블 기본 스타일 테두리가 없으므로 아래 코드 추가해야함 --> <style> th, td { border: 1px solid; } </style>
표의 구조와 관련된 tag
- 표를 구조적으로 파악하기 위해 도움이 되는 태그 사용해야 함
<caption>: 표의 제목을 나타내는 태그
<thead>: 제목 행을 그룹화하는 태그
<tfoot>: 바닥 행을 그룹화하는 태그
<tbody>: 본문 행을 그룹화하는 태그<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Passionate about My Dreams