안녕하세요 o((>ω< ))o 오늘은 제가 원하는 이미지 타입의 페이지를 만들어 보도록 하겠습니다.
내가 만든 것
암호.
<!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>
* {
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%;
}
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0,0,0,0.1); */
height: 800px;
}
.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;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* image__wrap */
.image__wrap {
/* background-color: rgba(0,0,0,0.1); */
}
.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 {
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: #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="http://xoouxa58.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="image__header">
<img src="../asset/img/imageType01_02.jpg" alt="강아지">
</figure>
<div class="image__body">
<h3 class="title">함께하는 충분한 시간</h3>
<p class="desc">반려견의 시간은 사람보다 짧기 때문에
많은 시간을 함께 보내기 위해 노력해야 합니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>코딩하는 방법
– 원하는 글꼴을 가져오고 글꼴 링크를 설정하십시오.
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
– 페이지의 전체 섹션을 사용하고 있으므로 head 태그에 스타일 태그를 만듭니다.
전체 섹션 *{} 태그를 생성하고 margin: 0을 설정합니다. 채우기 입력: 0;
<style>
* {
margin: 0;
padding: 0;
}
–생성한 웹 페이지는 섹션 위치에 놓일 것이므로 body 태그에 섹션 태그를 생성하고 클래스 이름을 지정합니다. “image__wrap 섹션 넥슨” 나중을 위해 세부 정보를 입력합니다.
<body>
<section class="image_wrap section center nexon">
– 섹션 태그의 자식으로 div 태그를 만들고 클래스 이름을 지정합니다.“컨테이너” 입니다~할 것 같다
<div class="container">
– 스타일 태그로 이동하여 “container” 및 border: 0 atuo의 너비 값을 설정합니다. (가운데 정렬); 적절한 채우기 값을 입력하세요.
배경색 설정 후 높이 값을 설정합니다.
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
background-color: rgba(0,0,0,0.1);
height: 800px;
}
– body 태그로 이동하여 h2 및 p 태그를 사용하여 클래스 이름과 함께 “Container”에 자식으로 원하는 제목 및 부제 설명을 넣습니다. h2 및 p 태그에 클래스 이름을 “section”으로 입력하고 클래스 이름을 각각 “section__h2” 및 “section__desc”로 추가 입력합니다.
<div class="container">
<h2 class="section__h2">반려견을 키우는 최고의 방법</h2>
<p class="section__desc">반려견을 키우기 위해선 많은 노력과 시간과 정성이 필요합니다.</p>
– 스타일 태그로 이동하여 페이지를 검사하고 섹션 태그에 자세히 설명된 클래스 이름에 대한 스타일을 “섹션” 태그에 지정하고 원하는 글꼴 및 글꼴 두께 값을 설정합니다.
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
– 채우기 값 및 텍스트 정렬 입력: 가운데 맞춤;
section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
– 클래스 이름이 “section__h2” 및 “section__desc”인 경우 h2 및 p 태그의 스타일을 지정하고 적절한 글꼴 크기, 글꼴 두께, 색상, 아래 여백 및 행 높이를 각각 지정합니다.
.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;
}
– 본문 태그로 이동하여 클래스 이름을 입력하여 텍스트 아래에 이미지를 넣습니다. “Container”에서 자식으로 div 태그를 만들고 클래스 이름을 “image__inner”로 설정합니다. 그것을 입력
<div class="image__inner">
– 위에서 입력한 div 태그의 자식으로 2개의 이미지를 삽입할 것이므로 보기 쉽도록 2개의 기사 태그와 클래스 이름에 “image”를 입력합니다.
<article class="image"> //두 개 만들기
– 위에서 입력한 두 개의 글 태그 중 자식으로 figure 태그를 사용하여 클래스 이름을 “image__body”로 지정하고 img 링크를 자식으로 포함합니다.
<figure class="image__header">
<img src="http://xoouxa58.asset/img/imageType01_01.jpg" alt="강아지">
</figure>
– 스타일 태그로 이동하여 이미지의 너비와 높이 값, 배경색 및 pdsition:relative를 입력합니다. 클래스 스타일 “image__inner . image”에서.
.image__inner .image {
width: 570px;
height: 370px;
background-color: #ccc;
position: relative;
}
– 이미지를 삽입하면 이미지가 블록 구조이기 때문에 세로로 정렬됩니다. 따라서 다음을 표시하면 flex; image__inner에 스타일을 지정하여 가로로 정렬하고 justify-content: space-between; 스타일을 사용하여 image__inner .image 클래스에 지정된 너비 값에 적절하게 설정하십시오.
.image__inner {
display: flex;
justify-content: space-between;
}
– body 태그로 전환하고 figure 태그 아래에 div 태그를 두 개의 article 태그의 자식으로 지정하고 각 태그를 클래스 이름 “image__body”로 만듭니다. 자식으로는 이미지의 제목과 부제 설명을 나타내기 위해 h3, p 태그를 제공하고 상세 설명 버튼으로 링크 태그를 사용한다.
– h3 태그, p 태그 또는 링크 태그에 클래스 이름 “title”, “desc” 및 “btn”을 지정합니다.
<article class="image">
<figure class="image__header">
<img src="http://xoouxa58.asset/img/imageType01_01.jpg" alt="강아지">
</figure>
<div class="image__body">
<h3 class="title">함께하는 충분한 시간</h3>
<p class="desc">반려견의 시간은 사람보다 짧기 때문에
많은 시간을 함께 보내기 위해 노력해야 합니다.</p>
<a href="#" class="btn">자세히 보기</a>
– a-link 태그에는 밑줄이 있으므로 style 태그로 이동하여 { }를 만들고 test-decoration: none을 입력합니다. 밑줄을 제거합니다.
a {
text-decoration: none;
color: #000;
}
– 스타일 태그로 이동하면 “image_body” 클래스의 요소가 이미지 아래로 이동합니다. 따라서 이미지를 가로질러 이동하려면 먼저 앵커 포인트를 분리합니다. 위치: 절대; 스타일 및 왼쪽 위치 지정: 0; 하단: 0; 임시로 설정됩니다.
.image__body {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
text-align: left;
padding: 30px;
}
– 그런 다음 위치가 상대적인 경우 이미지에 기준점을 제공합니다. “image__inner .image” 클래스에 주어지면 이미지로 이동하고 “image__body” 클래스로 이동하여 텍스트 정렬 스타일을 설정하여 텍스트를 적절하게 정렬하고 그에 따라 패딩을 설정하고 색상을 설정하여 색상을 설정합니다. .
.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 {
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” 클래스에 적절한 색상, 배경색 및 패딩 값을 지정합니다. 위의 p 태그에 있는 문자가 겹치므로 다음을 표시할 수 있습니다. inline-block; 입력.
.image__body .btn {
color: #fff;
background-color: rgba(0,0,0,0.5);
padding: 10px 30px;
display: inline-block;
}
– 제목태그 입력시 글자크기가 너무 굵어서 h1, h2, h3, h4, h5, h6 { }
font-weight 지정: normal;
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
그럼 끝!!!
감사해요