HTML의 기본 구조와 링크 html, head, body, title, meta, a href
- Etc
- 2020. 11. 29. 13:20
HTML이라는 웹 언어를 공부하고 있습니다. 기초적인 사항이지만 배운 내용을 잊어버리지 않기 위해 바로 기록해놓습니다. 이번 글은 HTML의 기본 구조에 대한 설명입니다.
HTML의 기본구조
우리가 어떤 웹페이지에서 보게되는 화면은 HTML에서는 <body>태그 안에 나열된 수많은 태그들의 결과입니다. 그리고 이 <body>태그를 설명해주는(즉, 화면에 보이는 웹페이지를 설명해주는) 태그를 <head>태그라고 합니다. 이 <head>태그에는 웹페이지 제목과 어떤 인터넷 규약을 지키고 있는지를 설명해주는 태그입니다. 그리고 이 <body>태그와 <head>태그를 총괄하는 단 하나의 태그가 바로 <html>태그입니다. 예를 들어 살펴보겠습니다.
참고로 모든 HTML 문서를 작성할 때 선언문처럼 <!doctype html> 을 쓴다고 합니다. 먼저 간단한 코드를 다음과 같이 작성해보겠습니다. <html>태그가 가장 포괄적인 최상단의 태그이고, 그 안에 <head>태그와 <body>태그가 속해있습니다.
<!doctype html>
<html>
<head>
<title>굴리고 굴리는 블로그</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML언어 배우기</h1>
<p>HTML과 CSS언어를 배워서 블로그를 좀 더 재미있게 만들어봅시다.</p>
</body>
</html>html파일로 저장 후 웹브라우저로 표출해보면 아래와 같이 나타나는 것을 확인할 수 있습니다. 이처럼 <head>태그 안에 작성한 내용은 본문에는 나타나지 않고, <title>태그에 작성한 사항이 웹페이지의 제목으로 뜨는 것을 볼 수 있습니다. <title>태그는 책으로 따지면 책 제목과도 같은 것으로, 검색엔진에서 검색시 책 제목이 없다면 상단에 노출될 확률이 거의 없다고 합니다. 때문에 반드시 <head>태그 안에 <title>태그를 사용하여 제목을 써놓아야 합니다.
<body>태그 안에 작성한 <h1>태그와 <p>태그의 내용이 웹브라우저의 본문 부분에 표출되는 것을 확인할 수 있습니다. 즉, 본문 내용을 수정하려면 <body>태그 안에서 수정을 해야합니다.
링크 기능의 <a>태그
정보의 연결, 페이지간의 연결은 <a>태그가 없으면 불가능한 일입니다. 인터넷을 켜서 뉴스기사나 각종 글, 영상, 그림 등을 너무나도 쉽고 자연스럽게 보고 있는 것도 이 <a>태그가 있어 가능한 일입니다. 이처럼 <a>태그는 가히 정보의 혁명이라 불릴만큼 중요하다고 할 수 있습니다. <a>태그는 <a>태그 단독으로는 사용할 수 없고, 태그 안에 속성값을 넣어주어야 합니다. 다른 문서나 사이트로 연결하려면 연결할 주소가 필요하기 때문입니다. hypertext의 h와 reference의 ref를 붙여 href라는 속성값을 다음과 같이 사용해줍니다.
<!doctype html>
<html>
<head>
<title>굴리고 굴리는 블로그</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML언어 배우기</h1>
<p>HTML과 CSS언어를 배워서 블로그를 좀 더 재미있게 만들어봅시다.
블로그는 <a href="https://tistory.com" target="_blank">티스토리</a> 블로그를 쓰고 있습니다.</p>
</body>
</html>
메모장에 다음과 같은 코드를 입력 후 html확장자로 저장 후 화면에 표출해보면 아래와 같이 '티스토리'라는 단어에 링크가 걸린 것을 확인할 수 있습니다. <a>태그는 <a>티스토리</a> 이렇게 사용하면 '티스토리'를 눌렀을 때 어디로 가야할 지 알 수 없으므로 태그 안에 href라는 속성과 그 속성값을 써줍니다. 또 target이라는 속성과 _blank라는 속성값을 입력하면 링크를 눌렀을 때 새 창으로 뜨게 할 수 있습니다. 정리해보면 다음과 같습니다.
- 잘못 사용한 예 : <a>티스토리</a>
- 올바르게 사용한 예 : <a href="https://tistory.com">티스토리</a>
- 올바르게 사용한 예(새 창으로 열리게) : <a href="https://tistory.com" target="_blank">티스토리</a>
이러한 <a>태그를 통해 페이지와 페이지를 연결하여 하나의 웹사이트를 만들 수 있습니다. 메인페이지에 세부페이지1, 2, 3을 놓고 각각 링크를 걸어놓는 방식으로.
- 메인페이지 : index.html
- 세부페이지1 : 1.html
- 세부페이지2 : 2.html
- 세부페이지3 : 3.html
이상으로 HTML의 기본구조와 <a>태그에 대해 배운 내용을 정리해보았습니다. 하나씩 하나씩 알아가는 재미가 있습니다. 아직까지는 무리가 없습니다. 점점 어려운 내용이 나오더라도 배운 내용을 꼼꼼하게 정리해보면 분명 정복할 수 있을 것입니다.
쉬어가는 코너 - 인류 최초의 웹사이트(http://info.cern.ch)
강의 도중 선생님이 인류 최초의 웹사이트, 그러니까 웹사이트의 메소포타미아겪인 사이트를 알려주셨습니다. 바로 info.cern.ch라는 사이트입니다. 사이트에 들어가보니 home fo the first website 라고 나와있네요. 신기합니다. 전세계의 모든 웹사이트를 합치면 수억개가 될 것 같은데 그 중 처음 이 세상에 나타난 웹사이트라는 것입니다.
'Etc' 카테고리의 다른 글
| 보이지 않는 비용의 위력. 존 보글 (0) | 2021.01.02 |
|---|---|
| TIGER미국나스닥100 ETF(133690) 2020년 분배금 및 지급예정일 (0) | 2020.12.28 |
| 투자에 날개를 달아줄 수단으로써의 연금계좌 (11) | 2020.12.27 |
| ISA계좌 수익에 건보료 부과, 그래도 ISA계좌의 장점을 더 활용해야 (14) | 2020.12.17 |
| HTML의 h1, h2, h3, h4, h5, h6 태그(html h1 tag) (0) | 2020.11.29 |
| HTML의 li태그, ul태그, ol태그 (0) | 2020.11.29 |
| HTML 태그 중 가장 많이 쓰이는 태그 28가지 (0) | 2020.11.29 |
| 퇴직연금(DB,DC,IRP) 적립금 규모. 은행, 보험사, 증권사 순위 (0) | 2020.11.28 |