이전 강의에서 css와 html코드를 분리하므로써 불필요한 코드작성을 방지하고 가시성을 높였다.
이번에는 html의 기본 구조에 대해 실습해 보았다.
html의 기본 구조
● html은 크게 head와 body로 이루어져 있다.
● head에는 보통 style과 같은 메타 정보를 포함하는 (눈에 보이지 않고 정보에 대한 정보를 나타내는 ) 코드를 포함한다.
● body에 실질적으로 페이지에 보여지는 코드를 포함한다.
● <!DOCTYPE html>을 상단에 작성하여 html의 최신버전인 html5를 사용한다는 것을 브라우저에게 알린다.
● head부분에 title tag를 삽입하는데 이는 탐색기가 크롤링을 수행할 때 웹페이지의 제목이고 브라우저 탭에 쓰여질 텍스트이기도 하다.
소스코드
<!DOCTYPE html>
<head>
<style>
h1 {
font-family: sans-serif;
text-align: center;
color: #8f15c7
"
}
p{
font-family: sans-serif;
text-align: center;
color: #43ad43"
}
</style>
<title>My Daily Challenge</title>
</head>
<body>
<h1>Max 'Challenge for Wednesday, january 17th</h1>
<p>
Learn about the basics of web development - specifically dive into HTML &
CSS.
</p>
<p>
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resorces.</a>
</p>
</body>#용어 : head-style에 있는 p, h1을 css 선택자라고 한다.
실행결과
# 겉으로 바뀐 것은 없지만 브라우저에게 명시해 주었고 나중에 제3자가 코드를 볼 경우 파악하기 쉽다.
# 브라우저 탭에 title로 지정한 텍스트가 삽입된 것을 볼 수 있다.
'웹개발 > HTML, CSS 기초' 카테고리의 다른 글
| [html, css 기초] 11. css 아웃소싱 (0) | 2024.01.18 |
|---|---|
| [html, css 기초] 10. 링크 설정 기초 (0) | 2024.01.18 |
| [html, css 기초] 8. css - style (0) | 2024.01.18 |
| [html, css 기초] 7. 링크 만드는 방법 (0) | 2024.01.18 |
| [html, css 기초] 6. 코드 포멧 하는 방법 (0) | 2024.01.17 |
