K_blueprint
HTML5 기본 문서 만들기 본문
( 목 차 )
- HTML 페이지의 기본
- HTML의 태그란?
- HTML 기본 문서 만들기
1. HTML 페이지의 기본
- 웹 브라우저는 한 번에 하나의 HTML 페이지를 화면에 출력하게 되는데, 여기서는 HTML5에서 페이지가 어떻게 구성되는지를 살펴볼 예정입니다.
- HTML5에서 HTML페이지는 아래와 같이 <!DOCTYPE> 선언과 헤드, 바디 부분으로 구성됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--여기는 주석의 내용이 들어가는 자리입니다.-->
</body>
</html>▷ HTML 코딩 환경에서 ! + Enter를 눌렸을 때 만들어지는 HTML의 기본 뼈대입니다.
▷ 위의 <html>, <head>, <title>, <body> 4가지 태그는 필수 태그입니다.
▷ <head></head>로 감싸져 있는 부분은 통상 문서의 제목이나 본문을 설명하는 태그, JS코드, CSS스타일 시트 등이 포함됩니다.
▷ <body></body>로 감싸져 있는 부분 또한 JS코드를 포함할 수 있습니다. 글의 본문이나 주요 내용이 들어가는 부분입니다.
+ HTML문서 내에서의 주석문은 "<!--주석문-->"입니다.
+ <head>와 <body> 태그 사이에는 아무것도 들어갈 수 없습니다.
2. HTML의 태그란?
쉽게 말해 HTML의 문서를 구성하는 요소들이라고 할 수 있는데 100여 개가 있으며 목적에 따라 적합한 태그를 조합하여 문서를 작성하게 됩니다.
(태그 구성)
<img src="people.jpg" width="100" height="50" alt="사람입니다.">- <img : 태그 이름
- src="people.jpg" : 속성(attribute) -> (여기서 src는 "속성 이름", "people.jpg"는 "속성 값"입니다.)
- width="100" : 속성(attribute)
- height="50" : 속성(attribute)
- alt="사람입니다." : 속성(attribute)
(태그의 특징)
- 태그와 속성은 대소문자 구분이 없다.
- 속성 값에 불필요한 공백(띄어쓰기)이 들어가면 오류가 발생할 수 있다.
3. HTML 기본 문서 만들기
1. 타이틀 달기 - <title>
- 페이지의 타이틀은 "페이지의 제목"이며 브라우저의 타이틀 바에 출력된다.
- 타이틀은 <title> 태그를 이용하여 <head>내에서만 작성되어야 한다.
<title>타이틀 제목</title>
2. 문단 제목(장, 절, 소제목 등) 달기 - <h1> ~ <h6>
- HTML은 <h1> ~ <h6>의 총 6개의 태그를 제공하여 문단에 제목을 붙일 수 있다.
- h는 제목을 뜻하는 "heading"의 줄임말이며, <h1>이 가장 큰 제목이고 <h6>이 가장 작은 제목이다.
<h1>h1태그의 글입니다.</h1>
<h2>h2태그의 글입니다.</h2>
<h3>h3태그의 글입니다.</h3>
<h4>h4태그의 글입니다.</h4>
<h5>h5태그의 글입니다.</h5>
<h6>h6태그의 글입니다.</h6>
3. 툴팁 달기 - <title>의 속성
- 페이지의 본문에 마우스가 올라갈 때 설명문(툴팁)이 출력되도록 구현할 수 있다.
<h1 title="이런 식으로 툴팁을 출력할 수 있습니다!">h1태그의 글입니다.</h1>
4. 단락 나누기 - <p>
- HTML에서 문단은 여러 단락으로 나눌 수 있으며 하나의 단락은 <p> 태그로 표현한다.
- <p> 태그는 문단을 표현하기 때문에 </p>로 끝나는 문단 다음에는 자동으로 빈 줄이 생긴다.
<h1>단락 나누기 테스트 글입니다.</h1>
<p>
여기서는 단락이 어떻게 나뉘어지는지
볼 수 있습니다.
</p>
<p>
여러 개의 빈 칸은 하나로 취급되며, 띄어쓰기 또한
하나의 빈 칸으로 처리됩니다.
</p>
5. 수평선 긋기 - <hr>
- 문단 내에서 내용의 전환이 필요한 곳에 수평선을 삽입할 수 있다.
- <hr> 태그는 종료 태그가 없다.
<h1>수평선 긋기 테스트 글입니다.</h1>
<hr>
<p>위와 같이 수평선을 출력할 수 있습니다.</p>
6. 다음 줄로 넘어가기 - <br>
- HTML페이지에서는 Enter키를 쿨러도 한 개의 빈칸으로 처리되기 때문에 다음 줄로 넘어가지 않는다.
- <br> 태그를 사용하면 다음 줄로 넘어갈 수 있다.
<h1>줄 넘어가기 테스트 글입니다.</h1>
이러한 것 처럼<br>
br태그를 사용하여<br>
줄을 바꿀 수 있습니다.
7. 문자, 기호, 심볼 출력하기 - 엔터티or코드값
- HTML 문서에서 '<'나 '>'와 같이 예약어로 사용되고 있는 문자나 키보드로 입력할 수 없는 기호 또는 심볼들은 아래의 방법으로 입력을 가능하게 할 수 있다.
&엔터티; 또는 &#코드값;
즉, 엔터티를 활용한 예시로는 아래의 코드를 들 수 있는데
<hr>
10 ÷ 2=5<br>
√2 = 1.414<br>
<p><br>
이렇게 출력이 가능합니다.
코드 값을 활용하게 되면 기호에 맞는 코드 값을 암기해야 하기 때문에 보통은 엔터티를 많이 쓴다고 할 수 있다.
아래는 공백을 나타내는 엔터티 표현을 활용한 코드이다.
<hr>
2 < 3 <br>
이렇게 출력이 가능합니다.
-> 여기서" "는 "공백"의 엔터티 표현이며, "<"는 "부등호" 기호의 엔터티 표현이다.
8. 개발자 포맷 그대로 출력하기 - <pre>
- <pre> 태그를 활용하여 개발자가 입력한 포맷 그대로의 모습을 출력할 수 있다.
<pre>
보시는 것과 같이
따로 줄바꿈 태그를 사용하지 않아도
입력한 그대로의 모습이 반영되는 것을
확인하실 수 있습니다.
(ㅡ ㅇㅡ)/
</pre>
9. 텍스트 꾸미기 - <strong>, <em>, <b> 등
- 텍스트를 꾸미는 다양한 태그들이 존재한다.
<b>굵게</b>
<strong>중요한 내용</strong><br>
<em>강조 내용</em><br>
<i>이탤릭으로 강조</i><br>
<b><i>굵은 이탤릭으로 강조</i></b><br>
<small>한 단계 작은 문자</small><br>
<del>삭제</del><br>
<ins>추가(밑줄)</ins><br>
테스트<sup>윗첨자</sup><br>
테스트<sub>아래첨자</sub><br>
<mark>하이라이트!(마킹)</mark>
10. 블록 태그와 인라인 태그
- HTML태그들은 "블록 태그"와 "인라인 태그"로 나뉜다.
- 블록 태그 : <p>, <h1>, <div>, <ul> 등
- 인라인 태그 : <strong>, <a>, <img>, <span> 등
여기서 블록 태그와 인라인 태그의 의미를 짚고 넘어가자면
"블록 태그" >>> 항상 새 라인에서 시작하고 브라우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지한다.
"인라인 태그" >>> 블록에 삽입되어 블록 콘텐츠의 일부를 표현하는데 사용된다.
(이외에 많이 사용되는 태그 2가지!!)
- <div> 태그
- <p>와 함께 블록을 구성하기 위해 가장 많이 사용된다.
- <p> 태그는 문단을 만들기 위해 사용되지만, <div>는 특별한 의미 없이 여러 HTML 태그들을 블록으로 묶는 "컨테이너"로 이용된다.
- <span> 태그
- 텍스트 일부분에 특별한 모양을 줄 때 사용된다.
- 자바스크립트 코드로 텍스트 일부분을 제어하고자 할 때 주로 사용된다.
★ 해당 게시글은 "HTML5+CSS3+Javascript 웹 프로그래밍"을 참고하여 작성하였습니다! ★
'HTML & CSS & Java script' 카테고리의 다른 글
| HTML5의 문서 구조화 (10) | 2024.11.08 |
|---|---|
| 미디어(오디오, 비디오) 삽입하기 (4) | 2024.11.07 |
| HTML5로 '파일 다운로드 링크', '인라인 프레임' 만들기 (0) | 2024.06.04 |
| HTML5로 고급 문서 만들기 (0) | 2024.02.27 |
| 웹 프로그래밍과 HTML5의 개요 (0) | 2024.02.19 |
