나옹코딩

[이미지 업로드]

웹페이지를 만들다보면 거의 대부분 이미지를 화면에 넣어야 하는 일이 생깁니다.

웹페이지에 이미지가 없이 글만 있다면 너무 지루하겠죠?

그럴 때 필요한 태그가 바로 이미지 태그입니다. img 라고 visual studio에 치기만 해도

<img src=" " alt=" " > 라고 자동으로 문구가 생성이 됩니다. src 뒤의 따옴표 있는 곳이 이미지 소스를 넣는 곳입니다.

저는 소스코드가 있는 같은 폴더에 cat1이라는 jpg파일을 미리 준비해주었습니다.

같은 폴더 내에 있는 경우에는 그냥 파일제목+ 파일형식(JPG, PNG, JPEG) 등을 기입하면 됩니다. 

위 코드를 실행한 페이지를 볼까요?

자! 예상한대로 미리 준비한 cat 사진이 잘 출력이 되었습니다.

그런데 사진 아래에 '이미지 업로드 실패'라는 문구는 왜 나타난 걸까요??

img 태그에는 alt 라는 속성이 있습니다.

아마도 alternative의 줄임말같은데, 만약에 img src업로드가 실패하면 대체적으로 표기되는 문구를 미리 설정하는 기능입니다. 오른쪽의 코드상에서 제가 "dog.jpg" 파일또한 업로드하기를 시도했는데, 폴더에 해당 파일이 없어서 alt에서 정해놓은 '이미지 업로드 실패' 라는 문구가 출력된 것입니다.!!

[이미지 스타일]

당연한 말이겠지만, 이미지를 업로드할 때 가로 세로길이 , 테두리 등 다양한 스타일요소를 미리 지정할 수 있습니다.

이렇게 html에서 바로 width/height 속성을 써도 되고, style속성 내에서 기입해도 상관없습니다.

물론 아래 그림과 같이 <style> 태그 내에서 적는게 더 보기 편하고 좋겠죠!!

style태그 내부에서 가로세로 길이를 지정하고, 테두리 색상과, 두께를 지정했습니다. 

border를 디자인할 때는 주의점이 있는데요!! 일반 테두리를 만드신다고 가정할 때 무조건! border-style을 지정해주셔야 합니다~!! 지정해주시지 않으면 테두리가 none 으로 설정되어 아무것도 나오지 않는답니다.!!

[이미지 맵]

img 태그에는 웹페이지에 띄운 이미지의 일부를 통해 다른 사이트로 갈 수 있는 기능인 map 기능이 있습니다.

map 태그를 통해서 이미지를 좌표구간으로 나눈뒤 어떤 구역은 naver로 연결되고... 어떤 구역은 google 로 연결되는 등 한 이미지 안에 다양한 링크를 삽입할 수 있습니다. 

저는 사과와 오렌지 이미지(1개의 이미지)를 삽입하여

좌측을 클릭하면 오렌지 농장사이트가 ,   우측을 클릭하면 사과 농장사이트가 뜨도록 하였습니다.

map을 사용하려면 area태그를 사용해야 하는데요. 

    (area 태그)

- shape : rect (사각형) / circle / poly(다각형)

- coord : x시작좌표, y시작좌표, x끝좌표, y끝좌표

등을 미리 설정해주어야 합니다.

마지막으로 <img>태그와 <map>태그를 연결하려면 usemap속성이 필요한데요!!

<map name="love">처럼 map의 이름을 love 로 지정했으면

img 태그의 내부에 usemap 속성에 <img ~~~~ usemap="#love">와 같이 map이름 앞에 #을 붙여 표시해주어야 합니다.

[하이퍼링크 생성하기]

우리가 웹페이지에서 어떤 버튼을 누르면 다른 페이지가 이동할 수 있습니다. 이것을 흔히 하이퍼링크라고 하는데요.

웹페이지를 만들 때 이 하이퍼링크 기능을 생성하기 위해서는 아래와 같이 <a>태그의 "href" 속성이 필요합니다.

웹페이지 화면에서 마우스 우클릭하시면 이렇게 소스코드를 확인하실 수 있습니다. (간혹 막힌 곳도 있음..)

저는 네이버 로그인 화면의 소스코드를 확인하였는데요. 우측 회색으로 표시된 곳을 보시면

<a href = "https://www.naver.com"  ~~~~~ >  ....</a>

라고 되어있는 것을 확인할 수 있습니다.

이건 해당 문구를 하이퍼링크 형태로 변환하여 클릭하면 해당 페이지로 이동할 수 있게끔 하는 기능입니다.

이동하고 싶은 페이지 링크를 href= " ~~~~~ " 형식으로 지정해주시면 됩니다.

[ target 속성 정하기]

이제 하이퍼링크를 생성했으니 다음에 정해야할 것은 target 속성 값입니다.

사실 target 속성 값은 따로 표기하지 않아도 , default 값이 있기 때문에 상관은 없지만....

링크를 클릭하면 새창에서 열릴지 기존 창에서 열릴지를 정하고 싶다면 target 속성값을 미리 설정해주어야 합니다.

target 속성 값에는 (    _blank    )     (     _self     )    (     _parent     )      (     _top     )    (     _frame     )

이렇게 5 가지가 있습니다.

<_blank>

위 속성은 흔히 우리가 해당 링크를 누르면 새 탭이나 새 창으로 열리는 경우에 쓰입니다.

<_self>

위 속성은 "디폴트 값"인데요. 따로 target 값을 정해주지 않으면 자동으로 설정이 됩니다.

네이버 로그인 창도 따로 설정이 되어있지 않으니 이 값으로 볼 수 있겠습니다.

위 속성의 경우 새 창이 열리지 않고 해당 페이지화면에서 바로 다음 페이지 화면으로 넘어가는 경우입니다.

여러 창이 생기지 않아서 편리하지만, 작업시 앞의 창이 동시에 필요할 경우 추가로 다시 들어가야 하는 번거로움이 있겠군요...

<_parent>

target 값이 _parent 값이면 한단계 위 조상페이지에서 링크페이지가 열립니다. 물론 이 경우에도 새창이나 새탭이 생성되는게 아니라 부모페이지->링크페이지로 바로 변환됩니다.

<_top>

이 속성도 _parent 속성과 비슷한데요. 단지 다른 점은 부모의부모의부모의...부모 이냐   바로 직속위 부모이냐가 다른 점입니다. 맨 꼭대기 최고조상님 페이지를 찾아서 그 페이지를 링크페이지로 바꿔줍니다.

[link 상태 정하기]

이제 마지막으로 하이퍼링크의 상태를 정해야 합니다.

하이퍼링크의 상태를 정한다는건 뭐... 아무것도 하지 않을 때,,, 마우스 위로 지나갈 때,,,, 클릭할 때 등의 상황에서 링크의 모양이 어떻게 변하냐를 의미하는데요.

(  link  )    (   visited   )   (   hover   )   (    active   )  이렇게 4가지가 있습니다. 

< link > 사용시

link상태의 경우는 그냥 해당 텍스트가 순수한? 링크임을 표시하는 기능입니다. 저는 grey 색상으로 지정해주었습니다.

< visited > 사용시

visited상태는 해당 페이지를 이미 방문했다는걸 표시해주는 기능입니다. 링크를 한번 눌러본 상태에서 다시 들어가보았더니 이렇게 보라색으로 표시되는군요. 물론 색상을 style에서 마음대로 지정할 수 있습니다.

< hover > 사용시

원래는 링크에다가 마우스 화살표를 대고 있는 화면을 캡쳐한건데 화면상에는 화살표표시는 안되는 군요...ㅎㅎ

아무튼 저 위에다가 hover (허공에 지나가다) 를 하게 되면 style 태그에 지정한대로 색상이 pink로 변경됩니다.

마우스를 떼면 다시 원래 색으로 돌아가구요.

<active 사용>

마지막으로 active는 링크를 클릭했을 때 순간적으로 변하는 색상을 지정할 수 있는 기능입니다. "방금 클릭을 했음." 정도로 기억하면 될 것 같습니다.