이미지 유형 사이트
완성화면
코드 보기 / 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%;
}
.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;
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;
}
/* imag_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: #fff;
text-align: left;
padding: 30px;
}
.image__body .title {
font-size: 32px;
line-height: 1;
margin-bottom: 15px;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 20%;
}
.image__body .btn {
color: #000;
background-color: #fff;
padding: 10px 30px;
display: inline-block;
}
.container .section__h2 {
font-weight: 700;
}
코드 보기 / HTML
<section class="image__wrap section center nexon">
<div class="container">
<h2 class="section__h2">Milky way</h2>
<p class="section__desc">Milky way는 은하수 뿐 아니라 우리 은하를 가리키는 말이기도 합니다.</p>
<div class="imag_inner">
<article class="image">
<figure class="img__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="img__header">
<img src="../asset/img/imageType01_02.jpg" alt="우리 은하의 물리적 크기">
</figure>
<div class="image__body">
<h3 class="title">우리 은하의 물리적 크기</h3>
<p class="desc">우리 은하의 원반은 직경이 약 100,000광년이고, 평균적으로 약 1,000광년 두께입니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
vertical-align
:CSS 속성 중 하나로, 인라인 요소나 테이블 셀 요소의 수직 정렬을 지정하는 속성이다.
baseline, top, middle, bottom, text-top, text-bottom, sub, super 등의 다양한 속성 값이 있다.
각각의 속성값은
baseline
:요소의 기준선을 부모 요소의 기준선과 맞춤
middle
: 요소의 중앙을 부모 요소의 중앙과 맞춤
bottom
: 요소의 아랫부분을 부모 요소의 아랫부분과 맞춤
text-top
: 요소의 윗부분을 부모 요소의 폰트 윗부분과 맞춤
text-bottom
: 요소의 아랫부분을 부모 요소의 폰트 아랫부분과 맞춤
sub
: 요소를 부모 요소의 아래 첨자 1 로 정렬함.
super
: 요소를 부모 요소의 위 첨자 2로 정렬함.
vertical-align : top
: 요소의 윗부분을 부모 요소의 윗부분과 맞춘다.
figure
: figure 요소는 독립적인 컨텐츠, 일반적으로 이미지나 동영상, 삽화 등을 그룹화 하기 위해 사용된다.
시각적으로 컨텐츠의 그룹화 등을 나타내는데 사용되며, 웹 페이지의 접근성을 향상 시키기 위해 스크린 리더 등 보조 기술에서 컨텐츠의 그룹화를 알려주는 역할도 한다.
자식 요소로는 figcaption, img, video, adio가 있다.
| figucaption | figure 요소에 포함된 컨텐츠에 대한 설명이나 캡션을 제공하는 요소 |
| img | 이미지를 삽입하기 위한 요소 |
| video | 동영상 컨텐츠를 삽입하기 위한 요소 |
| audio | 오디오 컨텐츠를 삽입하기 위한 요소 |
display
:요소를 어떻게 보여줄지를 지정하는데 사용됨.
요소를 블록 레벨 요소, 인라인 요소, 플렉스 박스, 그리드 등의 다양한 형태로 보여줄 수 있음.
display 속성을 사용하여 요소의 보이는 방식을 지정함으로써 웹 페이지의 레이아웃을 구성할 수 있다.
자식 요소로는 block, inline, inline-block, none, flex, gird 등이 있다.
| block | 요소를블록 레벨 요소로 표시함. 새로운 줄에서시작하며, 전체 너비를 차지함 |
| inline | 요소를 인라인 요소로 표시함. 새로운 줄에서 시작하지 않으며, 컨텐츠의 너비만큼 공간을 차지함 |
| inline-block | 요소를 인라인 요소로 표시하면서, 블록 레벨 요소의 속성을 가짐. |
| none | 요소를 화면에서 숨기며, 요소의 영역까지 사라짐 |
| flex | 플렉스 박스로 요소를 표시함. 플렉스 컨테이너 안에서 요소를 정렬하고 배치할 수 있는 유연한 레이아웃 제공 |
| gird | 요소를 그리드 컨테이너 안에서 그리드 아이템으로 표시 그리드 아이템은 행과 열로 구성된 그리드 안에서 배치됨 |
display: inline-block
: 요소를 인라인 요소처럼 취급하면서도 블록 레벨 요소의 특성을 가지게 만든다.
즉, 요소는 한 줄에 표시 되지마 너비나 높이, 여백 등의 속성을 가질 수 있다.
font-weight
:글꼴의 두께를 지정하는데 사용되며, 글꼴의 두께를 조절할 수 있다.
보통 글꼴의 두께는 100~900까지의 값 중에서 지정됨.
| nomal | 기본 값으로 평범한 글꼴 두께를 나타냄. (400과 같음) |
| bold | 굵은 글꼴 두께를 나타냄 (700과 같음) |
| bolder | 상위 요소보다 더 굵은 글꼴 두께를 나타냄 |
| lighter | 상위 요소보다 더 얇은 글꼴 두께를 나타냄 |
| 100~900 | 지정한 값에 해당하는 글꼴 두께를 나타냄. |