이미지/텍스트 유형 만들기
사이트에서 이미지/텍스트 부분을 피그마로 디자인 하고 코드로 만들어 보았습니다.
피그마 디자인
CSS
<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%;
height: 515px;
}
.blind{
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* 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__small {
font-size: 14px;
border-radius: 50px;
background-color: #666;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
line-height: 1.5;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* imgtext__wrap */
.imgtext__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.imgtext {
width: 32.3333%;
height: 500px;
}
.imgtext__body .title {
font-size: 50px;
line-height: 120%;
margin-right: 50px;
margin-bottom: 15px;
}
.imgtext__body .desc {
font-size: 16px;
line-height: 155%;
margin-right: 10px;
margin-bottom: 15px;
}
.imgtext__body .nav{
font-size: 16px;
line-height: 155%;
margin-left: 15px;
}
.imgtext__header {
border-radius: 10px;
}
</style>
HTML
<body>
<section class="imgtext__wrap section nexon">
<div class="container">
<div class="imgtext__inner">
<article class="imgtext">
<div class="imgtext__body">
<span class="section__small">notice</span>
<h3 class="title">보더콜리의 <br> 키워드</h3>
<p class="desc">보더콜리는 많은 장점들을 가지고 있는 강아지 입니다. 보더콜리를 보았을때 생각나는 키워드들은 정말 많죠</p>
<ul class="nav">
<li>스마트 (Smart)</li>
<li>민첩 (Agile)</li>
<li>활발 (Energetic)</li>
<li>경주 개 (Racing dog)</li>
<li>지능적 (Intelligent)</li>
<li>높은 학습 능력 (High learning ability)</li>
<li>반응 속도 (Quick reaction time)</li>
<li>허드링 (Hurdling)</li>
<li>양치기 (Herding)</li>
<li>농장 개 (Farm dog)</li>
</ul>
</div>
</article>
<article class="imgtext">
<div class="imgtext__body">
<figure class="imgtext__header">
<img src="../asset/img/borderimage02.jpg" alt="보더콜리 사진1">
</figure>
</div>
</article>
<article class="imgtext">
<div class="imgtext__body">
<figure class="imgtext__header">
<img src="../asset/img/borderimage01.jpg" alt="보더콜리 사진2">
</figure>
</div>
</article>
</div>
</div>
</section>
</body>코드 설명
flex-wrap: wrap; 속성은 Flexbox 컨테이너 내의 아이템들이 한 줄에 모두 표시되지 않고 여러 줄에 걸쳐서 표시되도록 허용합니다.
justify-content: space-between; 속성은 Flexbox 컨테이너 내의 아이템들이 주 축을 따라 정렬될 때, 아이템들 사이에 동일한 간격을 만들고 양 끝단의 아이템들이 컨테이너의 양 끝에 붙도록 배치합니다.
따라서, flex-wrap: wrap;과 justify-content: space-between;을 함께 사용하면, Flexbox 컨테이너 내의 아이템들이 여러 줄에 걸쳐서 표시되면서 동시에 아이템들 사이에 동일한 간격을 유지하며 양 끝단의 아이템들이 컨테이너의 양 끝에 붙도록 배치됩니다.
font-size: 14px;: 버튼 텍스트의 폰트 크기를 14px로 설정합니다.
border-radius: 50px;: 버튼의 테두리를 둥글게 처리하기 위해, 50px 반지름을 가지는 원형으로 설정합니다.
background-color: #666;: 버튼의 배경색을 어두운 회색 (#666)으로 설정합니다.
color: #fff;: 버튼 내부의 텍스트 색상을 흰색 (#fff)으로 설정합니다.
padding: 1px 23px;: 버튼의 내부 여백(padding)을 상하 1px, 좌우 23px로 설정합니다.
text-transform: uppercase;: 버튼의 텍스트를 모두 대문자로 변환합니다.
margin-bottom: 20px;: 버튼 아래쪽에 20px의 마진(margin)을 설정합니다.
display: inline-block;: 버튼을 인라인 블록 요소로 지정합니다. 따라서, 버튼은 다른 인라인 요소처럼 행 내에서 배치되지만, 블록 요소처럼 너비와 높이를 조정할 수 있습니다.
line-height: 1.5;: 버튼 내부의 텍스트 줄 간격(line-height)을 1.5배로 설정합니다. 이를 통해, 버튼 텍스트가 버튼 크기에 균등하게 분배되도록 합니다.
완성된 결과