1. HTML 링크(links)
링크라 함은 하이퍼링크를 말하는 것이다. <a>태그를 사용한다. 이 안에 href="..."를 사용해서 하이퍼링크를 연결시켜준다. 대신 웹 브라우저에 표시되는 메세지는 <a>...</a>안에 표시하면 된다.
<a href="www.google.com/">This is hyperlink </a>
로컬링크(local link)라고 해서 www.의 웹 브라우저 주소가 아닌 주소를 하이퍼링크 시키는 방법도 있다.
<a href="images.asp">Images</a>
또한 href와 같이 <a>안에 추가할 수 있는 것으로 target 속성이 있다. 클릭한 링크가 어떤 방식으로 보여지느냐를 설정한다.
- _blank - 새 창/탭에서 열기
- _self - 기본. 기존 창/탭에서 열기
- _parent - 지금 탭에서 열기
- _top - 지금 창에서 열기
<a>이후에 <img>태그를 삽입하고 <a href="이미지 주소">를 통한 하이퍼링크 연결도 가능하다.
<a>안에 링크 및 링크에 대한 제목풍선이 뜨도록 할 수도 있다.
<a href="..." title="...">
또한 CSS를 추가해서 link, visited, hover, active에 대한 색깔을 각각 <style>안에 지정할 수 있다.
링크설정은 같은 페이지 안에서 북마크를 만드는 것도 가능하다. 웹 페이지가 굉장히 긴 경우, 경계가 되는 부분이나 북마크를 설정하고 싶은 곳에 링크를 지정할 수 있다.
- 먼저, 북마크를 설정할 부분에 id속성을 지정한다.
<h2 id=C4>Chapter 4</h2>
- 같은 페이지 내에, 하이퍼링크를 설정한다.
<a href="#C4"> Jump to Chapter 4</a>
2. HTML 이미지(images)
이미지 태그는 이러한 형식을 지닌다.
<img src="url" alt="이미지 설명">
이미지의 크기를 설정하고 싶다면 style=width:"00px;" height:"00px;" 또는 각각을 직접 width="500px" height="500px"로 지정한다.
하지만, <head>에 <style>을 따로 지정하는 것을 추천한다.
<head>
<style>
img {
width=100
height=100
}
</style>
</head>
이미지 소스의 확장자는 일반 폴더, .gif, .jpg 등이 가능하다.
이미지의 위치를 바꾸고 싶다면 float:right/left를 추가한다.
<img src="url" alt="an alternative name" style="float:left; width:50px; height:50px;">
2-1. HTML 이미지맵
사용하고 싶은 이미지의 클릭가능한 부분을 설정할 수 있다. 먼저<image>안에 usemap속성을 추가한다. 이미지맵의 이름에는 반드시 해쉬태그 #를 붙여서 이미지와 이미지맵 사이의 관계를 설정해준다.
<img src="url" alt="name" usemap="#맵이름" height="00px">
그리고 나서 <map>요소를 추가한다. 해쉬태그를 제외한 맵이름을 사용한다.
<map name="맵이름">
그리고 나서 <area>를 적용한다. 클릭 가능한 범위를 지정해주는 것이다. 이 안에는 shape, coordinates,
- 모양(shape)
클릭하고자 하는 모양에 따라서 shape="
- rect - 직사각형 범위
- circle - 원형 범위
- poly - 다각형 범위
- default - 전체 범위
- 좌표(coordinates)
화면 왼쪽으로부터, 위쪽으로부터 몇 px에 해당하는지를 확인한다.
사각형의 범위 설정하는 방법은 다음과 같다. 아래 그림처럼 노트북을 클릭하게 하고 싶다면 노트북의 왼쪽-위 꼭지점과 오른쪽-아래 꼭지점의 픽셀을 coords="00, 00, 00, 00"로 나타낼 수 있다.
<area shape="rect" coords="00, 00, 00, 00" href="coffeepicture.htm">
원의 범위 설정하는 방법은 다음과 같다. 아래 그림에서 커피잔을 클릭하게 하고 싶다면 대략 큰 원을 예상했을 떄 중심점의 좌표가 왼쪽으로부터, 위에서 부터 몇 픽셀인지 파악한다. 그리고 그 중간 점을 중심으로 몇 픽셀의 반지름까지 범위를 설정하고 싶은지를 설정한다.
<area shape="circle" coords="337, 300, 44">
2-2. HTML 배경 이미지(background images)
- HTML 요소로 배경 집어넣기
<div style="background-image: url('urladdress.jpg');">
- <style>에 배경 설정하기
<style>
div {
background-image: url('urladdress.jpg');
}
</style>
- 화면 전체에 배경 설정하기
<body>요소를 사용한다.
<style>
body {
background-image: url('urladdress.jpg');
}
</style>
만약, 이미지의 크기가 작다면 그 이미지는 화면에 채워지기 위해서 반복적으로 나타난다. 이것을 방지하기 위해서 no-repeat를 설정해줘야 한다.
- 화면에 작은 그림 한 번만 나오게 하기
background-image: no-repeat를 추가한다.
<style>
body {
background-image: url('urladdress.jpg');
background-repeat: no-repeat;
}
</style>
-화면에 한 그림이 꽉 채워지도록 하기
background-size: cover를 추가한다.
<style>
body {
background-image: url('urladdress.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
또는 background-size: 100% 100%를 설정한다.
2-3. HTML 그림요소(picture element)
<picture>...</picture>요소를 통해서 넣고자 하는 이미지(source)를 디바이스의 크기에 따라서 다르게 설정할 수 있다. 말하자면 미디어가 몇 사이즈 일 때 picture.jpg그림이 보이게 하고, 다른 사이즈 일 때는 picture2.jpg로 설정하는 것이다. 그 이외에는 picture3.jpg로.
<picture>
<source media="(min-width: 650px)" srcset="picture.jpg">
<source media="(min-width: 420px)" srcset="picture2.jpg">
<img src="picture3.jpg">
</picture>
작은 화면에 굳이 큰 이미지를 불러오게 할 필요 없이, 디바이스의 종류에 따라서 각기 다르게 지정된 그림을 불러오면 더 효율적이다. 웹 브라우저나 장치에 따라서 불러오기가 가능한 이미지가 다를 수 있기 때문에 여러 이미지를 설정해 놓으면 만일의 상황에 대비할 수 있다.
+느낀점
정리는 하는데, 가끔 결과물은 같은데 입력 방법이 다른 경우는 그 둘의 차이가 뭔지 정확하게 감이 잡히지는 않는다. 실전에서 이것저것 활용해 보다 보면 늘겠지... 하루에 끝낼 수 있는 한 최대한 많이 많이 정리하고 이번 주 안에 끝낼 수 있도록 해야겠다. 질질 끌다가는 너무 지루해 질 것 같다.
'디지털 노마드를 꿈꾸며 > HTML' 카테고리의 다른 글
| HTML 블록과 인라인 요소 (0) | 2020.03.18 |
|---|---|
| HTML 표, 목록 (0) | 2020.03.18 |
| HTML 색상, CSS (0) | 2020.03.16 |
| HTML 인용 요소, 코멘트, (0) | 2020.03.15 |
| HTML 스타일, 텍스트 형식 (0) | 2020.03.15 |
댓글