이미지 보기

[CSS] 키즈가오 프로젝트 실습

21.07.08 작성

22.02.07 수정

읽는 데 3분

이미지 레이아웃 실습

DAY 12에서 적응한 이미지 레이아웃 코드를 이용해 직접 실습해보았다. 코드는 아래와 같다.

* html 문서

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>kizgao_실습</title>
    <link href="css/style.css" />
  </head>
  <body>
    <!-- forest1 -->
    <div id="forest1">
      <div class="bg1"></div>
      <div class="rabbitWrap">
        <div class="rabbit1"></div>
        <div class="rabbit2"></div>
        <div class="righttree"></div>
      </div>
      <div class="lefttree"></div>
    </div>
  </body>
</html>

* css 문서 html,
body {
  margin: 0;
  padding: 0;
}

#forest1 {
  position: relative;
  width: 100%;
  height: 800px;
}

#forest1 .bg1 {
  background-image: url("../img/forest/forest1/forest1_bg.png");
  /* width: 1280px; */
  width: 100%; /* 가로는 브라우저 너비 변경에 적응할 수 있게 항상 100% */
  height: 1050px;
}

#forest1 .rabbitWrap {
  position: relative;
  width: 304px;
  height: 572px;

  /* right: 0; */
  float: right; /* right 속성은 float를 사용한다. */
  top: 100px;
}

#forest1 .rabbitWrap .rabbit1 {
  position: absolute;
  background-image: url("../img/forest/forest1/rabbit1.png");
  width: 82px;
  height: 103px;

  /*
  left: 50%;
  margin-left: 50px;
  */
  margin: 435px 0 0 107px;
  #forest1 .rabbitWrap .rabbit2 {
    position: absolute;
    background-image: url("../img/forest/forest1/rabbit2.png");
    width: 56px;
    height: 75px;
    /* right: 20px; */
    margin: 435px 0 0 200px;
  }
}

#forest1 .rabbitWrap .righttree {
  /* z-index : 10; */
  position: absolute;
  background-image: url("../img/forest/forest1/righttree.png");
  width: 304px;
  height: 572px;
}

height: 990px;

#forest1 .lefttree {
  position: absolute;
  background-image: url("../img/forest/forest1/lefttree.png");
  width: 332px;
}

blind 실습 후 몇 가지 새로운 점들을 발견할 수 있었다.

background-image: url("#"); 속성값 부여가 기억나지 않아 내용을 참고하였다.
image url 주소는 항상 css문서가 들어있는 폴더에서 시작하기 때문에 다른 image를 참고하더라도 css문서의 폴더에서 나가서(../) 해당 이미지가 있는 폴더를 탐색해 참조해야 한다.
이미지 url이 지정이 되고 나면 width/height는 해당 이미지의 픽셀값으로 추천이 된다.
right 속성은 float: right; 으로 하여 적용한다.
rabbit들의 margin은 trial&error 로 하나하나 옮겨보면서 px를 정한걸까? 값이 지정되어 있지 않았는데 어떻게 값을 구했는지 궁금하다.

정보성 이미지 속성값

<img class="class_name" src="img_folder/img.png" alt="img_설명" />

정보성 이미지는 웹 접근성(시각 장애인용)을 위해서 alt= 속성을 추가해 이미지에 대한 설명을 넣어준다.

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github

[CSS] 키즈가오 프로젝트 실습

TOC

이미지 레이아웃 실습

정보성 이미지 속성값