<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
</div>
</li>
<li>
<divclass="content">
<h2>타이틀</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
</div>
</li>
<li>
<divclass="content">
<h2>타이틀</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
</div>
</li>
<li>
<divclass="content">
<h2>타이틀</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
</div>
</li>
<li>
<divclass="content">
<h2>타이틀</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
</div>
</li>
<li>
<divclass="content">
<h2>타이틀</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
</div>
</li>
</ul>
</section>
2. css 작성
body 선택자에는 마진과 패딩을 0으로 지정하고 글꼴과 배경색 지정한다. .container는 폭은 100%, 높이는 100vh를 지정한다.
ul 선택자의 폭과 높이는 100%로 지정하고 ul li 선택자에는 초기 크기가 각각 균등하게 보여지도록 폭을 20%로 지정하고 border-box를 지정해서 외곽선을 포함한 크기가되도록 한다.
float 속성의 값을 left로 입력해서 좌측으로 정렬되도록 한다.
Code
body {
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: skyblue;
}
.container {
position: relative;
width: 100%;
height: 100vh;
}
p {
font-size: 20px;
}
ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
margin: 0;
padding: 0;
background: url('imgs/img5.JPG');
background-size: cover;
background-position: left;
}
ulli {
list-style: none;
position: relative;
width: 20%;
height: 100%;
border-right: 1pxsolidrgb(233, 233, 233);
float: left;
box-sizing: border-box;
transition: 0.3s;
text-align: center;
}
ul li:nth-child(1)에 배경이미지를 지정하고 background-size 속성 값은 cover로 지정해서 화면을 채우도록 설정한다.
그 다음 background-position은 left 또는 center를 설정해서 확인한 후 어울리는 것으로 지정한다.
※ :nth-child() 가상클래스는 형제요소들 중에서 지정된 순번의 요소를 지정한다.
Code
ulli:nth-child(1) {
ulli:nth-child(1) {
background: url('imgs/1.jpg');
background-size: cover;
background-position: center;
}
ulli:nth-child(2) {
background: url('imgs/2.jpg');
background-size: cover;
background-position: center;
}
ulli:nth-child(3) {
background: url('imgs/3.jpg');
background-size: cover;
background-position: center;
}
ulli:nth-child(4) {
background: url('imgs/4.jpg');
background-size: cover;
background-position: center;
}
ulli:nth-child(5) {
background: url('imgs/5.jpg');
background-size: cover;
background-position: center;
}
ul에 호버되면 li의 폭은 10%가 되고 li에 호버가되면 폭이 60%가 되고 이를 합치면 100%가 되므로 화면의 채우면서 각 각의 이미지 위로 이동하면 자연스럽게 트랜지션이 되는 것을 확인 할 수 있다.