smarti,스마트아이

기본요소 2

링크 (link)

하이퍼링크(hyperlink)를 간단히 링크(link)라고 부르며, <a> 태그로 표현 'a'는 앵커(Anchor)를 의미한다.

표현 : <a href="link URL">링크제목</a>

<a href="https://www.deni.co.kr">데니</a>

target 속성

속성값	설명
_blank	링크로 연결된 문서를 새 창이나 새 탭에서 열린다.
_self	링크로 연결된 문서를 현재 프레임(frame)에서 열린다. (기본설정)
_parent	링크로 연결된 문서를 부모 프레임(frame)에서 열린다.
_top	링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 열린다.
frame	이름 링크로 연결된 문서를 지정된 프레임(frame)에서 열린다.

<div><a href="http://www.deni.co.kr" target="_blank">_blank</a></div>
<div><a href="http://www.deni.co.kr" target="_self">_self</a></div>
<div><a href="http://www.deni.co.kr" target="_parent">_parent</a></div>
<div><a href="http://www.deni.co.kr" target="_top">_top</a></div>
<div><a href="http://www.deni.co.kr" target="myframe">frame</a></div>

링크의 상태(state)

다음과 같이 4가지가 있다.

상태	설명
link	아직 한 번도 방문한 적이 없는 상태 (기본설정)
visited	한 번이라도 방문한 적이 있는 상태
hover	링크 위에 마우스를 올려놓은 상태
active	링크를 마우스로 누르고 있는 상태

웹 브라우저에서 링크가 연결되어 있는 텍스트의 색상은 다음과 같다.
- 기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경된다.
- visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경된다.
- active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경된다.

<style>
       a:link    { color: blue; }
       a:visited { color: green; }
       a:hover   { color: yellow; }
       a:active  { color: red; }
</style>

책갈피(Bookmark)

<a>태그의 name 속성을 이용하면 간단한 책갈피(Bookmark)를 만들 수 있다.
우선 책갈피를 통해서 이동하고 싶은 위치에 <a>태그를 만들고 name 속성을 작성한다.
그 다음에 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 된다.

<a href="#bookmark01">제목01으로 이동</a>
...
<h2><a name="bookmark01">제목01 내용</a><h2>

 

이미지(image)

이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미한다. 웹 페이지에는 이러한 이미지가 매우 중요한 요소 중 하나이다. 웹 페이지에서 사용 가능한 이미지의 종류는 다음과 같다.
- JPEG Images
- GIF Images
- PNG Images

- WebP Images

이미지의 삽입

HTML에 이미지를 추가할 때는 <img>태그를 사용한다.
<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 다음과 같은 문법으로 사용된다.

표현 : <img src="이미지 주소" alt="대체 문자열" />

<img src="/images/img.gif" alt="이미지입니다"/>

이미지 alt 속성

alt는 이미지를 표시 할 수없는 경우 이미지에 대한 대체 텍스트를 표시한다.
연결 속도가 느리거나, 실제 이미지가 존재하지 않는 경우 등 브라우저에서 사용자가 볼 수 없는 경우에 이미지의 대체 정보를 제공한다.

<img src="noimage.png" alt="이미지가 없습니다.">

이미지 테두리(border)

border 속성을 사용하여 이미지의 테두리 사용여부와 굵를 설정할 수 있다.

<img src="/images/test.png" alt="이미지 테두리" style="border: 2px solid black">

이미지에 링크 설정

이미지에 <a>태그를 이용하여 링크를 설정할 수 있다.

<a href="https://www.deni.co.kr" target="_blank">
    <img src="/images/test.gif" alt="연습">
</a>

이미지 맵 만들기

HTML에서는 <map>태그를 이용하여 이미지 맵(image map)을 제작할 수 있다. 이미지 맵(image map)이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미한다.
<map> 태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정된다.
<map> 태그는 하나 이상의 <area> 태그를 가지며, 이 <area>태그가 바로 버튼과 같은 역할을 한다.

<img src="/images/test.jpg" alt="연습" usemap="#map001"/>
<map name="map001">
  <area shape="rect" coords="105,145,150,175" alt="코" href="https://ko.wikipedia.org/wiki/%EC%BD%94">
  <area shape="rect" coords="25,50,60,85" alt="왼쪽 귀" href="https://ko.wikipedia.org/wiki/%EA%B7%80">
  <area shape="circle" coords="205,65,30" alt="오른쪽 귀" href="https://ko.wikipedia.org/wiki/%EA%B7%80">
</map>

img 태그

속성	설명
usemap	이 이미지에서 map을 사용할 것임을, 브라우저에게 알려준다. 사용할 map의 이름을 넣어준다.

map 태그

※ html 5로 넘어오면서, name 속성보다는 id 속성을 사용하라고 권하는 추세다.

속성	설명
name	map 태그에게 붙여줄 이름.
id	name 속성에서 정한 것과 동일한 이름을 넣는다.

area 태그

※ ie 7 이하에서는, title이 아닌 alt에서 설정한 내용이 말풍선으로 표시

속성	설명
shape	map의 모양. 링크를 걸어줄 영역의 모양. 기본값인 default는, 이미지의 전체 영역. default, rect, circle, poly 중에서 하나를 선택하여 사용한다.
coords	map의 좌표. 다각형(poly)일 경우, 최소 3개의 좌표가 필요하다.
alt	"스크린 리더" 사용자처럼 이미지를 볼 수 없는 경우, 또는 이미지를 불러올 수 없는 브라우저를 위한 설정. 이미지를 대신할 문구를 넣어준다.
title	말풍선. 해당 영역으로 마우스를 가져갔을 때 나타나는 문구.
href	클릭시 이동할 URL.

 

[세상살이] - 2020 삼성화재배 월드 바둑 마스터스 결승 2국 결과

2020 삼성화재배 월드 바둑 마스터스 결승 2국 결과

[세상살이] - 산야초 채취 시기 및 효능

산야초 채취 시기 및 효능

[세상살이] - 색으로 대표되는 컬러푸드 - White (화이트푸드)

색으로 대표되는 컬러푸드 - White (화이트푸드)

[코딩공부] - CSS 선택자

CSS 선택자

[세상살이] - 디데이계산기, The Day Before 앱 휴대폰에 설치하기

디데이계산기, The Day Before 앱 휴대폰에 설치하기