결과물

주요코드

<div class="title">오늘의 일기</div>

//css
.title{
  background-color:rgb(52, 175, 185);
  height:50px;
  width:1500px;
  position: fixed;
  top: 0px;
  line-height:50px;
  font-weight:bolder;
  font-size:30px;
}

:title클래스에 position을 fixed로 함으로 스크롤을 내려도 title클래스는 위치가 고정된다.
그리고 heigh = line-height 이면 글씨가 div의 수직 중간에 위치한다.

//css
.box{
  width: 500px;
  height:800px;
  background-color: lightgray;
  margin: auto;
}

: box클래스는 회색배경을 나타내는 클래스로 margin:auto 로 설정함으로써 회색배경이 화면 중간에 위치한다.

//css
.box img{
  position:relative;
  top: 10px;
  left: 10px;
}

: box클래스내부의 img태그에 대한 style으로 postion:relative로 설정해서 위치를 조정하였다.