자바스크립트 이미지 유형 페이지는 HTML, CSS, 자바스크립트를 사용하여 이미지 파일을 로드, 표시, 제어하는 웹 페이지입니다.
피그마에서 프레임을 1920*800으로 설정후 다음 레이아웃 그리드 설정을 columns를 12개로 설정하고 margin 값을 380으로 설정합니다.
다음은 이 그림을 코드로 작성해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 유형01</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
/* 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__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
line-height: 1.5;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
}
/* image__wrap */
.image__inner {
display: flex;
justify-content: space-between;
}
.image__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 {
margin-bottom: 15px;
font-size: 32px;
line-height: 1;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right:15%;
}
.image__body .btn {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 30px;
display: inline-block;
}
</style>
</head>
<body>
<section class="image__wrap section center nexon">
<div class="container">
<h2 class="section__h2">여우의 생활</h2>
<p class="section__desc">사막여우는 사막에서 생활 합니다.</p>
<div class="image__inner">
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_01.jpg" alt="낮의 한강">
</figure>
<div class="image__body">
<h3 class="title">사막여우 털의 특징</h3>
<p class="desc">털은 갈색 또는 회색으로 된 부드러운 모피를 가지고 있으며,<br>
눈동자는 크고 밤에 더 잘 보이도록 도와주는 반사체를 가지고 있습니다</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_02.jpg" alt="저녁의 한강">
</figure>
<div class="image__body">
<h3 class="title">사막 여우의 서식처</h3>
<p class="desc">사막여우는 북아프리카와 아시아의<br>
사막 지역에 서식하는 작은 크기의 개과 동물입니다</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html><style> 태그 위의 <link> 태그는 외부 파일을 문서에 연결하는데 사용합니다. 웹폰트를 사용하기 위해 "NexonLv1Gothic.css" 파일을 연결합니다.
<style> 태그는 문서에 스타일을 지정합니다. CSS 코드를 포함하고 있습니다. 스타일은 페이지의 레이아웃과 디자인을 결정합니다. 코드에서는 *, a, h1~h6, img 등의 선택자를 사용하여 전체적인 스타일을 재정의하고 있습니다.
<section> 태그는 문서의 구획을 나누는데 사용합니다. class 속성으로 "image__wrap section center nexon"을 가지고 있습니다. class 속성은 요소에 CSS 스타일을 적용하기 위해 사용됩니다.
.article 클래스로 묶인 두 개의 article 엘리먼트는 이미지와 이미지에 대한 설명 및 버튼이 포함된 구성 요소입니다. 각 article은 .image 클래스로 묶인 엘리먼트와 .image__body 클래스로 묶인 엘리먼트를 포함합니다.
image 엘리먼트는 이미지를 보여주기 위한 블록입니다. .image__header 클래스는 이미지 엘리먼트 내부의 이미지를 묶어줍니다. 이미지는 img 태그를 사용하여 표시되며, width 속성을 100%로 지정하여 부모 요소의 너비에 맞추어 표시됩니다. 이미지 위에 텍스트를 표시하기 위해 .image__body 클래스를 사용합니다.
.image__body 엘리먼트는 이미지에 대한 설명과 버튼을 포함합니다. .title 클래스는 이미지의 제목을 나타내며, .desc 클래스는 이미지에 대한 설명을 포함합니다. 버튼은 .btn 클래스를 사용하여 표시됩니다. 버튼은 href 속성을 사용하여 링크를 지정할 수 있습니다.
figure 태그는 일반적으로 이미지나 삽화 등의 그래픽 요소와 캡션을 함께 그룹화할 때 사용됩니다. 이것은 일반적으로 그림 주석이나 이미지에 대한 추가 정보를 제공하는 데 사용됩니다.
