결과물

주요코드

body{
  background-image: url('./images/pattern.png');
  background-color: rgb(163, 163, 163);
  background-size: 100px;
}

.bookcover{
  height: 560px;
  width: 960px;
  margin:100px auto;
  background-color: rgb(180,208,218,81);
  border-radius:9px;
  position:relative;
}
.bookdot{
  height:534px;
  width:934px;
  border: dashed white 2px;
  border-radius:9px;
  position: absolute;
  top:12px;
  left:12px;
}
.page{
  height:520px;
  width:920px;
  background-color:white;
  border-radius: 9px;
  position: absolute;
  top:7px;
  left:7px;
}

---

📌 div태그와 span태그

✔ div태그는 기본적으로 display가 block으로 지정되어있다.
✔ span태그는 아무런 기본 속성을 가지고 있지않다.

✅ display:

✔ display: block은 기본적으로width:100%값을 가져서 한줄 전체를 차지한다.
(width,height,padding,margin 속성 사용할 수 있다.)
✔ display: inline-block은 콘텐츠 크기만큼의 공간을 차지한다.
(width,height,padding,margin 속성을 사용할 수 있다.)
✔ display: inline은 콘텐츠 크기만큼의 공간만 차지한다.
(width,height,padding,margin 속서을 사용할 수 없다. 대표적으로 span태그)

📌 postion의 속성값

✔ static: 기본값
✔ relative: 기본값일때의 위치를 기준으로 상대 위치를 지정할 수 있다.
✔ absolute: position이 relative인 상위 요소를 기준으로 상대 위치를 지정한다.
✔ fixed: 화면(디스플레이)를 기준으로 상대 위치를 지정한다. 즉 스크롤과 상관없이 위치가 고정된다.

코드메이트 사이트 바로가기