이미지 유형 사이트
완성 화면
코드 보기 / CSS
/* 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%;
}
.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: #AC43FF;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.section__h2 {
font-size: 50px;
color: #000;
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;
}
.img-text__inner {
justify-content: space-between;
display: flex;
flex-wrap: wrap;
}
.img-text__inner .text {
width: 374px;
height: 500px;
margin-right: 15px;
}
.image__body {
width: 374px;
height: 500px;
margin-right: 10px;
border-radius: 10%;
}
</style>
코드 보기 / HTML
<section class="img-text__wrap section nexon">
<div class="container">
<div class="img-text__inner">
<article class="text">
<span class="section__small">notice</span>
<h2 class="section__h2">나선형 은하(Spiral Galaxy)</h2>
<span class="desc">나선형 은하는 중심 부분에 바(bar)와 팔(arm) 형태로 뻗어나가는 구조입니다.</span>
<p class="desc">
나선형 은하 안에는 주로 별들이 모여있는 은하원반이 있습니다. 이 은하원반 안에는 다양한 크기와 모양의 은하들이 분포해 있습니다.
이러한 은하들은 대부분 나선형 은하 안의 중심 부분인 바 주변이나 나선형 팔 사이에 위치하고 있습니다. 이러한 은하들을 위성 은하(Satellite Galaxy) 또는 동반 은하(Companion Galaxy)라고 합니다.
이렇게 나선형 은하 안에 위치한 위성 은하들은 나선형 은하와 서로 상호작용하면서 형태를 바꾸는 등의 영향을 끼치기도 하며, 형태에 따라 다양한 종류가 있습니다.</p>
</article>
<article class="image">
<figure class="image__body">
<img src="../asset/img/img-textType01_01.jpg" alt="나선 은하">
</figure>
</article>
<article>
<figure class="image__body">
<img src="../asset/img/img-textType01_02.jpg" alt="나선형 은하">
</figure>
</article>
</div>
</div>
</section>
.img-text__inner {
justify-content: space-between;
display: flex;
flex-wrap: wrap;
}
jusrify-content: space-between;
: img-text__inner 요소 안에 자식 요소로 있는 두 장의 이미지와 텍스트를 일정한 간격으로 떨어뜨리기 위해 요소들을 양끝으로 정렬하는 속성을 주었음.
display: flex;
:내부 요소들을 배치하기 위해 해당 요소를 플렉스 컨테이너로 만듦.
flex-wrap
:내부 요소들이 한 줄로 배치되는 것이 아니라 여러 줄로 나누어서 배치되도록 함.
요소들이 부모 요소의 너비를 벗어날 경우 자동으로 줄바꿈 되어 다음 줄에 배치됨.
또한, 이미지와 텍스트 박스를 정렬하기 위해서는 전부 article로 감쌀 필요가 있었음.
article로 감싸주지 않을 시, 독립적인 컨텐츠 영역이 정의되지 않아 jusrify-content: space-between; 속성이 먹히지 않음.
.image__body {
width: 374px;
height: 500px;
margin-right: 10px;
border-radius: 10%;
}
image__body 라는 클래스명을 가진 요소들의 너비와 높이를 지정해주는 속성으로, 여기서는 두 장의 이미지에 사용되었다.
이미지의 가로 너비(width)를 374px로 지정하였고, 세로 높이(height)를 500px로 지정하였다.
이미지 사이에 적당한 간격을 주기 위해 margin-bottom : 10px 속성을 주었고,
모서리를 살짝 둥굴게 처리하기 위해 border-radius: 10% 속성을 주었다.
<section class="img-text__wrap section nexon"> <seciton>section 태그 안에 있는 모든 요소들에 폰트가 적용될 수 있도록 클래스명 nexon을 작성함.
section 안에 있는 small 태그나, h2 태그가 미리 작성해놓은 css의 속성을 상속받을 수 있도록 클래스명 section을 작성함
<span class="desc">나선형 은하는 중심 부분에 바(bar)와 팔(arm) 형태로 뻗어나가는 구조입니다.</span>
<p class="desc">
나선형 은하 안에는 주로 별들이 모여있는 은하원반이 있습니다. 이 은하원반 안에는 다양한 크기와 모양의 은하들이 분포해 있습니다.
이러한 은하들은 대부분 나선형 은하 안의 중심 부분인 바 주변이나 나선형 팔 사이에 위치하고 있습니다. 이러한 은하들을 위성 은하(Satellite Galaxy) 또는 동반 은하(Companion Galaxy)라고 합니다.
이렇게 나선형 은하 안에 위치한 위성 은하들은 나선형 은하와 서로 상호작용하면서 형태를 바꾸는 등의 영향을 끼치기도 하며, 형태에 따라 다양한 종류가 있습니다.</p>
</article>
이전의 유형들과는 다르게 소제목이 없으며, 큰 제목을 제외한 모든 텍스트들이 글자색과 글자 크기 등 자잘한 속성이 모두 같기 때문에 따로 속성을 주지 않고,
각각 span 태그, p 태그에 desc 클래스를 추가하여 한꺼번에 같은 속성이 적용되도록 하였다.