학습목표
글자 태그, 목록 태그, 테이블 태그, 미디어 태그; html5에서 지원하는 기본 태그를 사용할 수 있습니다.
글자 태그
<h1>태그나 p, br, hr 과 같은 태그를 사용하지 않고 body에 그냥 텍스트를 집어넣어도 텍스트가 출력된다.
1. 제목과 본문
1) 제목 태그 h1 ~ h6
: margin-top과 margin-bottom이 정해져 있음
| h1 | h2 | h3 | h4 | h5 | h6 |
| h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } |
h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } |
h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } |
h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } |
h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } |
h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } |
font-size가 불규칙적으로 감소한다.
margin이 증가한다.
bold를 보면 웹브라우저마다, 운영체제마다 기본글꼴이 다르다는 것을 알 수 있다.
2) 본문 태그 p
| p { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; } |
br과 hr태그는 종료태그가 필요하지 않다
3) 본문 태그 hr
notion '---'
| hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; } |
4) 본문 태그 br
줄 바꿈
html에서는 enter키를 쳐도 인식하지 못한다.
margin이 따로 없다.
글자에 가까운 태그이기 때문에 다른 태그 내부에 삽입이 가능한 태그이다.
<p>
안녕하세요<br>
반가워요<br>
</p>h1~h6, p, hr태그는 모두 margin이 있다.
2. 글자 모양 태그
글자 모양 태그 내부에 제목태그 h1~h6와 본문태그 p, hr, br
1) b : bold, 굵은 글자
2) i : italic, 기울어진 글자
3) small : 작은 글자
4) sub : subscript, 아래 첨자
5) sup : superscript, 위 첨자
6) ins : insert, 밑줄 글자
7) del : delete, 취소선이 그어진 글자
8) u : 밑줄 그을 때 사용하는 태그
9) mark : highlighted 태그
10) em : emphasized text 강조된 텍스트
11) strong : strong emphsized text
ins vs u
<u>태그는 단순히 밑줄을 긋고 싶을 때 사용하고 <ins>x태그는 새로 추가된 내용을 의미할 때 사용하는 태그입니다.
1) <ins> 태그
html에서 사용되는 <ins> 태그는 insert라는 영어단어의 앞글자 3개에서 따온 태그로, 웹페이지의 새로 추가된 텍스트에 밑줄을 표시하는 경우에 사용하는 태그입니다.
2) <u>태그
html에서 사용되는 <u> 태그는 underline이라는 영어단어의 앞글자 1개에서 따온 태그로, 웹페이지의 텍스트에 단순히 밑줄을 표시하는 경우에 사용하는 태그입니다.
출처: https://okdream99.tistory.com/23 [okdream99]
b vs strong
b태그 안의 글자는 보이는 것만 바뀌고 주변 글자와 동일하게 취급되는 반면 strong태그 안의 글자는 아예 주변 글자와 다른 것을 취급된다.
<b>태그는 주변 텍스트와 구별하는 데 사용되는 반면에. <strong> 태그는 주변 텍스트보다 강조해야하는 텍스트를 나타내는 데 사용됩니다. b태그 안의 글자는 보이는 것만 바뀌고 주변 글자와 동일하게 취급되는 반면 strong태그 안의 글자는 아예 주변 글자와 다른 것을 취급된다.
출처: https://okdream99.tistory.com/22 [okdream99]
i vs em
i태그 안의 글자는 보이는 것만 바뀌고 주변 글자와 동일하게 취급되는 반면 em태그 안의 글자는 아예 주변 글자와 다른 것을 취급된다.
3. 하이퍼링크 a태그
<a> 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.
- 아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue)
- 방문했던 링크(visited link) : 밑줄, 보라색(purple)
- 활성화된(현재 마우스가 클릭하고 있는) 링크(active link) : 밑줄, 빨간색(red)
href(hyper reference)가 링크의 목적지를 가리키는 속성이기 때문에 a태그에 필수적으로 들어가야 합니다. 만약 href가 없다면 하이퍼링크없이 제시된 텍스트만 출력되며(a태그가 기능하지 않는다고 볼수 있습니다) target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없습니다.
href안에 작성하는 경로의 종류
-절대경로 : 전체 주소를 적는다.
-상대경로 : 현재 경로를 기준으로 상대적인 경로 표현을 통해 전체 주소를 다 적지 않은 것을 말한다.
웹페이지 파일(html파일)이 있는 경로를 중심으로 생략가능한(없어도 컴퓨터가 경로를 알아볼 수 있는) 것은 생략한다.
-아이디 경로 : <a href="#id명">
<a href="#"> //=> 페이지 최상단으로 이동
<a href="#top"> //=>id값이 top인 곳으로 이동
<a href="#id명"> //=>id값이 id명인 곳으로 이동
-메일 경로 : 해당 주소로 메일을 전송한다.
4. 특수기호를 위한 표기방법; 엔티티(entity)
: html 예약어(reserved characters)를 그 코드 그대로 사용하기 위한 문자셋
예약어를 막 사용해도 된다. 하지만, 가능하면 사용하지 말 것 https://validator.w3.org/
space공백(non-breaking space)
<
<(less than)
>
>(greater than)
---
&
&(ampersand)
"
"(quotation maker)
©
™
'대학강의정리 > 22.1 웹프로그래밍기초' 카테고리의 다른 글
| 2. html5 기본태그 중 테이블태그 (0) | 2022.04.19 |
|---|---|
| 2. html5 기본태그 중 목록태그 (0) | 2022.04.19 |
| 1. 웹 디버깅하기 (0) | 2022.04.18 |
| 1. html5페이지의 구조, 태그의 종류 (0) | 2022.04.18 |
| 1. 웹 페이지 기본 구조와 작성 방법 (0) | 2022.04.16 |
