결과물

주요 코드

<div class="row4">
  <div class="post">
    <div class="post_title"> 오늘도 펭수는 인사를 한다.</div>
    <div class="post_img"><img src="./static/images/펭수1.jfif"></div>
    <div class="post_main">노란색 배경에 펭수가 서서 오른손으로 인사를 하고있다.</div>
  </div>
</div>

//css
fictures.css
.post{
  margin:40px;
  margin-top: 13px;
  font-family: 'NeoDunggeunmo';
}
.post_title{
  background-color:rgb(231,231,231);
  padding:3px;
  margin-bottom: 13px;
}
.post_img{
  height: 250px;
  text-align:center;
  margin-bottom:13px;
}
.post_img img{
  height:100%;
}
.row4{
  overflow:auto;
}

<div class="row8">
  <a href="home.html"><div class="menu">&nbsp;홈</div></a>
  <a href="#"><div class="menu">&nbsp;다이어리</div></a>
  <a href="pictures.html"><div class="menu">&nbsp;사진첩</div></a>
  <a href="#"><div class="menu">&nbsp;방명록</div></a>
</div>

📌 스크롤

스크롤을 설정하는 속성은 overflow 이다. 스크롤은 안의 내용물이 컨테이너보다 클 때 스크롤이 필요하다.

✅ overflow: visible

✔ 내용물이 컨테이너보다 많으면 컨테이너를 뚫고 모두 그냥 보여진다.

✅ overflow: auto;

✔ 스크롤이 필요할 때만 스크롤이 생긴다.

✅ overflow: scroll;

✔ 항상 스크롤이 뜨게 된다.

✅ overflow: hidden;

✔ 컨테이너 사이즈를 넘는 내용뮬을 보여주지 않는다.

◼ overflow는 overflow-x와 overflow-y속성이 합해진것이다.