HTML

HTML Images

carrot62 2020. 7. 22. 23:39
  • <img>
    • 기본 문법: <img src="url" alt="대체문자"> 
    • src
    • alt
    • width & height (픽셀 단위인 px를 사용하거나 상대적 크기에 따라 %로도 설정 가능하다)
    • style
      사전에 <head> 태그 사이에 <style> 태그에서 width를 설정하고 가면, 이미지의 크기가 임의로 바뀌는 것을 방지해준다
<head>
<style>
  img {
    width: 100%;
  }
</style>
</head>

이미지 경로를 설정하는 방법

이미지가 다른 폴더 또는 하위 폴더에 있을 경우에 경로를 설정해주어야 한다. 
이미지를 우리가 원하는 폴더로 옮기는 방법 중에 FileZilla를 사용하는 방법이 있다.

내 로컬 pc에서 사용하고자 하는 폴더로 이미지를 옮긴다

<img src='./img/flower.jpg' width='50px' height="50px">
<!-- ./은 현재 위치를 뜻한다 -->
  • <map>
    image map: an image with clickable areas
    • usemap
      #"이미지에 지정할 이름"
    • <area> : 클릭 가능한 부분을 정의한다
    • shape
      1. rect
      2. circle
      3. poly
      4. default
    • coords
      • rect 의 경우 처음 두 좌표는 위의 왼쪽 모서리이고, 다음 두 좌표는 아래의 오른쪽 모서리이다.
      • circle 의 경우 처음 두 좌표가 원의 중심이고, 다음 숫자는 원의 반지름을 의미한다.
      • poly 의 경우는 모든 모서리 마다 x와 y좌표를 차례대로 정의해주면 된다.
<img src="./img/business.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.w3schools.com/w3images/mac.jpg">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://www.w3schools.com/w3images/cellphone.jpg">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://www.w3schools.com/w3images/coffeehouse2.jpg">
  • Javascript를 이용한 기능 onclick
    alert를 사용하면 팝업창이 나오면서 메시지를 보여준다
<map name="workmap">
  <area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

HTML 배경 이미지

  • background-image
    • <head> 또는 <body>에 적용하는 것이 가능하다
    • 이미지가 적용되는 범위보다 작을 경우 반복해서 나타난다. 이를 방지하기 위해서는 background-repeat: no-repeat; 으로 설정하면 된다
    • 이미지가 배경을 완전히 덮길 바랄때 다음의 두 가지 옵션을 추가한다 
      1. background-attachment: fixed;
      2. background-size: cover;
        이미지가 늘어자서 페이지를 덮길 바란다면 background-size: 100% 100%;
<!--페이지에 적용할 경우-->
<head>
    <style>
        body{
            background-image: url('./img/background.jpg');
        }
    </style>
</head>
<!--div element에 적용할 경우-->
<div style="background-image: url('./img/iceskates.jpg');">
    You can specify background images<br>
    for any visible HTML element.<br>
    In this example, the background image<br>
    is specified for a div element.<br>
    By default, the background-image<br>
    will repeat itself in the direction(s)<br>
    where it is smaller than the element<br>
    where it is specified. (Try resizing the<br>
    browser window to see how the<br>
    background image behaves.
</div>

HTML <picture>

  • <picture> : 여러개의 source를 가지고 있다
  • 사용되는 이유 두 가지
    1. 화면 크기에 따라 효율적으로 이미지를 나타내기 위해
    2. 각 브라우저마다 제공하는 이미지 형식이 다르기 때문에 형식이 맞지 않는 이미지는 알아서 무시한다