HTML 8일차 공부

chaerlo127 2022. 1. 20. 15:02

- HTML map & area tag

<img src="" width="" height="" usemap=" write # + mapname">
<map name=""></map>
<area shape="" coords="" alt="" href="">

shape 종류

rect : 직사각형
circle : 원
poly : 형 영역
default : 전체 영역

coords : 정의, 좌표를 표시

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p> HTML Map tag Example</p>
  <img src="https://www.w3schools.com/html/workplace.jpg" alt="you couldn't see that" usemap="#map">
  <map name="map">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="css.html">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="basic.html">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="js.html">
  </map>
</body>
</html>

JS Script 사용

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p> HTML Map tag Example</p>
  <img src="https://www.w3schools.com/html/workplace.jpg" alt="you couldn't see that" usemap="#map">
  <map name="map">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="css.html">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="basic.html">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="js.html" onclick="youClickMe()">
  </map>
  <script>
    function youClickMe(){
      alert("눌러줘서 고마워.");
    }
  </script>
</body>
</html>

- HTML Background image

Inline CSS

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="background-image: url('https://mblogthumb-phinf.pstatic.net/MjAxODAxMjRfMjQ0/MDAxNTE2ODAwMDQ4MjQy.7I_JZf_duXWvSLPA1-hoGMgBDnRWEsgW8RbzhBlZQ8Ug.S8nJ6XK2d1jMPSxQKuiopp2qfWAaptMEmVdeeLvTV6sg.JPEG.timeless_soul/20161005_040432_-649562736.jpg?type=w800'); 
  background-size: 300px 150px;">
  안녕하세요<br>
  이건 무한도전 짤입니당<br>
  안녕하세요<br>
  이건 무한도전 짤입니당<br>
  안녕하세요<br>
  이건 무한도전 짤입니당<br>
  안녕하세요<br>
  이건 무한도전 짤입니당<br>
  </div>

  
</body>
</html>

Internal CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    body
    {
      background-image: url('https://mblogthumb-phinf.pstatic.net/MjAxODAxMjRfMjQ0/MDAxNTE2ODAwMDQ4MjQy.7I_JZf_duXWvSLPA1-hoGMgBDnRWEsgW8RbzhBlZQ8Ug.S8nJ6XK2d1jMPSxQKuiopp2qfWAaptMEmVdeeLvTV6sg.JPEG.timeless_soul/20161005_040432_-649562736.jpg?type=w800');
    }
  </style>
</head>
<body>
  <div>
  안녕하세요<br>
  이건 무한도전 짤입니당<br>
</body>
</html>

background-img를 사용하면 페이지에 여러 사진이 뜨는데,

이를 하나로 뜨게 하는 방법은

background-repeat: no-repeat을 사용하면 된다.

<!DOCTYPE html>
<html>
<head>
  <style>
    body
    {
      background-image: url('https://mblogthumb-phinf.pstatic.net/MjAxODAxMjRfMjQ0/MDAxNTE2ODAwMDQ4MjQy.7I_JZf_duXWvSLPA1-hoGMgBDnRWEsgW8RbzhBlZQ8Ug.S8nJ6XK2d1jMPSxQKuiopp2qfWAaptMEmVdeeLvTV6sg.JPEG.timeless_soul/20161005_040432_-649562736.jpg?type=w800');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }
  </style>
</head>
<body>
  <div>
  안녕하세요<br>
  이건 무한도전 짤입니당<br>
</body>
</html>

+알파

background-attachment

fixed : 고정, 배경은 함께 스크롤이 되지 않음
local: 배경을 요소 콘텐츠에 고정, 요소에 스크롤이 존재하면 콘텐츠와 함께 스크롤 됨
scroll: 배경을 요소 자체에 고정, 요소에 스크롤이 존재해도 배경은 함께 스크롤 되지 않음

https://www.codingfactory.net/10576 -> 자세한 설명은 이 블로그를 참조

위 블로그에서 제시한 코드를 통해서 확인해보면

외부 스크롤과 내부 스크롤이 있다면,

fixed는 왼쪽위에 있는 사진이 그 상태로 유지되어 내부 스크롤을 하더라도 움직이지 않는다. 또한 외부 스크롤을 하더라도 움직이지 않고, 그 위치에 그대로 유지된다. (-> 유지되어 움직이지 않기에 밑으로 내려도 육안으로 확인이 가능하다.)

scroll은 내부 스크롤을 하면 움직이지 않지만, 외부 스크로를을 하면 내부 요소와 함께 움직이게 된다.

local은 내부 스크롤을 하면 움직이고, 외부스크롤을 하면 내부 요소와 함께 움직인다.

background-size

cover : 배경이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정, 가로 세로 비율 유지, 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음
contain: 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정, 이미지의 가로, 세로 비율은 유지, 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음
직접 값 정하기( ex > px)

cover는 중앙 비율, contain은 원본비율(이미지 전체가 보이도록 설정)을 나타내는 것이다. 즉, cover는 <div>를 사용했을 때, 빈틈이 없이 가득 채워질 것이고, contain은 이미지 전체가 보이면 가득 채워지지 않을 수도 있다.

저작자표시 (새창열림)