개발 일기
HTML 태그 활용해보기(feat. <title>, <body>, <div>, <p>, <pre>) 본문
안녕하세요.
오늘은 이클립스를 통해 직접 HTML5를 간단히 코딩해보고 결과 화면을 정리해보겠습니다.
1. title, body
- <title>해당 부분에 내용 기재 시 웹 브라우저 탭 제목?으로 노출됨</title>
- <body>해당 부분에 내용 기재 시 웹 브라우저 페이지안에 내용으로 노출됨</body>
-- 예시
<!DOCTYPE html>
<!-- html5문서 (rule)-->
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 문서구조</title>
</head>
<body>
<!-- 문서의 내용 -->
HTML5 문서입니다.
</body>
</html>-- 결과
- <title>태그 내 기재한 "HTML5 문서구조" 내용이 웹 브라우저 환경에서 타이틀로 삽입
- <body>태그 내 기재한 "HTML5 문서입니다." 내용이 브라우저 내 삽입
2. div
- <div>해당 영역에 내용 기재 시 1줄(행)으로 표기됨</div>
-- 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div 연습</title>
</head>
<body>
<div>div content1</div>
<div>div content2</div>
<div>div content3</div>
</body>
</html>
-- 결과
- <div>태그 내 기재한 내용이 웹 브라우저 페이지 내에서 1줄씩 삽입
3. p
- 문단을 표시하는 마크업
-- 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>p 요소 연습</title>
</head>
<body>
첫번째문장<br>
두번째문장<br>
세번째문장<br>
<div>영역1</div>
<div>영역2</div>
<div>영역3</div>
<!-- p : 문단을 표시하는 마크업 -->
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<p>세 번째 문단세 번째 문단세 번째 문단
세 번째 문단세 번째 문단<br>
세 번째 문단
</p>
</body>
</html>-- 결과
-- br과 div와 p의 노출되는 차이 구분
4. pre
- html body내 입력한 그대~~~로 나오게 할 때 사용하는 태그
- html문서 내에서는 띄어쓰기(2번부터)나 줄바꿈, 특수문자등은 html에 맞는 태그들로 사용을 해야함
-- 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>pre 요소 연습</title>
</head>
<body>
<!-- html 문서 내에서 복수의 공백, 탭, 줄바꿈은 하나의 공백으로 치환 -->
hello
there !!!
<br>
<!-- 명시적으로 공백을 표시할 때 사용 -->
hello there !!!
<br>
<!-- 특수문자표시 -->
♥♥♥♥♥♥♥♥♥♥♠
<br>
<오늘은 HTML공부를 합니다.>
<!-- 명시적으로 줄바꿈을 표시할 때 <br /> 사용 -->
<br>hello<br><br>there !!!
<!-- pre : 문서 편집 내용을 그대로 표시 -->
<pre>
------------------------------------------
hello
there !!!
--------------------------------------------
</pre>
</body>
</html>
-- 결과
- html에서 복수의 공백, 줄, 탭 등은 전부 하나의 공백으로 치환되서 노출됨
- = 명시적으로 공백을 표시할 때 사용
- < = < 표시
- > = > 표시
감사합니다!
'HTML5' 카테고리의 다른 글
| HTML 태그 활용해보기 3(feat. form태그와 hyperlink태그) (0) | 2021.08.03 |
|---|---|
| HTML 태그 활용해보기 2(feat. <list>, <table>, <span>, <iframe>) (0) | 2021.08.01 |
| HTML5란?? (feat. HTML5, CSS, Javascript) (1) | 2021.07.28 |
'HTML5' Related Articles
more
Comments