Tags
- 대표적으로 p, a, div, span, break, script가 있다.
p
목적
- 단락(paragraph)을 들여쓰기나 서식을 줄 떄 사용
예시
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
color: blue;
font-size: 30px;
font-weight: 700;
text-align: center;
}
</style>
</head>
<body>
<p>Paragraph!</p>
</body>
</html>a
목적
- 사이트 링크, 다운로드 링크 등 다른 페이지로 이동하는 하이퍼링크를 표현함
- 목적지를 알려주는 href 속성과 함께 쓰임
예시
<a href = "https://www.google.com">Google</a>
div
목적
- HTML 문서의 섹션을 나누어, 섹션 전체에 CSS를 적용하거나 자바스크립트 인자로 사용 가능
- p와 div의 차이
- p는 중첩 안 됨. p 안에 p 안 됨.
- div 안에는 div, p 모두 담을 수 있음.
예시
<html>
<head>
<style>
div {
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div>div!</div>
</body>
</html>span
목적
- span 자체는 아무런 변화도 안 줌
- span 태그에 CSS, javascript를 적용할 수 있음.
- p, div, span의 차이
- p와 div는 block-level element이고, span은 inline element임.
- 시각적으로, p와 div는 가로 전체를 차지함. span은 텍스트 부분만 차지함.
- background color를 초록색으로 지정하면, p와 div는 가로 줄 전체를 초록색으로 칠하는데, span은 텍스트 부분만 초록 배경이 된다는 뜻.
- span은 p, div를 포함할 수 없음.
예시
<!DOCTYPE html>
<html>
<head>
<title>
GeeksforGeeks span tag
</title>
<!-- style for span tag -->
<style>
span {
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<span>span!</span><br/>
</body>
</html>break(br)
목적
- 줄바꿈
예시
<br>
script
목적
- 클라이언트사이드 스크립트 혹은 외부 자바스크립트를 추가
예시
<!DOCTYPE html>
<html>
<body>
<p id="text"></p>
<script>
document.getElementById("text").innerHTML = "Hello!";
</script>
</body>
</html>'HTML' 카테고리의 다른 글
| 9. HTML Lists (0) | 2024.07.08 |
|---|---|
| 8. HTML Tables (0) | 2024.07.08 |
| 6. HTML Entities (0) | 2024.07.08 |
| 5. HTML Heading, Links, Images, Semantics (0) | 2024.07.07 |
| 4. HTML Attributes (0) | 2024.07.07 |