이번 HTML 포스팅은 "HTML5+CSS3 웹 표준의 정석"이라는 책의 레포지터리를 참고한다.
https://github.com/oldcast1e/HTML5-CSS3
GitHub - oldcast1e/HTML5-CSS3: (2020년판) "HTML5+CSS3 웹 표준의 정석" 에서 사용하는 실습 파일입니다.
(2020년판) "HTML5+CSS3 웹 표준의 정석" 에서 사용하는 실습 파일입니다. Contribute to oldcast1e/HTML5-CSS3 development by creating an account on GitHub.
github.com
책의 저자의 레포지터리를 포크 한 나의 깃허브 레포지터리이다.
마크업과 태그
앞선 포스팅에서 HTML은 웹 문서에 '마크업'하는 언어라고 설명을 했다.
https://udangtangtang-cording-oldcast1e.tistory.com/130
#1. HTML이란 무엇인가?
4.18 입대 후 처음으로 올리는 코딩 블로그이다. 예전의 실력이 죽지 않도록 간간히 포스팅하도록 하겠다. HTML이란 무엇일까? 파일의 형식 컴퓨터에서 사용하는 모든 파일에는 각각의 고유의 형
udangtangtang-cording-oldcast1e.tistory.com
이때 마크업이란 텍스트와 이미지를 구분하기 위해 표시하는 것을 말하며, 마크업 할 때 사용하는 약속된 표기법을 태그라고 한다.
태그는 웹 문서에 표시하려는 내용을 전달하는 언어이므로 정확히 사용해야 함에 유의한다.
| 마크업 | 텍스트와 이미지를 구분하기 위해 표시하는 것 |
| 태그 | 마크업을 사용할 때 사용하는 약속된 표기법 |
태그의 사용법
1. 태그는 <>를 이용하여 구분한다.
- 웹 문서 소스에는 태그뿐만 아니라 웹 문서의 내용까지 들어있지만 이때 <>로 묶인 부분이 HTML 태그이다.
- 어느 부분에 어떤 태그를 사용할지는 HTML의 명세서를 이용하여 사용한다.
이미지 추가(image): <img>
문장 추가(paragraphy): <p>
2. 태그는 소문자로 작성한다.
- HTML 태그는 대/소문자를 구분하지 않지만, HTML5 표준 명세서에서는 태그와 태그 안에서 사용하는 모든 속성을 소문자로 작성하기를 권한다.
| 올바른 예 | <img scr ="image/first.jpg"> |
| 틀린 예 | <IMG scr ="image/first.jpg"> |
3. 여는 태그와 닫는 태그를 정확히 입력한다.
- 여는 태그와 닫는 태그가 한 쌍이 되도록 주의한다.
4. 태그는 속성과 함께 사용할 수 있다.
HTML 태그는 단순히 태그하나만 사용될 뿐만 아니라 태그에 여러 기능을 추가하는 속성과 함께 사용할 수 있다.
코드 예시
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
'JavaScript > [1] HTML5의 기본' 카테고리의 다른 글
| #3. 웹 문서 작성 및 업로드 (0) | 2022.09.16 |
|---|---|
| #2-2. HTML 문서 실습하기 (1) | 2022.09.15 |
| #1. HTML이란 무엇인가? (0) | 2022.08.28 |
