1.
오늘은 HTML의 구조를 작성하는 방법 및 정말 빈도수가 높은 태그를 살펴봅니다.
1)<title>~</title>이라는 태그입니다.
웹페이지의 제목을 사용자에게 명시적으로 알려주는 기능을 합니다.
검색 엔진과 같은 기계들은 바로 이 <title>이라노 하는 것을, 책으로 치면 책표지와 같은 정보로서 사용합니다.
따라서 타이틀 태그가 있고 없고는 웹페이지 검색률에 상당한 영향을 미친다고 합니다.
적용하는 방법은 웹브라우저의 제목으로 하고자하는 곳에 가서
열리는 곳 닫히는 곳에
<title>~</title>
을 입력합니다.
웹브라우저의 타이틀이 html3에서 Through it all로 바뀐 것을 볼 수 있습니다.
2) 이거는 조금 오늘 주제에서 벗어난 것인데요
웹페이지가 영어로 쓰여져 있는데 그 중에 한 부분을 한글로 바꾸고 싶어 아무 태그랑 속성도 사용하지 않고
웹페이지 한 부분을 한글로 고쳐 웹브라우저로 reload하면
한글로 안 나타나고 깨져서 나올 때가 있습니다.
그럴 때는
<meta charset="utf-8">
이라고 태그와 속성을 입력하면 정상적으로 웹브라우저에도 한글로 반영이 됩니다.
*char : character 이고 set : 문자
입니다.
3) <body>~</body>
라는 태그인데 "본문"을 나타냅니다.
4)이 본문을 감싸는 상위 태그는
<head>~</head>
입니다.
즉, html의 모든 태그는 <head> <body> 둘 중 하나의 아래에 놓이게 됩니다.
5) 그 위에
<!doctype html>
을 입력하면
HTML의 구조가 잡히게 됩니다.
모든 웹브라우저의 웹페이지는 이런 구조로 되어있다고 합니다.
그러면 진짜 그런지 한번 찾아보도록 하겠습니다.
진짜입니다.
2.
오늘 두 번째로는 웹페이지로 하이퍼링크를 달아보겠습니다.
<a>링크를 사용할겁니다.
*anchor, 닻이라는 뜻인데 바다에서 배가 닻을 던져 정박할 곳을 찾는다는 의미로 태그 이름을 정한 거 같습니다.
"찰리푸스"에 링크를 달기 위해 앞뒤로 <a>~</a>를 입력했는데 웹브라우저에는 전혀 링크가 달려있지 않습니다. 태그를 설명해주는 속성이 없어서인가 봅니다.
속성을 추가해보겠습니다.
1) <a href = "찰리푸스인스타그램주소">
*h : 하이퍼링크, ref : reference (참조)
입니다.
왼쪽 웹브라우저에 링크가 생긴 게 보입니다.
그럼 클릭하여 제대로 링크가 걸렸는지 확인해보겠습니다.
클릭했더니 my love Charlie Puth의 인스타그램이 연결이 되었습니다.
2) 근데 원래 웹브라우저와 같은 탭으로 연결이 되어 조금 불편하니,
새로 탭을 생성해서 내 사랑 찰리푸스의 인스타그램을 연결해보겠습니다.
<a href="찰리푸스인스타그램주소" target="_blank">
로 target이라는 속성을 추가해보겠습니다.
웹브라우저 오른쪽에 새탭으로 찰리푸스의 인스타그램 탭이 보입니다.
3) 웹브라우저의 "찰리푸스"에 커서를 갖다대면 Charlie Puth라고 보이도록 해보겠습니다.
이 기능은 클릭하기 전 무엇인지 알려주고 싶을 때 쓰이기도 합니다.
<a href = "찰리푸스인스타그램주소" target="_blank" title="Charlie Puth">
로 title="" 이라는 속성을 추가해봅니다.
하이퍼링크를 하기 위해 속성까지 추가하니 꽤 길어집니다.
'To go to 뉴질랜드 > 간식 - IT(코딩)' 카테고리의 다른 글
| 웹호스팅을 해보려고 하다.(모르겠다ㅠㅠ) (0) | 2021.01.23 |
|---|---|
| 처음으로 "웹사이트"를 만들다. (0) | 2021.01.13 |
| 이미지 삽입 및 목차 만들기 (0) | 2021.01.08 |
| 태그 tag가 뭔지 처음으로 알게 되다. (0) | 2021.01.08 |
| "웹페이지"를 만들고 "웹브라우저"로 실행해 봄. (0) | 2021.01.06 |
