728x90
더보기
Day35. 230619
HTML 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>웹 문서에는 <!DOCTYPE>과 <html>, <head>, <body> 네 가지 태그를 이용해 문서의 시작과 끝을 표시
텍스트 관련 태그들
<br> 태그 - 줄 바꾸기
<hr> 태그 - 수평 줄 넣기
- 공백
<strong> 태그, <b> 태그 - 굵게 표시하기
<q> 태그 - 인용 내용 표시하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서title</title>
</head>
<body>
나의 첫번째 html문서
두번째줄
<p>3번째줄</p>
<hr>
<font size="1">font1사이즈</font>
<font size="2">font2사이즈</font>
<font size="3" face="궁서체" color="blue">font3사이즈</font>
<font size="4" face="Terminal" color="darkblue">font4사이즈</font>
<font size="5" face="광수체" color="##0000ff">font5사이즈</font>
<font size="6">font6사이즈</font>
<font size="7">font7사이즈</font>
<hr>
<h1>h1태그</h1>
<h2>h1태그</h2>
<h3>h3태그</h3>
<h4>h4태그</h4>
<h5>h5태그</h5>
<h6>h6태그</h6>
<h7>h7태그</h7>
</body>
</html>
<span>태그
- 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용
ex)
<span style="color: blue;">파란색</span>
<pre> 태그와 <xmp> 태그의 차이
<pre> 태그
: 줄바꿈 할 필요가 없이 태그 안에 입력한 그대로 표시
<xmp> 태그
: 태그 안에 적힌 내용 그대로 표현. 태그까지 그대로 보여줌.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>pre</h2>
<pre>
pre태그를 이용
장미---;-<mark>@</mark>
<font size="7" color="green">=======;=</font><font size="7" color="red">@</font>
</pre>
<hr/>
<h2>xmp</h2>
<xmp>
xmp태그를 이용
장미---;-@
<font size="7" color="green">=======;=</font><font size="7" color="red">@</font>
</xmp>
</body>
</html>
HTML Block and Inline Elements
https://www.w3schools.com/html/html_blocks.asp
HTML Block and Inline Elements
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<p>태그
: paragraph(문단)의 약자로 하나의 문단을 만들 때 사용된다.
<div>태그
:division의 약자로 웹사이트의 레이아웃을 만들 때 주로 사용된다.
728x90
'개발 수업 > WEB' 카테고리의 다른 글
| [HTML] 링크만들기 (0) | 2023.06.20 |
|---|---|
| [HTML] table 태그 (0) | 2023.06.20 |
| [HTML] 표를 만드는 태그 (0) | 2023.06.19 |
| [Web] eclipse JSP 개발 환경 설정 (0) | 2023.06.19 |
| [web] TOMCAT을 이용한 웹서버 구축 (0) | 2023.06.19 |
