728x90
이미지 유형_01
간단한 예제를 통해 자세히 보기 버튼을 만들고 설명과 함께 양옆으로 정렬해 메뉴를 구성해봅니다.
HTML 코드
간단한 이미지 유형 예제를 만들기 위해 기본적인 틀을 만들어 줍니다!
<body class="nexon">
<div class="container section">
<h2>강아지의 모든 모습!</h2>
<p>세상에서 가장 귀여운 강아지의 모든 모습을 상상하고 세세하게 지켜만 보세요!!</p>
<div class="card_container">
<div class="card">
<div class="container"></div>
<div class="text_cont">
<h2>강아지의 모든 모습</h2>
<p>강아지는 왜이렇게 귀여울까요 대체왜 그런건지 궁금하지만 제 생각에는 나야 모르곘지만 아무튼 그런것들이 막 있습니다 그렇게 생각하세요 ^_^</p>
<div class="more">자세히 보기</div>
</div>
</div>
<div class="card">
<div class="container"></div>
<div class="text_cont">
<h2>강아지의 눈썹!</h2>
<p>강아지는 눈썹이 있을까요? 없을까요? 어찌보면 있는거 같기도 하고 본적이 없었던거 같기도하고 생각 해본적이 없던거 같기도 하고 흠...</p>
<div style="background-color:#BD4517" class="more">자세히 보기</div>
</div>
</div>
</div>
</div>
</body>
CSS 코드
설명과 함께 자세히 보기라는 버튼이 아래로 가도록 css를 설정해줍니다.
이미지를 양옆으로 정렬하기 위해 justify-content에 space-between을 주어 양옆으로 .card_container를 정렬합니다.
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* Reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
/* common(공통) */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
/*위 아래 */
}
.section>h2 {
/* ">" 이걸로 section 안에 있는 h2선택 */
font-size: 50px;
line-height: 1;
/* 1이라고 적으면 auto랑 똑같음 */
text-align: center;
margin-bottom: 20px;
}
.section>p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
body{
font-family: 'NexonLv1Gothic';
}
/* card */
.card{
background-color: #ededed;
width: 570px;
height: 370px;
/* padding: 20px; */
position: relative;
color: #fff;
}
.card h2{
font-size: 32px;
}
.card:nth-child(1){
background-image: url(img/bg01_01.jpg);
}
.card:nth-child(2){
background-image: url(img/bg01_02.jpg);
}
.card_container{
display: flex;
justify-content: space-between;
}
.text_cont{
position: absolute;
bottom: 0;
left: 0;
margin: 0px 20px 20px 20px;
}
.text_cont p{
margin-top: 10px;
line-height: 1.5;
font-size: 16px;
font-weight: 300;
}
.text_cont .more{
width: 120px;
height: 38px;
background-color: #CA9A03;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
결과
728x90
반응형
'SITE 제작' 카테고리의 다른 글
| 이미지 유형 03 사이트 만들기! (13) | 2022.08.21 |
|---|---|
| 이미지 유형 02 만들어보기~~~~ (2) | 2022.08.17 |
| 사이트 만들기03 (11) | 2022.08.10 |
| 카드 유형 02 만들어보기! (11) | 2022.08.09 |
| 카드 유형01 만들어보기! (5) | 2022.08.08 |
댓글