저번 포스팅에서는 다음 UI 를 구현해보는 포스팅을 하였는데요, 실제로 웹사이트에서
많이 쓰이고 시각적으로도 보이는 파비콘을 적용하는 것과 내부링크에 대하여 설명을 해드리겠습니다.
우선 파비콘은 저번 포스팅에서도 본것과 같은 웹브라우저에서 브라우저의 title 옆에 있는 아이콘같은 이미지를 말하는데요
파란색으로 표기한 부분이 바로 파비콘이라고 합니다.
그럼 파비콘에 대해서 설명을 해드리겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>NAVER</title>
<!--
link 요소를 이용해서 파비콘을 적용함
- 파비콘을 적용하는 데 사용하는 요소
- 자식요소 없음(열고 닫힘 한번에 하는 요소)
- rel(relation : 관계) 속성 : html과 link할 자원간의 관계
- href(hyperlink reference) 속성 : 연결할 자원의 주소
-->
<link rel="icon" href="img/favicon.ico"/>
</head>
<body>
</body>
</html>
<!--
웹스톰 실행시
http://localhost:63342 <-- 서버가 작동하는걸 알 수있다.
- 서버를 통해서 작동한다, 로컬환경이 서버이자 클라이언트
-->
사실은 파비콘은 간단히 link 요소를 통해 이미지 파일만 있으면 간단하게 쓸 수있습니다. 설명에 link는 자식요소가 없다고 말했는데
이 말은 즉 열고 닫힘이 한번에 가능한 요소임을 뜻합니다. 이러한 구문 많이 보시지않았나요 ?
<img> 이미지라는 요소를 사용할때도 열고닫힘이 한번에 이루어졌습니다 ㅎㅎ 이런 요소들이 종종 있습니다. 그렇다면 지금 파비콘은 제가 NAVER 라는 타이틀을 가지고 실제로 네이버에서 파비콘 이미지를 가져와 적용을 해보았는데 어떤 화면이 나올지 보여드리겠습니다.
실제로 네이버 화면이 아니지만 파비콘을 적용하고 네이버 라는 타이틀을 가지게되면 이 주소창과 내용을 보지않는한 네이버라고 생각 할 수 있습니다. 이처럼 파비콘은 쉽지만 중요하고 어떤 사이트인지 나타내는 요소라고 볼 수있습니다 !
파비콘에대하여 어느정도 이해가 가셨나요 ?? 그러면 이제 내부 링크에 대하여 설명을 드리겠습니다.
내부링크는 한 웹사이트안에서 어떠한 글자 혹은 사진을 클릭했을때 그 위치로 이동하는 것을 말하는데요
사진으로 보면 쉽게 이해가 갈거라 생각합니다.
이렇게 윗부분에 ul 요소를 생성하고 이 ul 요소안에는 a요소를 이용하여 그 글자를 클릭하면 이동을 하는데요 한번 earth를 클릭해보겠습니다.
보이시나요 ? earth가 있는 사진으로 바로 이동하는 결과가 나왔습니다. 사진으로는 라이언 사진이 메인으로나오지만 위치는 현재 earth를 잡고 있습니다.
이렇게 한 웹 사이트 안에서 원하는 항목을 선택해 그 항목으로 이동하는것이 바로 내부링크라고 불립니다.
그렇다면 코드를 한번 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내부링크 테스트</title>
</head>
<body>
<h1 id="top">내부링크</h1>
<ul>
<li><a href="#niniz">니니즈</a></li>
<li><a href="#earth">earth</a></li>
<li><a href="#ryan">라이언</a></li>
<li><a href="#giphy">giphy</a></li>
</ul>
<hr/>
<!--
id 속성 (전역속성)
- 고유한 값
- 한 페이지에 같은 속성값이 중복되면 안됩니다.
- id는 '#'
-->
<h2 id="niniz">니니즈</h2>
<img src="img/niniz.png" alt="niniz mark">
<hr/>
<h2 id="earth">earth</h2>
<img src="img/earth.gif" alt="spin_earth">
<hr/>
<h2 id="ryan">라이언</h2>
<img src="img/ryan.jpg" alt="ryan picture">
<hr/>
<h2 id="giphy">Giphy</h2>
<img src="img/giphy.gif" alt="um?">
<hr/>
<a href="#top">제일 위로</a>
</body>
</html>
앞서 제가 말씀 드린것처럼 ul 요소안에 a요소를 삽입해 그 하이퍼링크는 각각의 img 항목을 가리킵니다.(정확히는 h2요소 항목을 가리키는거죠) 이미지 위에는 h요소를 사용하여 h 요소안에
id를 주어서 그 id로 이동하는 것입니다.
그렇다면 id는 무엇일까요 ? 주석에도 설명을 써놓았지만 id는 identify ? 의 identification ? 대충 이정도의 의미입니다 그 항목을 가리키는게 id 이죠
같은 h2요소라도 id를 다르게 주어서 원하는 항목을 선택한다고 보시면 됩니다. id는 절대로 한페이지에서 중복이 허용되지 않고 선택하는것은
' # ' 을 이용하여 선택하게됩니다.
그외에 id , class 등 여러 가지가 있지만 후에 포스팅에서 더 자세히 설명드리겠습니다.
이번 포스팅은 여기까지입니다. 파비콘과 내부링크에 대하여 포스팅했는데 어느정도 잘 이해가 가셨길 바랍니다.
그럼 다음 포스팅에서 뵙겠습니다.
'Front-end > HTML' 카테고리의 다른 글
| 8. 테이블(Table) 요소 (0) | 2018.07.26 |
|---|---|
| 7. Font Awesome (0) | 2018.07.25 |
| 5. 다음 UI (솔루션 코드) (1) | 2018.07.23 |
| 5. 다음 UI 만들어보기 (0) | 2018.07.23 |
| 4. Form 요소 와 엔티티 기호 (0) | 2018.07.23 |