2024. 4. 5. 23:10ㆍ프로그래밍 언어/HTML\CSS
HTML의 기본 구조
html 웹페이지 또한 마치 책처럼 제목, 본문, 번역 언어 등의 구조를 가지고 있다. 지금까지 우리가 만든 html들은 파일명이 제목이다. 이 파일들의 제목을 지정하기 위해서 <title> 태그를 사용한다.
<title> 태그는 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하므로 <title> 태그는 꼭 사용해야한다.
또, 한 번씩 웹페이지를 열다보면 아래와 같이 텍스트가 깨지는 것을 볼 수 있다.
이것은 작성하면서 사용한 인코딩 방식과 웹브라우저가 사용하는 인코딩 방식이 달라서 발생한다. 이 문제를 해결하기 위해 <meta> 태그를 사용한다. <meta> 태그는 웹 서버와 웹 브라우저간 상호 교환되는 정보를 정의하는데 사용한다. <head>태그 사이에 입력하는 특수 태그로, 디자인과는 무관하고 문서 자체의 특성을 담고있다.
메타태그에 대한 자세한 속성들은 다음에 알아보고 오늘은 인코딩 방식을 알려주는 방식만 알면 된다. charset 속성을 이용하여 인코딩 방식을 명시해주면 된다.
<meta charset="utf-8">이 title 태그와 meta 태그는 본문과는 관계 없이 본문을 설명하는 부분이다. 이 부분을 head 태그의 자식 태그로 사용하고, 본문은 body 태그로 사용한다. 또 body 태그와 head 태그를 html 태그로 감싸기로 약속했다.
그리고 이 웹페이지가 HTML로 만들어졌다는 것을 알려주기 위해 제일 위에 <!doctype html>을 추가한다. 이 태그를 추가하지 않으면 문서가 잘못 해석될 수 있으므로 꼭 추가해줘야 한다.
지금까지 배운 태그들을 정리하면 아래와 같다.
a 태그는 다른 페이지를 불러오는 하이퍼링크를 정의한다. HTML의 약자가 Hypertext Markup Language 인만큼 하이퍼링크를 정의하는 a 태그는 매우 중요하다.
이 a 태그의 가장 중요한 속성은 링크의 목적지를 가리키는 href 속성이다. 링크된 페이지는 보통 브라우저의 현재 윈도우에 표시되며, 어떻게 윈도우에 표시할지는 target 속성으로 설정할 수 있다.
a태그에서 꼭 알아야 할 속성들이 있다.
1. href
a 태그를 통해 연결할 주소를 지정한다. 주소는 다양한 방식으로 지정할 수 있다.
- 절대 경로 URL : <a href="http://naver.com">네이버</a>
- 상대 경로 URL : <a href="./user/main.html">메인 열기</a>
이 외에도 엘리먼트 ID를 이용한 URL, 자바스크립트 함수 호출 등이 있다.
2. target
링크를 클릭할 때 창을 어떻게 열지 설정한다.
- _self : 링크를 클릭한 해당 창에서 연다.
- _blank : 링크를 새 창으로 연다.
- _parent : 부모 창에서 연다. 부모 창이 없으면 _self 속성으로 처리한다.
- 여기서 부모 창은 창 A에서 창 B를 새로 열었으면 A창이 B창의 부모가 된다.
- _top : 전체 브라우저 창에서 가장 상위 창에서 연다.
- A -> B -> C 순으로 창을 연 경우를 생각해보자. C에서 _parent 속성을 가진 창을 열면 B에서 열리고 _top의 경우에는 A에서 열린다.
3. title
해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정한다.
사용 예시
'프로그래밍 언어 > HTML\CSS' 카테고리의 다른 글
| [HTML] 사용자 입력 받기 - <form>, <label>, <input> (0) | 2024.04.07 |
|---|---|
| [HTML] 웹페이지에 유튜브 삽입 - <Ifram> (0) | 2024.04.06 |
| [HTML] 웹사이트 간단하게 만들기 (0) | 2024.04.05 |
| [HTML] 부모 태그와 리스트 태그 <ul>, <ol>, <li> (0) | 2024.04.05 |
| [HTML] 줄바꿈<br> VS 단락<p>, <strong> vs <b> ,속성과 <img> (0) | 2024.04.05 |