[html] 이미지 & 하이퍼링크

문법 (이미지)

• gif

  • 비손실 압축
  • 8비트(2^8 = 256) 색상만 지원
    --> 사진(2^8 2^8 2^8 = 2^24) 이 아닌 그림이미지를 주로 사용한다
  • 여러 장의 이미지를 하나의 파일로 묶을 수 있음

• jpg(jpeg)

  • 압축률이 뛰어나다 (=용량이 작다)
  • 여러 번 반복 저장하게 되면 손실율이 매우 높아진다 (=화질이 떨어짐)

• png

  • gif 의 대체 포맷
  • 비손실 압축
  • gif와 다르게 투명도를 지원한다

• webp

  • 위의 3가지 형태 (gif, jpg, png를 모두 대체할 수 있는 이미지 포맷)
  • 오래된 버전의 웹 브라우저 사용 시 지원이 안될 수 있다

***
경로

• 상대 경로 ( 현재 위치를 기준으로 = 항상 바뀔 수 있다 )
  --> html 에서 상대경로 사용 불가 ( 절대 경로만 사용 가능 ! )

(ex) 현재위치/이미지 이름
--> <img src="images/flower.jpg"/>
--> <img src="./images/flower.jpg"/>

(ex) 상대 경로 예시

--> <img src="./../external_images/duke_thinking.gif"/>

--> <img src="../external_images/duke_thinking.gif"/>

--> 위의 두 코드는 동일한 코드이다 !

- (.) : 현재위치 --> 생략 가능
- (..) : 상위폴더

• 절대 경로 ( 어디서 작업하든지 항상 경로가 같다 )

  • 로컬 경로 ( 내 컴퓨터 안에 있는 하드디스크의 경로 --> html 안에서 로컬경로 사용 불가 )

  • 가상 경로 ( url )
    (ex)
    --> <img src="절대 경로 주소/flower.jpg"/>

    --> <img src="C:/Users/acorn/Desktop/YOON/FrontEnd/HtmlWork/images/flower.jpg"/>

문법 (하이퍼링크)

표기법 : '< 태그 href="주소">'

• URL ( Uniform Resource Locator )

  • 네크워크상에서 자원이 어디에 있는지를 알려주기 위한 규약
  • 프로토콜명://도메인주소(or ip주소):포트번호/폴더명/파일명#세부위치
    (ex) http://naver.com

• .zip : 다운로드 속성

• .mp4 : 동영상 실행 속성

• mailto : 메일 보내기 속성

• usemap : 이미지 맵

• shape : 영역 지정 속성
  
  

  ** 스크롤바 만들기

                <br><br><br><br><br><br><br><br><br><br><br>
                 <br><br><br><br><br><br><br><br><br><br><br>
                 <br><br><br><br><br><br><br><br><br><br><br>
                 <br><br><br><br><br><br><br><br><br><br><br>
                 <br><br><br><br><br><br><br><br><br><br><br>

ex) test5.html

-->

• target="_self" : 현재 그 창에서 열림
• target="_blank" : 새로운 창에서 열림
• # : 세부정보로 많은 정보를 끌어 올때 유용하다

ex) test5-1.html

-->

ex) test5-2.html

-->

• img 와 map 을 연결시켜주어야 해서 usemap 인 이미지맵을 사용한다
• 에서는 usemap을 사용하여 usemap="#이미지" 를 적용해주고, 에서는 name 을 이용해서 이름을 설정해주면 연결하기 편하다
• 이미지에서 각각의 펭귄의 머리쪽에 영역을 지정하고 그 부분에 하이퍼링크를 넣을때는, 펭귄 이미지를 그림판을 통해 통해 크기를 확인한다
• area shape 가 원인 경우는 area shape="circle" ( 원의 중심점, 반지름 길이 필요 )
• area shape 가 사각형인 경우는 area shape="default"

---

문법 (테이블)

<table> ( 데이터를 정리해서 보여주기 위함 --> 행을 먼저 만들고 열을 만든다 ! )

• <tr> : 행 (table row)
• <td> : 열 (table describe)
• <table border="숫자"> : 테두리 설정
• <td><img src="./images/이미지이름"/></td> : 이미지를 테이블 안에 넣을 수 있다

***
속성

• rowspan : 행을 합침
• colspan : 열을 합침
  
  

ex)

<td rowspan="2">a</td>
: 1행과 2행을 합침
---> 합쳤을때 불균형해지는 칸을 주석처리 해주면 깔끔해짐

ex) 1행 4열 만들기

        <tr> 
            <td>가</td>
            <td>나</td>
            <td>다</td>
            <td>라</td>
        </tr>  

ex) 2행 2열 만들기

        <tr> 
            <td>가</td>
            <td>나</td>
        </tr>
        <tr> 
            <td>다</td>
            <td>라</td>
        </tr>  

---

문법 (div)

( division : 화면을 나눈다, 화면에서 원하는 영역만 잡아서 사용 )

• style 속성을 이용하여 배경색 지정가능 : 높이는 글자 높이만큼, 폭(행)은 화면 전체

ex)

<div style="background-color: aqua;">내용</div>

---->
폭을 화면 전체 사용하게 되면 불필요 할 수 있는데 이때 span을 사용하여 방지

<span style="background-color: aqua;">내용</span>

ex)

폭과 높이까지 지정하여 일부분 지정가능
<div style="background-color: yellow; width: 300px; height: 100px;">내용</div>

<div style="background-color: cyan; width: 300px; height: 100px;">내용</div>

-->

위의 코드를 하나의