728x90
🧷 사이트를 제작해보자! [💁🏻♀️ 이미지 텍스트 편]
이미지 텍스트 유형은 말 그대로 이미지와 텍스트로 이루어진 유형으로 웹사이트를 얼굴, 몸(발 제외), 발의 구조로 비유하자면 몸에 해당하는 부분입니다.
몸 부분에는 여러 유형으로 사이트를 만들어 줄 수 있는데 이번에는 이미지 텍스트 유형을 통해 사이트를 만들어보도록 하겠습니다.
몸 부분에는 여러 유형으로 사이트를 만들어 줄 수 있는데 이번에는 이미지 텍스트 유형을 통해 사이트를 만들어보도록 하겠습니다.
이미지 텍스트(image text) 함께 만들어 보아요❗️
🔨 제작 방법
➰ Figma 사용
사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다.
figma를 이용하여 레이아웃을 설정해줄 수 있습니다.
➰ vscode를 통해 코딩해주기! : HTML편
레이아웃을 다 설정해줬다면 코딩을 해봅시다!
html의 body 부분에 레이아웃 구역을 정해줍니다.
<section id="imageTextType" class="imageText__wrap nexon section gray">
<h2 class="blind">유용한 사이트 살펴보기</h2>
<div class="imgText__inner container">
<div class="imgText__txt">
<span>이미지 텍스트 유형01</span>
<h3>유용한 사이트 살펴보기</h3>
<p>웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다.</p>
<ul>
<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="/">레퍼런스 사이트</a>
</div>
<div class="imgText__img img2">
<a href="/" class="blue">튜토리얼 사이트</a>
</div>
</div>
</section>
➰ vscode를 통해 코딩해주기! : CSS편
style을 통해 CSS를 설정해줍니다.
하나하나 세심하게 스타일을 넣어주는 것이 중요합니다.
/* imageTextType */
.imgText__inner {
display: flex;
justify-content: space-between;
}
.imgText__inner > div {
width: 32%;
height: 500px;
}
.imgText__txt span{
font-size: 16px;
color: #666;
text-decoration: underline;
text-underline-position: under; /* 텍스트 언더라인 위치 */
margin-bottom: 20px;
display: block;
}
.imgText__txt h3 {
font-size: 50px;
font-weight: 300;
/* 문단에서 끊어지기 */
word-break: keep-all;
line-height: 1.4;
margin-bottom: 20px;
}
.imgText__txt p {
font-size: 18px;
font-weight: 300;
line-height: 1.5;
color: #666;
margin-bottom: 10px;
}
.imgText__txt ul {
font-size: 18px;
font-weight: 300;
line-height: 1.6;
}
.imgText__txt ul li {
position: relative;
padding-left: 20px;
}
.imgText__txt ul li a {
color: #666;
}
.imgText__txt ul li::before{
content:'';
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
left: 5px;
top: 9px;
background: #666;
}
.imgText__img {
border-radius: 10px;
position: relative;
}
.imgText__img a {
position: absolute;
left: 30px;
bottom: 30px;
background-color: #7c2b39;
color: #fff;
font-size: 18px;
padding: 10px 30px;
border-radius: 30px;
display: inline-block;
}
.imgText__img a.blue {
background-color: #2b387c;
}
.imgText__img.img1 {
background: url(img/imgText_bg01.jpg) no-repeat center;
}
.imgText__img.img2 {
background: url(img/imgText_bg02.jpg) no-repeat center;
}
댓글