HTML이란?
HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.
- 웹 브라우저의 툴바(toolbar)에 표시됩니다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.
- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.
<h1> ~ <h6> : 제목(heading)을 나타냅니다.
<p> : 단락(paragraph)을 나타냅니다.
<시작태그> </종료태그>
태그사용시 열어주고 닫아준다
<img> <br> <hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(empty tag)라고 합니다.
<태그이름 속성이름="속성값">
<img src="quotes.jpg" alt="이미지가 없어요">
이미지 사용시 alt 필수
속성값을 감쌀 때는 보통 큰따옴표("")가 사용되며, 작은따옴표('')도 사용할 수 있습니다.
HTML 기본 예제 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Intro</title>
</head>
<body>
<h1>긁지않은 개발자!!</h1>
</body>
</html>실행 결과
긁지않은 개발자!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>긁지않은개발자 제목1</h1>
<h2>긁지않은개발자 제목2</h2>
<h3>긁지않은개발자 제목3</h3>
<p>긁지않은개발자 단락1</p>
<p>긁지않은개발자 단락2</p>
</body>
</html>실행 결과
긁지않은개발자 제목1
긁지않은개발자 제목2
긁지않은개발자 제목3
긁지않은개발자 단락1
긁지않은개발자 단락2
h1~ h6 제목 크기가 점점 작아진다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>긁지않은개발자 제목1</h1>
<h2>긁지않은개발자 제목2</h2>
<h3>긁지않은개발자 제목3</h3>
<h4>긁지않은개발자 제목4</h4>
<h5>긁지않은개발자 제목5</h5>
<h6>긁지않은개발자 제목6</h6>
</body>
</html>실행 결과
긁지않은개발자 제목1
긁지않은개발자 제목2
긁지않은개발자 제목3
긁지않은개발자 제목4
긁지않은개발자 제목5
긁지않은개발자 제목6
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
줄을 나누고 싶어서
이렇게 줄을 나눠봤습니다.
과연 그대로 출력이 될까요?
긁 지 않 은 개 발 자 ~~
</p>
</body>
</html>실행 결과
줄을 나누고 싶어서 이렇게 줄을 나눠봤습니다. 과연 그대로 출력이 될까요? 긁 지 않 은 개 발 자 ~~
HTML은 줄바꿈이 인식이 안된다
<br>로 써줘야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
줄을 나누고 싶어서 <br/>
이렇게 줄을 나눠봤습니다. <br/>
<br/>
<br/>
<br/>
과연 그대로 출력이 될까요? <br/>
<br/>
긁 지 않 은 개 발 자 ~~ <br/>
</p>
</body>
</html>실행 결과
줄을 나누고 싶어서
이렇게 줄을 나눠봤습니다.
과연 그대로 출력이 될까요?
긁 지 않 은 개 발 자 ~~
'HTML > HTML 정리' 카테고리의 다른 글
| [HTML] HTML 서식 기본 (0) | 2023.05.30 |
|---|---|
| [HTML] HTML form 내부 태그와 속성들( input, textarea, label, select) (0) | 2023.05.30 |