반응형
이미지 타입 사이트
웹 디자인에서 이미지는 중요한 역할을 담당하며 웹 페이지의 시각적인 효과를 높이는 데 기여합니다.
[ 완성된 이미지타입 사이트 ]
VSCode
<body>
<section class="image__wrap section center nexon">
<div class="container">
<h2 class="section__h2">어떤 간식이 더 맛있을까</h2>
<p class="section__desc">어떤 간식이 야무지게 나를 만족시킬수 있을까요?</p>
<div class="imag__inner">
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_01.jpg" alt="사탕을 입에 넣어보세요">
</figure>
<div class="image__body">
<h3 class="title">사탕을 입에 넣어보세요</h3>
<p class="desc">다 녹을때까지 깨물어 먹지마세요.천천히 녹여 드셔야 오래갑니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_02.jpg" alt="크게 한입 깨물어보세요">
</figure>
<div class="image__body">
<h3 class="title">크게 한입 깨물어보세요</h3>
<p class="desc">달콤함을 커피와 함께 드시면 좋습니다</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
이제 슬슬 좀 구조가 익숙해 지고 있습니다.
image__wrap 태그 틀 안에 이미지 두 장을 넣을 container 태그 클래스를 만들고
그 안에 image 아티클 태그 클래스를 두 개를 넣어 사진 자리를 잡은 뒤,
figure 태그를 사용해 사진을 넣었는데 figure는 처음 보는 태그라 검색을 해봤습니다.
CSS Figure 속성은 이미지나 동영상 등의 미디어 콘텐츠를 표시하는 HTML 요소를 스타일링하는 데 사용됩니다.
Figure 요소는 일반적으로 이미지와 캡션을 포함하며, CSS Figure 속성은 이러한 콘텐츠의 스타일을 조정할 수 있도록 합니다.
- figure: Figure 요소에 대한 스타일을 지정합니다.
- figcaption: Figure 요소의 캡션에 대한 스타일을 지정합니다.
라고 합니다. 여튼 독립적인 이미지를 넣을 때 사용 하는느낌으로 보면 될거같습니다!
여튼 figure태그안에 사진넣고~ 텍스트를 정리 하기위해 image__body 클래스를 만들어
그 안에 h3, p, a등 텍스트 들을 넣어주면 됩니다~
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
color: #000000ed;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
}
/* image__type */
.imag__inner {
display: flex;
justify-content: space-between;
}
.imag__inner .image {
width: 570px;
height: 370px;
background-color: #ccc;
position: relative;
}
.image__body {
position: absolute;
left: 0;
bottom: 0;
color: #000000;
text-align: left;
padding: 30px;
}
.image__body .title{
margin-bottom: 15px;
font-size: 32px;
line-height: 1;
}
.image__body .desc{
margin-bottom: 15px;
line-height: 1.5;
padding-right: 35%;
}
.image__body .btn{
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 30px;
display: inline-block ;
}
</style>맨 위에 링크는 글씨체 링크입니다.
.imag__inner 에 flex를 넣어주고,
justify-content: space-between 를 넣어 사진을 비율 맞게 사이드로 자리를 나눠줍니다.
사진이 반복되는 구조라 태그설명이 그리 길게 할게없습니다.
사진태그, 텍스트 태그들을 자리를 잘 잡아주는 연습이 많이 필요할 거 같습니다..후