HTML 기본은 알고가자(3탄) : HTML 문서선언, html tag, head tag, page title, 웹페이지링크, 같은페이지내 링크

컴퓨터 알아가기/HTML CSS 2021. 2. 18. 19:30

728x90

이제 HTML 3번째 시간으로 지난 시간까지는 전체적인 HTML에 대한 기본 개념에 대한 소개였습니다. 그리고 Codecademy에서는 하나의 과정이 완료될 때 마다 다음 그림과 같은 인증도장을 찍어주는데 시각적으로나 기분적으로나 나쁘지는 않습니다.

이제 본격적으로 HTML 표준을 보면서 진도를 나가고자 합니다.

▒ Preparing for HTML (HTML 문서준비, HTML 문서선언)

HTML을 시작할 때 웹브라우저에 우리의 문서를 사용한다는 문서타입을 선언해 주어야 합니다. 2021년 2월 현재 HTML 5 문서가 사용되고 있습니다.

문서타입 선언은 맨 처음 1행에 해야합니다. 방식은 다음과 같습니다.

▒ <html> tag

문서타입 선언이 끝난 후 <html> 태그를 오픈하고 </html> 태그를 닫아야 비로서 그 안에 있는 내용이 HTML 코드로 해석이 됩니다.

다음을 참조하세요.

▒ The Head : <head> tag

페이지 자체에 대한 정보를 제공하는 태그를 <head> 태그라고 합니다. head 요소에는 웹페이지의 메타데이타(HTML metaphor>가 포함이 되어 있습니다.

드디어 meta에 대한 내용이 나오는 군요. 우리가 네이버 다음 구글에서 웹마스터 도구를 사용할 때 <head>섹션내에 meta 데이타를 입력한 기억이 나실겁니다.

metaphor는 사전에 어떤 특성을 대체하여 나타내는 말로 HTML에서는 정보전달의 역할을 합니다. 그래서 모든 meta 값을 <head>와 </head>사이에 배치하라고 하는 겁니다. 검색엔진이 잘 찾아서 읽어내기 위해서.

다음과 같이 코딩합니다. 간단합니다.

▒ Page Titles (페이지 제목)

head 태그에서 설명했듯이 검색엔진이 정보를 읽어낼 수 있는 metadata 섹션입니다. 이를 위해서 다음과 같이 웹페이지가 설명하는 페이지의 타이틀을 다음과 같이 코딩하여 진행할 수 있습니다.

상기 타이틀은 웹브라우저 맨 상단위에 나타나게 됩니다.

▒ Linking to Other Web Pages (다른 웹페이지에 링크하기)

HTML의 기본 구조중 하나가 Hyper Text입니다. Hyper 자체가 링크를 건다라는 의미를 가지고 있기때문에 웹상에서 다른 페이지를 연결시키는 구조가 가장 기본이라고 보시면 되겠어요.

이미지나 동영상 링크를 거는것 처럼 다른 웹페이지 예를 들어 wikipedia 공식홈페이지 링크를 걸고자하면 다음과 같이 합니다.

여기서 a 태그가 등장합니다. a 태그는 anchor(닻)의 약자입니다. 가고자 하는 사이트에 닻을 내린다고 보시면 될 것 같아요. 즉, 다른 사이트에 링크를 하기 위해서는 a 태그와 href 명령어가 필요합니다.

href는 hyper text reference의 줄임말로 영어 그대로 링크문장 참조라는 뜻입니다.

링크페이지를 마우스로 클락할 때 보통 페이지가 바뀌면서 해당 페이지로 들어가게 되는데 새로운 윈도우창을 뛰우고자 할때는 target속성에 "_blank"라고 지정해주면 새페이지가 열리게 됩니다.

참고로 다음과 같이 사용합니다.

▒ Linking to Relative Page (내부페이지간 연결)

외부페이지 링크에 대한 개념은 쉽게 이해할 수 있는데 내부페이지간 링크라는 개념은 다음 그림을 통해 쉽게 이해할 수 있습니다.

상기 그림에서 Brown Bear를 클릭하면 Brown Bear에 대한 설명이 나오게 되고 About Me를 누르면 About Me 에 대한 설명이 같은 페이지에서 나오게 됩니다. 향후 웹페이지에서 Navigation Bar에 대해 공부할 기회가 있을텐데 비슷한 개념으로 이해하시면 되겠습니다.

이는 a 태그로 링크를 걸때 설명이 나오는 페이지 링크 위치를 root directory로 설정하면 됩니다. 상기 예제에 대한 HTML 코드는 다음과 같이 나타냅니다. root directory, 같은 디렉토리를 지정하는 명령어는 ./ 입니다.

▒ Linking At Will (연결 확장)

그런데 우리가 웹사이트를 방문해보면 일반 문장에 링크가 설정되어 있는 곳도 있지만 그림이나 다른 콘텐츠를 통해서 다른 웹페이지나 다른 내용을 볼 수 있는 경우가 많습니다.

사진 자체를 링크할 경우 a 태그안에 img src 명령어를 같이 사용합니다. 다음 예를 보시면 충분히 이해가 되리라 생각됩니다.

▒ Linking to Same Page (같은 페이지내 링크)

웹페이지 한페이지당 콘텐츠 내용이 많은 경우나 같은 페이지라도 각 주제별로 링크를 통해서 내용을 전달할 필요가 있습니다. 다음 도식처럼 A주제에 대한 링크를 클릭하였을때 밑으로 이동하여 A주제에 대한 설명이 바로 보이게 만들경우 이전 시간에 언급했던 속성이름(Attributes Name)과 속성값(Attributes Value)을 이용히면 됩니다.

보통 속성이름을 id로 나타내고 id 값에 #기호를 사용함으로 같은 페이지내 이동을 할 수 있습니다.

예를 들어 순서목록(Ordered list)에서 첫번째 div 태그의 id값을 "introduction"으로 설정해 놓으면 첫번째 링크를 클릭하면 introduction page로 이동합니다.

상기 코딩처럼 되어 있을때 웹페이지는 다음과 같이 나타납니다.

만일 introduction 단어를 누르면 같은 페이지내 introduction 속성값이 걸려있는 섹션으로 다음과 같이 이동하게 되어 있어요.

조금씩 HTML에 대한 내역을 알아가고 있습니다. 천천히 천천히 이해만 하고 가더라도 많은 도움이 되실겁니다. 다음에 또 뵙도록 할게요

'컴퓨터 알아가기 > HTML CSS' 카테고리의 다른 글

HTML 기본을 알고가자(5탄) : 테이블 그리기 기본개념 완성 (0)	2021.03.02
HTML 기본은 알고가자(4탄) : 공백, 테이블 만들기 (0)	2021.02.24
HTML 기본은 알고가자(2탄) : 속성, 글씨쓰기, Text꾸미기, 줄바꿈, 순서 및 비순서 목록, 이미지 및 동영상 삽입 (0)	2021.02.17
HTML 기본은 알고가자 (1탄) : HTML구조, Body 태그, P 태그, Head태그, Div 태그 (0)	2021.02.16
HTML 기본은 알고 가자 (0)	2021.02.15

ABOUT ME