주석
<!-- 주석처리됨 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No name</title>
</head>
<body>
<!-- 이 곳은 주석처리 구역입니다 -->
</body>
</html>
HTML의 대표적인 글자 태그.
h1 : 첫 번째로 큰 글자 태그
h2 : 두 번째로 큰 글자 태그
h3 : 세 번째로 큰 글자 태그
h4 : 네 번째로 큰 글자 태그
h5 : 다섯 번째로 큰 글자 태그
h6 : 여섯 번째로 큰 글자 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No name</title>
</head>
<body>
<h1>Hello HTML</h1>
<h2>Hello HTML</h2>
<h3>Hello HTML</h3>
<h4>Hello HTML</h4>
<h5>Hello HTML</h5>
<h6>Hello HTML</h6>
</body>
</html>실행결과
본문-1
p : 본문 글자 태그
- p태그를 사용하면 하나의 단락을 만들 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No name</title>
</head>
<body>
<p>[계상]내 <!-- <p>시작 -->
가 가는 이길이 어디로
가는지 어디로 날 데려가는지
그 곳은 어딘지 알
수 없지만
알 수 없지만 알 수 없
지만 오늘도 난
걸어가고
있네</p> <p>[준형]사람들은 <!-- </p>끝 그리고 <p>시작 -->
길이 다
정해져 있는지 아니면 자기가
자신의 길을 만들어
가는지 알 수 없지만 알 수
없지만 알 수 없지
만 이렇게 또 걸어
가고 있네</p> <!-- </p>끝 -->
</body>
</html>
<!-- 띄어쓰기를 막 해봄 -->실행결과
본문-2
br : 줄바꿈 태그
hr : 수평 줄 태그
태그 사용 전
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No name</title>
</head>
<body>
나는 왜 이 길에 서있나, 이게 정말 나의 길인가
이길의 끝에서 내 꿈은 이뤄질까
무엇이 내게 정말 기쁨을 주는지 돈인지 명옌지
아니면 내가 사랑하는 사람들인지 알고 싶지만
알고 싶지만 알고 싶지만 아직도 답을 내릴 수없네
</body>
</html>실행결과
br 태그 및 hr 태그 사용 후
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No name</title>
</head>
<body>
<hr>
나는 왜 이 길에 서있나, 이게 정말 나의 길인가<br>
이길의 끝에서 내 꿈은 이뤄질까<br>
무엇이 내게 정말 기쁨을 주는지 돈인지 명옌지<br>
아니면 내가 사랑하는 사람들인지 알고 싶지만<br>
알고 싶지만 알고 싶지만 아직도 답을 내릴 수없네<br>
<hr>
</body>
</html>
실행결과
pre : 보이는 그대로, 맘껏 띄어쓰기 할 수 있다. 그 모습 그대로 출력된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No name</title>
</head>
<body>
<pre>
나는 왜 이 길에 서있나, 이게 정말 나의 길인가
이길의 끝에서 내 꿈은 이뤄질까
무엇이 내게 정말 기쁨을 주는지 돈인지 명옌지
아니면 내가 사랑하는 사람들인지 알고 싶지만
알고 싶지만 알고 싶지만 아직도 답을 내릴 수없네
</pre>
</body>
</html>실행결과
앵커 태그
a : 앵커 태그
- a만으로는 웹 페이지로 이동하는 태그가 완성될 수 없다.
- href 속성을 사용하여 이동하고자 하는 웹 페이지 지정.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No name</title>
</head>
<body>
<a href="http://naver.com">네이버로 이동</a><br>
</body>
</html>실행결과
클릭하면
글자 형태
b : 굵은 글자 태그
strong : 굵은 글자 태그
i : 기울어진 글자 태그
small : 작은 글자 태그
sub : 아래에 달라 붙는 글자 태그
sup : 위에 달라 붙는 글자 태그
u : 밑줄 글자 태그
ins : 밑줄 글자 태그
del : 가운데 줄이 그어진 글자 태그
mark: 강조 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No name</title>
</head>
<body>
<p><b>굵은 글자</b> 태그</p>
<p><strong>굵은 글자</strong>태그</p>
<p><i>기울어진</i> 태그</p>
<p><small>작은 글자</small> 태그</p>
<p><sub>아래에 달라 붙는</sub> 태그<p>
<p><sup>위에 달라 붙는</sup> 태그<p>
<p><ins>밑줄 글자</ins> 태그<p>
<p><u>밑줄 글자</u> 태그<p>
<p><del>가운데 줄이 그어진</del> 태그</p>
<p><mark>강조 글자</mark> 태그</p>
</body>
</html>
<!-- 한 단락을 위해 <p>태그 사용 -->실행결과
'IT > Html + CSS + JS' 카테고리의 다른 글
| [Html+JavaScript] 미술관 및 박물관 링크 (0) | 2021.06.07 |
|---|---|
| [Html+JavaScript] "1일 1개씩 먹으면 의사 필요없다" (0) | 2021.06.07 |
| [Html+JavaScript] 버튼 클릭 시 홈페이지 배경색 변경 (0) | 2021.06.07 |
| [Html+JavaScript] 계산기 (0) | 2021.06.07 |
| [Html] List (0) | 2021.06.03 |
