이미지와 하이퍼링크에 대한 포스팅을 시작하겠습니다.
웹 사이트를 보면 정말 많이 보이는 것이 이미지(사진 혹은 그림) 이나 하이퍼링크를 많이 볼 수 있는데요
사진은 설명을 드리기 위하여 네이버에서 가져왔습니다!
우선 제가 보여드리는 이사진도 그렇고 사진 내부에 여러 그림 혹은 사진들이 있는데 웹에서 이런 사진들을 보여주는 것이 img 요소 입니다 !
물론 후에는 html 에 직접적으로 img 를 넣는게 아니라 IR 기법이나 IS 기법을 통해 보여주긴 합니다만, 이 부분은 후에 CSS 에서 포스팅 하겠습니다 ㅎㅎ
그리고 하이퍼 링크에 관련한건데 하이퍼링크는 쉽게 말해서 클릭을 하면 그 위치로 간다고 생각 하시면 됩니다.
이 사진을 보면 해당 쇼핑몰 사이트를 누르게 되면 그 사이트로 이동을 하게 되는데요 이런것이 바로 하이퍼 링크라고 합니다.
이제 간단한 코드를 통하여 이미지와 하이퍼링크에 대해 알아볼까요 ?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지와 하이퍼링크</title>
</head>
<body>
<h1>쿨서머 기획전</h1>
<img src="img/cool.jpg" width="100%" alt="라이언"/>
<hr/>
<h1>영화 목록</h1>
<ul>
<li>
<img src="poster/poster1.jpg" width="20%" alt="앤트맨 포스터"/>
</li>
<li>
<img src="poster/poster2.jpg" width="20%" alt="마녀 포스터"/>
</li>
<li>
<img src="poster/poster3.jpg" width="20%" alt="변산 포스터"/>
</li>
<li>
<img src="poster/poster4.jpg" width="20%" alt="muse 포스터"/>
</li>
<li>
<img src="poster/poster5.jpg" width="20%" alt="스카이 포스터"/>
</li>
</ul>
<hr/>
<h1>포털 사이트 링크</h1>
<a href = 'https://www.google.com'>구글</a>
<a href = 'https://www.naver.com' >네이버</a>
<a href = 'https://www.daum.net' target="_blank">다음</a>
<a href = 'https://www.nate.com' target="_blank">네이트</a>
<a href = '#'>TEST</a>
<hr/>
<h1>브라우저 다운로드 링크</h1>
<ul>
<li><a href ='https://whale.naver.com/ko/' target="_blank">
<img src="img/whale.png" width = "10%" alt ="웨일 다운로드"/></a></li>
<li><a href ='https://www.google.co.kr/chrome/index.html'>
<img src="img/chrome.png" width = "10%" alt ="크롬 다운로드"/></a></li>
<li><a href ='https://www.mozilla.org/ko/firefox/new/' target="_blank">
<img src="img/firefox.png" width = "10%" alt ="파이어폭스 다운로드"/></a></li>
<li><a href ='https://www.opera.com/ko'>
<img src="img/opera.png" width = "10%" alt ="오페라 다운로드" /></a></li>
<li><a href ='https://support.microsoft.com/ko-kr/help/17621/internet-explorer-downloads'>
<img src="img/explorer.png" width = "10%" alt ="익스플로러 다운로드"/></a></li>
</ul>
<!--
img
- 이미지를 나타내는 요소
- 반드시 써야할 속성 : src(source)속성
alt(alternative text)속성
- width , height 속성으로 크기 지정 가능
- alt : 1. 사진의 경로가 잘못되거나 혹은 보관 서버가 다운되어 엑박이 뜰
경우에 사진의 부가설명
2. 웹 접근성(퍼블리셔)유니버셜 디자인
사진의 설명을 써놓는다.(리더기는 해당 설명을 읽는다.)
a요소
- anchor(닻)의 줄임말
- 하이퍼링크를 담당하는 요소
- 반드시 필요한 속성 : href(hyperlink reference) 속성
- target 속성 : _blank(새로운 탭에서 열리는 속성)
-->
</body>
</html>
<!--
ctrl + space : 자동완성 (code assistent)
-->
제가 저번에 말씀 드린건데 또 한번 웹스톰의 유용한 단축키를 설명 드리자면 자동완성 단축키가 있습니다. 직접 사용해보시면 어떤 기능인지 쉽게 이해 할 수 있으실겁니다.
우선 저번 포스팅에서 썻던 순서가 없는 리스트를 통하여 이미지를 나열해보았고
이미지라는 img 요소 그리고 안에 반드시 기재할 속성에 대하여 설명을 해보았습니다. 그리고 a요소는 하이퍼링크를 담당하는 요소입니다.
이 코드를 가지고 결과를 보게되면 어떻게 될까요 ?
맨 처음 가장 위에 나타나는 화면은 이와 같은 화면입니다 .
그다음 화면을 보게 되면
이와 같은 화면이 나오는데요 리스트를 통하여 이미지를 나타내 보았고, 또한 a 요소를 통하여 직접적으로 하이퍼링크를 표기해보았으며
최종적으론 리스트, img 요소, a 요소를 다 합쳐 보았습니다 ㅎㅎ
이런식으로 이미지와 하이퍼링크는 정말 많이 쓰이는 중요 요소중에 하나입니다. 이에 따른 속성도 반드시 알고 있어야 할거같네요
이번 포스팅은 여기까지 입니다.. 도움이 되셨으면 좋겠습니다..
직접 실습을 해보시고 싶으시면 자신이 원하는 이미지를 다운 받으셔도 되고 혹은 댓글을 주시면 이미지를 보내드리겠습니다.
'Front-end > HTML' 카테고리의 다른 글
| 5. 다음 UI 만들어보기 (0) | 2018.07.23 |
|---|---|
| 4. Form 요소 와 엔티티 기호 (0) | 2018.07.23 |
| 2. 리스트 관련 요소들 (0) | 2018.07.22 |
| 1. 제목 요소 및 p와 br요소 (0) | 2018.07.22 |
| 0. HTML 첫걸음 (0) | 2018.07.22 |