HTML Reference
HTML
HTML(hyperText Markup Language)은 웹 페이지를 만들기 위한 언어 입니다.
- HT = HyperText : 문서와 문서를 연결
- M = Markup : 마크업, 태그
- L = Languate : 언어
- HTML이란? 문서와 문서로 연결된 태그 언어를 말합니다.
HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다. HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"를 사용하여 나타낸다. 일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작된다. 이와같이 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를 웹 브라우저가 해석하여 이용자에게 보여주게 된다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를 만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다. 출처 : 두산백
태그(Tag)
태그는 정보를 정의하는 방식을 의미합니다.
- 태그는 열린태그와 닫는태그가 있습니다.
- 닫는 태그에는 "/" 있어야 합니다.
- 닫는 태그가 필요 없는 것도 있습니다.(<br>,<img>,<hr>,<input>,<meta>)
- HTML5 에서는 "/"가 생략이 가능합니다.
블록 요소/인라인 요소(Blok/inline)
블록 요소는 박스, 인라인 요소는 텍스트를 의미합니다.
- 블록 엘리먼트(Block Element)
- 독립된 박스 영역으로, 한줄에 하나에 블로 요소만 표현 할 수 있다.
- 블록요소애는 블록요소 인라인 요소를 포함 할 수 있다.
- <div>,<p>,<h1>,<h6>,<ul>,<li>
- 인라인 엘리먼트(Inline Element)
- 독립된 텍스트 영억으로, 한 줄에 여러개의 인라인 요소를 표현 할 수 있다.
- 인라인 요소에는 블록 요소가 포함 될 수 없지만, 인라인 요소는 포함 할 수 있다.
- <span>,<a>,<strong>,<em>,<img>
DTD(DOcumen Type Declaration) 선언
웹 페이지를 제작하기 위해서는 웹 문서 형식 유형을 설정해야 한다.
- 독타입을 설정하지 않거나 잘못 설정하면 브라우저에 따라 화면이 다르게 나오거나 렌더링이 달라지기 때문에 독타입을 설정해야 한다.
<!-- html5 --> <!DOCTYPE html> <!-- HTML 4.01 Strict --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- HTML 4.01 Transitional --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- HTML 4.01 Frameset --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!-- XHTML 1.0 Strict --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- XHTML 1.0 Transitional --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- XHTML 1.0 Frameset --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
언어 속성 설정
컨텐츠의 언어를 인식하고 언어 정보를 추출하는데 사용합니다. 미리 언어를 설정하면 효율성이 더 좋아집니다
<!-- html5 --> <html lang="ko"> <!-- /html --> <!-- html4 --> <html lang="ko" xml:lang="ko" xmlns= "http://www.w3.org/1999/xhtml"> </html>
문서 정보 설정
웹 문서의 필요한 정보를 제공합니다.
<!-- html5언어설정 --> <meta charset="UTF-8"> <meta http-equiv="Content-Language" content="text/html; charset=UTF-8"> <!-- 웹 문서에 대한 제작자 설정 --> <meta name="author" content="webstoryboy"> <!-- 웹 문서에 대한 설명 설정 --> <meta name="description" content="webstoryboy"> <!-- 웹 문서에 대한 키워드 설정 --> <meta name="keywords" content="webstoryboy">
HTML Description
<html>
HTML 문서의 최상위 루트를 나타냅니다
<head>
HTML 문서의 헤더 요소를 정의하는 영역입니다.
<body>
HTML 문서의 본문에 해당하는 콘텐츠를 정의하는 영역입니다.
<meta>
문서에 대한 정보를 제공합니다.
<link>
문서를 외부 파일과 연결합니다.
<title>
문서의 제목을 설정합니다.
<h1>~<h6>
크기 및 우선 순위를 나타냅니다.
<p>
문단을 만들어 단락을 구분할 때 사용하는 태그 입니다.
<ul>
순서가 없는 목록을 만들 때 사용한다.
<li>
요소를 포함하여 각 항목을 표시한다
<a>
하이퍼링크를 정의합니다.
- href(hyperlink reference) : 값으로 정해준 주소로 이동한다.
- <a href="https://blog.naver.com">사이트</a>
- < a target="_blank"> </a>링크 클릭시 새로운 브라우저 창으로 설정합니다.
- < a target="_parent"> </a>현재 브라우저의 부모 브라우저 창으로 설정합니다 부모가 없는 경우_self와 동일합니다
- < a target="_self"> </a>현재와 동일한 브라우저 창으로 설정합니다.
- < a target="_top"> </a> 가장 상위 창에서 연다.(즉 프레임을 무시하며, 전체 브라우저 창에서)(부모가 없으면 _self처럼 표시됨)
- 방문하지 않은 링크는 밑줄과 파란색으로 표시됩니다.
- 방문한 링크는 밑줄과 보라색으로 표시됩니다.
- 활성화된 링크는 밑줄과 빨간색으로 표시됩니다.
- <a>태그는 예외적으로 HTML5에서 블록요소를 포함할수 있습니다.
strong
중요한 내용을 강조하고 싶을때
em
측정부분을 강조하고 싶을 때
span
한 태그를 나눠 여러 css를 적용하는 태그
div
여러 태그를 묶어 CSS를 한번에 적용하는 태그
address
문서 또는 기사의 작성자, 소유자에 대한 연락처 정보를 정의합니다
hr
제목과 본문의 경계를 나누거나 글자와그림의 경계라인을 만들때 쓴다
br
줄을 바꿀때 사용한다
table
표의 시작과 끝을 나타낸다
- tbody: 표의 본문 부분
- thead: 표의 제목 부분
- tfoot: 표의 요약 부분
- tr: row 를 만들때 사용
- td: columm을 만들 때 사용
- th: 가운데 정렬, 진하게 속성이 자동으로 부여된다(td대신사용)
input
사용자에게 입력을 받을 수 있는 필드를 생성하는것
- name: stromg값으로 저장됨,size 크기
- value: 처음 화면에 표시 되는 텍스트
- maxlength: 입력창에 입력할 수 있는 최대 갯수
- text: 텍스트를 입력할 수 있는 한 줄 짜리 필드 생성
- password: 비밀번호를 입력할 수 있는 한줄 짜리 필드생성, 안보이게
- radio: 라디오 버튼 생성-한가지만 선택가능 name/walue/checked
- checkbox: 체크박스 생성-여러개 생성가능
- file: 파일이름을 입력하는 필드 생성
- reset: 초기화 버튼생성
- image: 이미지지를 전송버튼으로 만든다
- hidden: 사용자에게는 보이지 않지만 서버로 전송된다
- submit: 제출버튼생성-form태그의 action속성과 같이 사용
- button: 버튼을 누르면 액션이 발생하는것 -javascrpt와 사용
- autofocus: 페이지를 불러오자마자 입력 필드 안에 마우스 커서 표시
- placeholder: 필드 안에 먼저 내용을 표시하고 있다가 클릭하면 사라지는 표시
- required: 필수 입력 필드 체크
- readomly: 읽기 전용 필드
legend
fieldset 태그에 머릿말을 정의한다.
fieldset
양식의 관련 요소를 그룹화 한다
form
웹사이트에서 다른 페이지로 정보를 보낼 떄 사용한다.
section
일반적으로 문서의 콘텐츠 섹션을 의미합니다.
- 콘텐츠와 관련된 한 가지 주제 영역을 말합니다.
- section 요소는 문장이나 문서의 스타일링 요소가 아니기 때문에 편의나 영역을 위함이면 div 태그가 좋습니다.
- section 요소는 제목이 없는 경우는 섹션이라고 할 수 없기 때문에 제목을 제공해야 합니다.
- section 요소는 일반적인 주제가 아니라면 구체적인 요소(article, aside, nav)를 사용하는 것이 더 적절합니다.
article
콘텐츠의 독립적인 항목을 나타내는 콘텐츠를 의미합니다.
- article는 포럼, 신문기사, 잡지, 블러그 항목, 게시판 글 등은 콘텐츠의 독립적인 항목을 나타냅니다.
- section은 하나의 주제를 나타낸다면, article은 주제를 묶은 독립적인 콘텐츠입니다.
- section 요소 안에는 article 요소를 쓸 수 있으며, article 요소 안에도 section요소를 쓸 수 있습니다.
nav
페이지 내에서 이동 할 수 있는 네비게이션 링크 그룹입니다.
- nav는 문서의 핵심적인 페이지의 메뉴 및 서브메뉴에서 사용하고, 문서에서 주로 한 번 사용합니다.
- 문서 안에 링크가 포함된 콘텐츠는 nav를 사용하지 않습니다.
- nav는 핵심적인 네비게이션에 사용해야 하므로, 푸터 내에 링크 그룹의 사용은 적절하지 않습니다.
main
웹 문서의 주요 콘텐츠 영역을 나타낼 때 사용합니다.
- main는 웹 페이지에서 한 번만 사용할 수 있으며, 접근성과 검색 영역에 노출을 향상시킵니다.
- article, aside, footer, header, nav를 하위 요소로 사용 할 수 있습니다.
aside
웹 문서의 메인 콘텐츠와 관련된 사이트 콘텐츠 영역을 나타냅니다.
- aside는 메인 콘텐츠와 관련된 사이트의 정보, 광고 등 부분적인 정보를 그룹화 할 때 사용합니다.
header
웹 문서의 헤더 영역을 나타냅니다.
- 헤더에는 웹 페이지에 대한 소개, 네비게이션 영역, 테이블 영역, 검색영역, 로고영역을 포함한 영역입니다.
- 헤더에는 제목 태그가 포함 될 수 있으며, 필수 조건은 아닙니다.
- header는 섹션 콘텐츠가 아닌 그룹화하기 위한 요소이므로 section 요소를 포함 할 수 없습니다.
footer
웹 문서의 푸터 영역을 나타냅니다.
- 푸터는 저작권 정보, 회사 정보, 관련 링크, 주소, 바닥글, 사이트 정보 등을 포함하는 콘텐츠 영역입니다.
- footer는 섹션 콘텐츠가 아닌 그룹을 나타내는 요소이며, section, article, aside등을 포함 할 수 있습니다.
HTML에 새로생긴 태그
html5에서 새로 생긴 태그
새로운 태그
- <header> :웹 페이지의 헤더를 만들때 사용합니다.
- <footer> : 웹 페이지의 하단을 만들 때 사용합니다.
- <nav> : 웹 페이지의 메뉴를 만들 때 사용하고, 일반적으로 내부에는 <ul>과 <li>를 많이 사용합니다.
- <article> : 본문을 감싸줄 때 사용합니다. 주 내용(콘텐츠)영역이라고 생각하시면 됩니다.
- <section> : <article> 안에 영역을 구분할 때 사용합니다.
- <aside> : 페이지 왼쪽이나 오른쪽에 부가적인 내용의 영역입니다. 보통 퀵메뉴나 광고영역으로 많이 씁니다.
- <hgroup> : 제목 <h1>과 부제목 <h2>으로 나눠 써야 할 때 이러한 제목들을 하나로 묶어주는 태그입니다.
- figure : 그림이나 비디오 같은 멀티미디어 요소를 넣을때 사용합니다.
- figcaption : figure 안에서 비디오나 멀티미디어의 캡션(제목이나 간략 설명)을 표시합니다
- audio : 멀티미디어 중 음악에 해당하는 부분을 표현할때 사용합니다. API 제공.
- embed : 플러그인 콘텐츠를 표시합니다.
- mark : 텍스트에 형광펜으로 칠한 것과 같은 강조 효과를 나타낼 때 사용합니다.
- pregress : 시간이 걸리는 작업과정을 막대로 표시합니다.
- meter : 측정값을 표시합니다.
- time : 날짜나 시간을 표시합니다.
- ruby, rt, rp : 루비 문자를 표현합니다.
새로 추가된 속성, 계속 사용할 수 있는 태그
- media : 링크할 미디어를 지정합니다.
- hreflang : 링크하는 대상의 언어를 지정합니다.
- rel : area가 포함된 무서와 area가 링크하는 대상 간의 관계를 지정합니다.
- target : href 속성에서 지정한 링크의 target을 지정합니다.
- value : 첫번째 항목의 값을 지정합니다. html4에서는 사용하지 않도록 권고했었지만 html5에서는 ol 태그안에 있는 li 태그에서만 사용할 수 있습니다.
- autofocus : 입력 필드에 포커스를 줍니다. input type="hidden" 일때는 제외합니다.
- placeholder : 입력 필드에 힌트 내용을 푯시합니다. 입력을 하기 위해 필드 내부를 클릭하면 힌트내용은 사라집니다. 검색창같은 곳에 미리 검색이라고 써 놓은 경우입니다.
- repuired : 필수 입력 필드를 설정합니다.
- autocomplete : 자동 완성 기능을 켜거나 끕니다.
- min, max : 입력 필드에서 숫자나 범위를 지정할 때 값의 최소값, 최대값을 지정합니다.
- multple : 입력 필드에서 값을 여러개 허용합니다.
- pattern : 입력 필드에서 조건을 사용한 일반식을 표현합니다.
html5에서 의미가 변한 속성 태그
- adress :html4에서는 이름,이메일주소,전화번호등으로 사용했었습니다. 하지만 html5에서는 실제 우편물 주소로 사용됩니다.
- b :텍스트를 진하게 표시할 뿐만 아니라 제품 소개서안의 제품명 이라든가 요약문서안의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시할때 사용합니다
- hr :단순한 가로줄이였지만 html5에서는 단락 단위로 주제를 바꾸려고 할 때 사용합니다.
- i :텍스트를 기울어지게 표시할 뿐 아니라 중요한 정보가 들어있지 않은 주변 요소로부터 텍스트를 따로 표시할때 사용합니다.
- menu :실제 문서 메뉴 정보를 제공하는데 사용합니다.
- small :세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시할 때 사용합니다
- strong :단순이 진하게 표시하는 것보다 더 중요한 정보를 표시할 때 사용합니다.
html5에서 없어진 태그
- basefont , big , center , font , frame , frameset , noframes , s , strike , tt , u
table 웹 표준
- tr(Table Row): 행(줄) 생성
- td(Table Data cell) : 셀(칸, 열) 생성
- th(Table Header) : 제목 셀 (기본적으로 볼드 속성과 센터 속성을 가짐)
- colgroup : 열 묶음 집합 table 태그의 바로 아래 위치하며 같은 순서에 있는 열들을 쉽게 관리하기 위해 사용. (크롬 브라우저의 경우 caption과 같이 사용할 경우 특정 문제가 발생할 가능성이 있으므로 주의해서 사용해야 합니다.)
- col : 열 묶음 (열의 그룹화)
- caption : 표의 제목 (화면상에 표시됨)
- summary : table 요약 (alt와 비슷하게 화면상에 표시되지는 않음)
- thead, tbody, tfoot : 테이블의 데이터들을 목적에 맞게 분류하고 해당 부분이 없는경우 생략이 가능합니다.
- scope : 제목 셀(th)의 진행 방향을 지정 해 줍니다. (낭독기가 방향을 잡을 수 있음) col(열), rows(행) 으로 선언해줘야 함
<table title="제목" summary="요약" width="340"> /전체 테이블 내용 요약 입력/ <caption>동부 농구팀 순위 </caption>/테이블 의 제목/ <colgroup> <col width="120"/> <col width="100"/> <col width="60"/> <col width="60"/> </colgroup> <thead> <tr>/제목셀, 볼드 지정 가운데 정렬 자동 설정/ <th scope="col">팀명</th>/스크린리더기 음성인식부분,읽는방향 행방향 제시/ <th scope="col">디비젼</th> <th scope="col">승</th> <th scope="col">패</th> </tr> </thead> <tfoot> <tr> <td colspan="4">자료제공:naver.com</td> </tr> </tfoot> <tbody> <tr> <th scope="row">아틀란타</th>/스크린리더기 음성인식부분,읽는방향 행방향 제시/ <td>ATT</td>
- 아래 코드를 보면 과일에(th) scope="col"이라고 적용
.과일이라는 제목셀부터 사과, 바나나 순으로 읽으라는 뜻이에요
<table> <thead> <tr> <th scope="col">과일</th> <th scope="col">자동차</th> <th scope="col">국가</th> <th scope="col">가수</th> </tr> </thead> <tbody> <tr> <td>사과</td> <td>BMW</td> <td>대한민국</td> <td>마이클잭슨</t>> </tr> <tr> <td>바나나</td> <td>아우디</td> <td>미국</td> <td>비욘세</td> </tr> </tbody> </table>
결과는 이렇게 나옵니다.
- 아래 코드를 보면 월요일(th)에 scope="col"을 적용하고
날씨(th)에 scope="row"라고 써주면,월요일 -> 날씨 -> 맑음 으로 읽혀지게 돼요.
<table>
<thead>
<tr>
<th></th>
<th scope="col">월요일</th>
<th scope="col">화요일</th>
<th scope="col">수요일</th>
<th scope="col">목요일</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">날씨</th>
<td>맑음</td>
<td>흐림</td>
<td>비옴</td>
<td>비옴</td>
</tr>
<tr>
<th scope="row">습도</th>
<td>높음</td>
<td>적당함</td>
<td>낮음</td>
<td>낮음</td>
</tr>
</tbody>
이렇게 나옵니다
