1. HTML 개요
2. 글자 관련 태그
3. 목록 관련 태그
HTML은 HyperText Markup Language의 약자로 "간단히 웹 문서를 만드는 언어"이다.
- 하이퍼텍스트(Hyper Text)는 문서를 서로 연결해주는 링크를 의미
= 인터넷에서 링크를 클릭하여 다른 페이지로 쉽게 연결할 수 있다. - 마크업(Markup)은 "표시한다"는 의미
= 웹 브라우저에 텍스트,이미지,영상 등의 위치를 표시한다.
HTML의 특징
- 구조적 설계 지원(시멘틱)
- 그래픽 및 멀티미디어 기능 강화
- CSS3 및 Javascript 지원
- 다양한 API 제공
- 모바일 웹 지원 장치 접근 가능(배터리 정보, 카메라, GPS 등)
- 웹 브라이저가 서버와 양방향 통신 가능
- 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작
HTML의 구성요소
1. 태그 : < >로 묶인 명령어 (시작태그와 종료태그로 구성)
2. 속성 : 요소의 시작태그에만 사용하여 명령어를 구체화한다. 여러 개의 속성 사용 가능(속성의 구분은 공백)
3. 변수/속성값 : 속성이 가지는 값, 값 입력은" "or ' '
4. 요소 : 시작태그와 종료태그로 이루어진 모든 명령어-> 하나의 HTML문서는 요소들의 집합이다!
HTML의 주의사항
- 태그는 대소문자 구분하지 않으나 소문자 권장
- 시작태그로 시작하면 반드시 종료태그로 종료
- 파일확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇 개를 입력하든 한 개만 인식 (공백을 추가하려면 특수기호 &(and기호)nbsp; 이용
HTML의 기본 구조
- HTML문서는 정해진 형식에 맞추어 내용을 입력해야한다.
| 이름(생략되서 작성란 참고..) | 작성 | 설명 | 설명 |
|---|---|---|---|
| <느낌표 DOCTYPE html> | (!DOCTYPE HTML) | 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻 | |
| <htm엘> ~ </htm엘> | (html)~(/html) | 웹문서의 시작과 끝을 나타내는 태그 | lnag은 html태그 내부의 속성으로 문서에서 사용할 언어 지정 |
| <헤드head> ~ </헤드head> | (head)~(/head) | 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분 | 현재 문서의 정보와 제목, 설명, 스크립트, 스타일정보를 선언하는 영역 |
| <바디body> ~ </바디body> | (body)~(/body) | 실제로 웹 브라우저 화면에 나타나는 내용 | 화면에 출력해서 보여주는 모든 정보 및 내용들을 작성하는 영역 |
1. 헤드 영역은 웹 브라우저가 알아야할 정보 입력하는 영역으로 meta 태그와 title태그가 존재
- meta 태그 : 웹페이지에 대한 정보를 표시하기 위한 용도의 태그이며, 웹브라이저와 검색엔진에 의해 해석된다.
1. 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정(기본이 영어이므로 한글은 UTF-8 명시) <meta charset="UTF-8">2. 웹 사이트의 키워드, 간단한 설명, 제작자 등의 정보를 다음과 같이 지정 - 사용 프로그램 <meta name="generator" content="VScode"> - 웹문서 제작자 혹은 소유자 <meta name="author" content="cys"> - 문서 설명 <meta name="title" content="글자관련 태그를 공부하기 위한 페이지"> <meta name="content" content="p태그, h태그, strong 태그 등을 공부한다."> <meta name="description" content="p태그, h태그, strong 태그 등을 공부한다.">
- title 태그 : 웹 문서의 제목 입력
<title> 글자 관련 태그</title>2. 바디 영역은 문서의 내용부분을 의미하며 화면에 출력해서 보여주는 모든 정보 및 내용들을 작성하는 영역
바디에 작성할 텍스트를 입력하기 위해 글자 관련태그를 알아보자
1. 글자 관련 태그
(1) h 태그 : heading의 약어로 1~6까지의 숫자로 크기별 표시
- 자동 개행 처리되며 1이 제일 큰 텍스트
<h1>h1태그입니다</h1>
<h2>h2태그입니다</h2>
<h3>h3태그입니다</h3>
<h4>h4태그입니다</h4>
<h5>h5태그입니다</h5>
<h6>h6태그입니다</h6>h1태그입니다
h2태그입니다
h3태그입니다
h4태그입니다
h5태그입니다
h6태그입니다
(2) p 태그 : 텍스트 앞뒤로 빈 줄 생기면서 문단 영역을 나누는 태그
(3) br 태그: 개행처리 태그
(4) pre 태그: 입력한 내용을 100% 그대로 포함하는 태그
<p>
문단 영역을 나누는 태그 <br> <--개행을 위해서는 별도의 br태그를 추가-->
p는 (paragragh)의 약자. 비슷한 기능을 하는 태그로는 pre태그가 존재한다.
</p><pre>
pre 태그는 여러 공백들을 인식할 수 있고,
줄바꿈 등을 포함하여 입력한 내용을 "100%" 그대로 포함하는 태그
</pre>
(5) strong 태그 : 볼드체(경고표시)
(6) b 태그 : 볼드체(그냥 강조)
<strong>
strong은 글자를 굵게 표시하는 태그(볼드체)
</strong>
<b>
b: 글자를 굵게 표시하는 태그
</b>(7) etc 태그...
<em>
em(emphasize): 글자를 기울여서 표시하는 태그 = "그냥 문장의 특정 부분 강조할 때"
</em>
<i>
i(italic): 글자를 기울여서 표시하는 태그 = "이탤릭체" ,"용어, 관용구 등을 강조할 때"
</i>
<mark>
mark: 형광펜
</mark>
<u>
u(underLine): 글자에 밑줄이 그어지는 태그
</u>
<ins>
ins: 글자에 밑줄이 그어지는 태그
</ins>
<s>
s: 글자에 취소선을 넣어주는 태그(strike쓰지말고 s써라)
</s>
<del>
del: 글자에 취소선을 넣어주는 태그(s쓰지말고 del써라)
</del>
<abbr title="Internet Of Things">
IOT 축약형이라는 뜻 : 점선 밑줄
</abbr>
sub: 기본글자에<sub>아래 첨자</sub>를 추가할 때 사용
sup: 기본글자에<sup>윗첨자</sup>를 추가할 때 사용
<code>
코드로 표시 : System.out.println("Hello World");
</code>이것들을 활용해서 텍스트를 작성해보면 아래와 같다.
<h3>글자 관련 태그 응용1</h3> <p> 태그들은 해당 태그 내에서 중첩으로 사용 가능하다. <b>굵은글씨</b>를 사용할 수도 있고 <em>기울이거나</em>, <del>취소선</del>을 넣는 등 다양하게 사용할 수 있다 <br> <mark>형광펜</mark>을 넣어 글자를 강조할 수 있다. </p> <hr>글자 관련 태그 응용1
태그들은 해당 태그 내에서 중첩으로 사용 가능하다. 굵은글씨를 사용할 수도 있고 기울이거나,
취소선을 넣는 등 다양하게 사용할 수 있다
형광펜을 넣어 글자를 강조할 수 있다.
2. 목록 관련 태그
(1) 순서 없는 목록 태그 : ul (unordered list)
- 항목의 순서가 중요하지 않을 때 사용
<ul>
<li>
HTML
<!-- 목록 안에 또 목록 넣기 가능(넣고 또 넣고 목록) -->
<ul>
<li>글자관련</li>
<li>목록관련</li>
</ul>
</li>
<li>CSS</li>
<li>JS</li>
</ul>-
HTML
- 글자관련
- 목록관련
- CSS
- JS
단축키 참고
ul>li*5 는 아래와 같다. <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
(2) 순서 있는 목록 태그 : ol(ordered list)
- 항목의 순서가 중요할 때 사용하여 1부터 시작하는 숫자를 붙인다.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>- HTML
- CSS
- JS
- 숫자가 아닌 다른 값으로 시작하고 싶을 경우 TYPE 속성을 추가하여 변경한다.
1. 로마 숫자 대문자("i"는 로마 숫자 소문자)
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>- HTML
- CSS
- JS
2. 영문 소문자 ("A"는 영문 대문자)
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>- HTML
- CSS
- JS
3. start 속성을 이용하여 시작값 변경가능(알파벳 5번째부터 = e부터)
<ol type="a" start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>- HTML
- CSS
- JS
4. 속성값을 역순으로 표기 (reversed 예약어)
<ol type="a" start="26" reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>- HTML
- CSS
- JS
(3) 설명과 관련된 목록 태그 : dl(description list)
- 설명 목록(description list)은 이름과 값의 형태로 된 목록
- dt 태그: 이름(단어명) 부분 지정
- dd 태그: 값(설명) 부분 지정
<dl>
<dt>이름</dt>
<dd>값</dd>
</dl> <dl>
<dt>이곳은 제목을 작성하는 영역</dt>
<dd>설명을 작성하는 영역</dd>
<dd>추가보충 설명합니다</dd>
<dt>다음 제목입니다</dt>
<dd>설명입니다.</dd>
</dl>