● HTML은 마크업 언어로 웹 문서를 작성하며, tag를 사용하여 문서의 구조등을 기술하는 언어이다. [HTML 구조
● HTML 문서는 'tag'로 만들어지고 문서의 전체 구성은 <html>, <head>, <body> tag로 구성된다.
tag(태그)
- 문서에 하이퍼텍스트, 표, 목록, 비디오 등을 포함할 수 있는 Tag(태그)를 사용하여 Web Browser에 표현 - tag는 시작 tag와 종료 tag로 쌍을 이루거나 시작 tag만 존재하는 tag도 있다. - 시작 tag(<tagname>)와 종료 tag(</tagname>)는 '/'로 구분하며 중첩되지 않도록 한다. - 각각의 tag는 속성과 속성의 값이 존재한다. [tag와 속성]
속성
- HTML tag에는 어느 tag에나 넣어서 사용할 수 있는 글로벌 속성(global attribute)이 있다.
글로벌 속성
설명
class
-tag에 적용할 스타일의 이름을 지정한다. CSS에서 주로 사용한다. - 값의 중복이 가능하다.
dir
-내용의 텍스트 방향을 지정한다. 좌/우 정렬과 비슷한 형태로 표현 ex) 왼쪽 → 오른쪽 <p dir="ltr"> 오른쪽 → 왼쪽 <p dir="rtl">
id
- tag에 유일한 ID를 지정한다. JS에서 주로 사용한다. - 값의 중복이 불가능하다. (유일한 값)
style
-인라인 스타일을 적용하기 위해 사용한다.
title
-tag에 추가 정보를 지정한다. -tag에 마우스 포인터를 위치시킬 경우 title의 값 표시한다.
HTML 기본 구성
●시작 tag(<tagname>)와 종료 tag(</tagname>)가 있으며, tag 사이에 문서 내용을 정의한다. ●각 tag는 고유의 의미를 가지고 있으며, Web Browser는 이 의미에 따라 문서를 화면에 표시한다.
●문서 머리글(Head): 제목, 검색엔진에서 사용할 키워드,기타 정보 1. 문서 머리글(head), 제목(title) - <head> tag는 브라우저에게HTML문서의 머리 부분임을 인식시켜준다. - <title>, <meta>, <style>, <script>, <link> tag를 포함 가능하다. - <title> tag : 문서의 제목을 의미,브라우저의 제목 표시줄에 tag 내용이 나타난다. - <title> tag 이외의 다른 tag로 표현한 정보는 화면에 출력되지 않는다. 2. 메타 데이터(meta)
- 문서의 작성자, 날짜, 키워드 등 브라우저의 본문에 나타나지 않는 정보를 나타낸다. - name과 content 속성을 이용하여 다양한 정보를 나타낸다. - http-equiv 속성을 이용하여 인코딩 설정 및 문서이동, 새로 고침이 가능하다. - charset 속성을 이용하여 문서의 인코딩 정보를 설정한다.
●문서 본체(Body) : 문서의 내용 1. body - <body> tag는 브라우저에 보여질 문서의 내용을 작성한다. -<head> tag 다음에 위치하고 <head> 내부에 위치하는 tag와 <html>을 제외한 모든 tag를 상용할 수 있다. -id 속성을 이용하여 문서 내에서tag를 유일하게 식별 가능하다.(중복x) -class 속성을 이용하여여러 tag에 공통적인 특성(css)를 부여한다.(중복o)
2. heading -<h> 태그는 문단의 제목을 지정할 때 사용(다음 게시글에서 확인) - <section> tag를 이용하면 tag를 서로 다르게 표현할 수 있다. - 문서 구조를 <section> tag를 이용하여 구분하면 각 문단의 제목을 하나의 tag로 작성가능하다.
<!-- --> : 주석 - 주석의 내용은 브라우저에 출력되지 않고 tag의 내용을 부가 설명하기 위한 용도로 사용한다. - 눈에는 보이지 않지만 소스에서는 보이기 때문에 유의해야 한다.
● 소스코드 (<body> 내부에 입력)
<h1>첫 번째로 큰 글자 (크기 200%)</h1>
<h2>두 번째로 큰 글자 (크기 150%)</h2>
<h3>세 번째로 큰 글자 (크기 120%)</h3>
<h4>네 번째로 큰 글자 (크기 100%)</h4>
<h5>다섯 번째로 큰 글자 (크기 80%)</h5>
<h6>여섯 번째로 큰 글자 (크기 70%)</h6>
<section>
<h1>섹션 1</h1>
<section>
<h1>섹션 1-1</h1>
<section>
<h1>섹션 1-2</h1>
</section>
</section>
<h1>섹션 2</h1>
</section>
● 결과
첫 번째로 큰 글자 (크기 200%)
두 번째로 큰 글자 (크기 150%)
세 번째로 큰 글자 (크기 120%)
네 번째로 큰 글자 (크기 100%)
다섯 번째로 큰 글자 (크기 80%)
여섯 번째로 큰 글자 (크기 70%)
섹션 1
섹션 1-1
섹션 1-2
섹션 2
특수문자
엔티티를 모두 외울 필요는 없지만 &, <, > 이 세가지는 소스코드간의 충돌 방지로 가급적 엔티티를 사용하는 것이 좋다.
댓글