클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
2번째 웹퍼블리싱 작업 결과
코드
<!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>피그마1</title>
<!-- 폰트 -->
<style>
/* reset */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
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.3); */
}
.nexon {
font-family: "NexonLv1Gothic";
/* h2태그의 기본 성질은 700[bold]로 되어있음. */
font-weight: 400;
}
.section {
padding: 120px 0;
text-align: cetner;
}
.section.center{
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
text-align: center;
}
.section .section__desc{
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
text-align: center;
}
/* image__wrap */
.image__wrap {
/* background-color: rgba(0,0,0,0.1); */
}
.image__inner {
display: flex;
/*
flex-start (기본값) 시작쪽으로 정렬(왼쪽 -> 오른쪽)
flex-end 끝쪽으로 정렬(우측으로 이동 후, 왼쪽->오른쪽 정렬)
center 중앙으로 정렬(가운데로 이동 후, 왼쪽->오른쪽 정렬)
space-between 양쪽 정렬
space-around 요소 좌우 동일 간격
*/
justify-content: space-between;
}
/* image__type */
.image__inner .image {
width: 570px;
height: 370px;
/* background-color: #ccc; */
position: relative;
}
.image__header {
}
.image__body {
position: absolute;
left: 0;
bottom:0;
color: #fff;
text-align: left;
padding: 30px;
}
.image__body .title {
margin-bottom: 15px;
font-size: 32px;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 20%;
}
.image__body .btn {
display: inline-block;
color: #fff;
background-color: rgba(0,0,0,0.5);
padding: 10px 30px;
}
</style>
</head>
<body>
<section class="image__wrap section 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">채소는 식물의 뿌리, 줄기, 잎, 꽃, 열매 등에서 얻어지는 식품으로,
인간의 영양소 섭취에 매우 중요한 역할을 합니다.
</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>
코드 설명
1. section 태그의 .image__wrap은 2번째 section의 내용물이 들어갑니다.
2. div태그의 .container는 모든 내용물들을 가운데로 옮겨줍니다.
3. h2 태그는 "2번째 제목"입니다.(section태그라 2번째 제목으로 정했어요)
4. p태그는 "주제에 대한 설명"을 합니다.
5. div태그 image__inner는 "2개의 이미지"와 "h3, p, a"태그를 담아주는 그릇입니다.
6. 2개의 article태그 .image는 각각 "1개의 이미지"와 "h3, p, a"태그를 담아줍니다.
7. .image__inner는 부모 요소라 display: flex를 줘서 좌우 정렬을 해줍니다.
8. 2개의 article태그 .image는 css 속성을 이용해서 꾸며줍니다.
CSS속성
| display: flex | 왼쪽 -> 오른쪽으로 정렬합니다.(부모 요소에게 할당해야 함) |
| display: inline | 크기를 못 가지고. 왼쪽에서 오른쪽으로 정렬합니다. |
| display: block | 크기를 가지고. 위, 아래로 정렬합니다. |
| display: inline-block | inline속성과 block 속성을 전부 가지고 왼쪽에서 오른쪽으로 정렬합니다. |
| justify-content: space-between | 양쪽 정렬합니다. |
| position: relative | absolute속성을 자기 영역 안에서 움직이게 해줍니다. |
| position: absolute | 부모의 relatvie 영역내에서 자유롭게 이동합니다. |
| padding | 안쪽 여백 조정합니다. |
| margin | 바깥 여백 조정합니다. |
| text-align | 글씨 정렬을 해줍니다. |
| font-size | 글씨 크기를 지정해줍니다. |
| line-height | 글씨의 위, 아래 높낮이를 지정해줍니다. |
| background-coolor | 배경색을 지정합니다. |