Study/Etc
포트폴리오 사이트 만들기 프로젝트 - 이미지 유형, 이미지/텍스트 유형
posey
2023. 5. 11. 22:09
- 포트폴리오 사이트 만들기 프로젝트 - 이미지 유형, 이미지/텍스트 유형
Review
- 포트폴리오 사이트 만들기 프로젝트 - 이미지 유형, 이미지/텍스트 유형
1. 이미지 유형
- HTML
<section id="imageType" class="image_wrap gmarket medium section">
<h2>나만의 공간을 설계하다</h2>
<p>Banner 영역<span class="light"> - 마우스 오버 시 자세한 정보가 나오는
구조입니다.</span></p>
<div class="image_inner container">
<article class="image img1">
<h3 class="image_title">라탄 인테리어</h3>
<p class="image_desc">라탄은 다양한 유형의 가구와 장식을 만드는 데 사용되는
천연 소재로,<br />
내구성이 뛰어나 인테리어 디자인 재료로 인기를 얻고 있습니다.</p>
<a href="/" class="image_btn">자세히 보기</a>
</article>
<article class="image img2">
<h3 class="image_title">북유럽 인테리어</h3>
<p class="image_desc">북유럽 인테리어는 혹독한 추위를 피해 내부는 따뜻함을
느낄 수 있는<br />
배색을 활용합니다. 원목 가구를 활용해 아늑한 감성을 연출합니다.</p>
<a href="/" class="image_btn green">자세히 보기</a>
</article>
</div>
</section>
- CSS
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
ul, li {
list-style: none;
}
em {
font-style: normal;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
.blind {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
line-height: 0;
text-indent: -9999px;
}
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
}
.section > h2 {
font-size: 50px;
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
color: #555;
text-align: center;
margin-bottom: 70px;
}
앞으로 만들 section에서도 재활용하기 위해서 공통 요소는 묶어 뒀다.
/* imageType */
.image_inner {
display: flex;
justify-content: space-between;
}
.image {
width: 49%;
height: 370px;
color: #fff;
padding: 200px 30px 30px 30px;
box-sizing: border-box;
}
.image.img1 {
background: url(img/img_bg01.jpg) no-repeat center / cover;
}
.image.img2 {
background: url(img/img_bg02.jpg) no-repeat center / cover;
}
.image_title {
font-size: 32px;
-webkit-text-stroke: 0.5px #000;
margin-bottom: 10px;
}
.image_desc {
-webkit-text-stroke: 0.12px #000;
margin-left: 2px;
margin-bottom: 10px;
line-height: 1.4;
letter-spacing: -0.8px;
margin-bottom: 10px;
/* 두줄 효과 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.image_btn {
display: inline-block;
color: #fff;
background-color: #633125;
padding: 10px 20px;
}
.image_btn.green {
background-color: #5E5736;
}
2. 이미지 / 텍스트 유형
- HTML
<section id="imTextType" class="imgText_wrap gmarket section">
<h2 class="blind">이미지 텍스트 유형</h2>
<div class="imgText_inner container">
<div class="imgText_txt">
<h3 class="title">유용한 사이트<br />살펴보기</h3>
<p class="desc">웹 디자이너, 웹 퍼블리셔, 프론트엔드 개발자를<br />
위한 유용한 사이트입니다.</p>
<ul class="list medium">
<li><a href="/">듀토리얼 사이트</a></li>
<li><a href="/">레퍼런스 사이트</a></li>
<li><a href="/">웹 폰트 사이트</a></li>
<li><a href="/">CSS 사이트</a></li>
<li><a href="/">WebGL 사이트</a></li>
<li><a href="/">Youtube 사이트</a></li>
</ul>
</div>
<div class="imgText_img img1">
<a href="/" class="medium">CSS 사이트</a>
</div>
<div class="imgText_img img2">
<a href="/" class="medium green">레퍼런스 사이트</a>
</div>
</div>
</section>
- CSS
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
ul, li {
list-style: none;
}
em {
font-style: normal;
}
.blind {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
line-height: 0;
text-indent: -9999px;
}
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* imTextType */
.imgText_inner {
display: flex;
justify-content: space-between;
}
.imgText_txt {
width: 32%;
height: 500px;
}
.imgText_txt .title {
font-size: 50px;
line-height: 1.4;
word-break: keep-all;
margin-bottom: 20px;
}
.imgText_txt .desc {
color: #666;
line-height: 1.4;
margin-bottom: 20px;
}
.imgText_txt .list {
line-height: 1.6;
}
.imgText_txt .list li {
position: relative;
padding-left: 20px;
}
.imgText_txt .list li::before {
content: '';
position: absolute;
left: 5px;
top: 8px;
width: 5px;
height: 5px;
background-color: #666;
border-radius: 50%;
}
.imgText_txt .list li a {
color: #666;
}
.imgText_img {
position: relative;
width: 32%;
height: 500px;
}
.imgText_img a {
position: absolute;
bottom: 20px;
left: 30px;
background-color: #9B7B44;
color: #fff;
padding: 10px 20px 7px 20px;
}
.imgText_img a.green {
background-color: #354724;
}
.imgText_img.img1 {
background: url(img/imgtxt_bg01.jpg) no-repeat center / cover;
}
.imgText_img.img2 {
background: url(img/imgtxt_bg02.jpg) no-repeat center / cover;
}
* 이미지 출처
: unsplash
반응형