이미지/텍스트 유형 01

사이트 만들기

이번 사이트는 이미지/텍스트 유형입니다.

---

○ 이미지/텍스트 유형 01

이미지/텍스트 유형은 한 아티클에 이미지 구역과 텍스트 구역이 조합되어 있는 유형입니다.

▶ HTML 파트

<section id="imgTextType" class="mgText__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>

텍스트 구역과 2개의 이미지 구역을 나누어 총 3가지 구역을 설정합니다.
이미지의 경우 CSS를 이용해 배경으로 넣기 위해 각각의 이미지 구역에 클래스를 지정하였습니다.

▶ CSS 파트

/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
em, i, address {
font-style: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
}
.section {
padding: 120px 0;
}
.section > h2 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
.gray {
background-color: #f5f5f5;
}
.section > span {
display: block;
text-align: center;
font-size: 16px;
text-decoration: underline;
text-underline-position: under;
margin-bottom: 16px;
}
.mb70 {
margin-bottom: 70px !important;
}
/* 블라인드 효과 */
.blind{
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden
}
/* 목록 초기화 */
li,
ol,
ul {
list-style: none;
}

/* imgTextType */
.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;
margin-bottom: 10px;
color: #666;
}
.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;
padding: 10px 30px;
font-size: 18px;
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 / cover;
}
.imgText__img.img2 {
background: url(img/imgText_bg02.jpg) no-repeat center / cover;
}

이번 유형은 기존과 다르게 큰 제목 부분을 blind 효과로 가렸습니다. blind 효과를 잘 활용하면 웹표준을 준수할 수 있습니다.

css는 공통 부분을 잘 활용하면 상당히 편해집니다. 또한 css를 부분 별로 나누어 외부 시트를 만들면 필요한 부분만 적용해 전반적인 작업이 빨라질 수 있습니다.

※ 텍스트 밑줄 효과

text-decoration
선으로 텍스트를 꾸미는 속성입니다.

none : 선을 만들지 않습니다.
line-through : 글자 중간에 선을 만듭니다.
overline : 글자 위에 선을 만듭니다.
underline : 글자 아래에 선을 만듭니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

text-decoration: underline 으로 텍스트 밑 줄을 그을 시 텍스트에 딱 붙어서 그어집니다. 이런 문제를 해결하기 위한 속성 또한 존재합니다.

text-underline-position: under
텍스트의 밑 줄 위치를 텍스트의 약간 밑으로 내립니다.

※ 완성된 형태

원본 소스 보기