728x90
반응형
이미지유형 01번
이번에 만들어볼 사이트입니다.
자세히보기가 들어가있는 형식의 사이트입니다.
피그마를 이용하여 이미지를 만들어 작업하였습니다.
CSS
이미지를 백그라운드 효과 방식으로 삽입하였습니다.
flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다.
자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다.
/* font */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
.score {
font-family: 'SCoreDream';
}
/* reset */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
/* common */
.section {
margin: 120px 0;
}
.section>h2 {
font-size: 50px;
text-align: center;
}
.section>p {
font-size: 22px;
color: #666;
font-weight: 300;
text-align: center;
padding-top: 20px;
margin-bottom: 70px;
}
.container {
width: 1160px;
height: 500px;
margin: 0 auto;
padding: 20px 0;
}
/* imageType */
.image__inner {
display: flex;
justify-content: space-between;
}
.image__inner .image {
width: 48%;
background: #ccc;
width: 570px;
height: 370px;
color: #fff;
box-sizing: border-box;
padding: 180px 30px 30px 30px;
}
.image__inner .img1 {
background : url(../card_bg01_01.jpg) no-repeat center / cover
}
.image__inner .img2 {
background : url(../card_bg01_02.jpg) no-repeat center / cover
}
.image h3 {
font-size: 32px;
line-height: 1.4;
text-align: left;
}
.image p {
font-size: 16px;
line-height: 1.4;
margin: 10px 0;
text-align: left;
}
.image a {
background-color: #B45A30;
padding: 10px 20px;
margin-top: 10px;
display: inline-block;
color: #fff;
}
HTML
HTML입니다. section으로 전체를 묶어서 사용하였고 이미지와 내용을 container 영역을 만들어서 article을 만들고 그안에 이미지와 내용을 삽입하였습니다.
</head>
<body>
<section id="imageType" class="image__wrap score section">
<h2>포트폴리오가 실력이다.</h2>
<p>이미지 유형입니다. 마우스 오버시 자세한 정보가 나와있는 구조입니다.</p>
<div class="image__inner container">
<article class="image img1">
<h3>동물원</h3>
<p>포트폴리오는 취업에 있어 정말 중요합니다. 그동안 배웠던 내용을 복습하고 배워봅시다</p>
<a href="#">자세히보기</a>
</article>
<article class="image img2">
<h3>동물원</h3>
<p>포트폴리오는 취업에 있어 정말 중요합니다. 그동안 배웠던 내용을 복습하고 배워봅시다</p>
<a href="#">자세히보기</a>
</article>
</div>
</section>
</body>
</html>
결과
반응형
'사이트 제작' 카테고리의 다른 글
| CSS 활용 - 이미지 유형03 (4) | 2022.08.21 |
|---|---|
| CSS활용 - 이미지 유형02 (3) | 2022.08.21 |
| css 활용 - 카드유형03 (3) | 2022.08.11 |
| css 활용 - 카드유형02 (8) | 2022.08.09 |
| css 활용 - 카드유형01 (5) | 2022.08.09 |
