클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
1.완성본
section 1번, 2번에 썻던거 3번 반복하네요.
이번에도 section태그 3번째 작업물입니다.
2.HTML&CSS코드
<!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>텍스트 유형2</title>
<style>
/* reset */
* {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
img {
/* 이미지 적용시 여백이 남았을때 사용 해야함. */
vertical-align: top;
}
/* 시각장애인(웹표준) */
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden
}
.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.3); */
}
/*
.section.center{
text-align: center;
}
*/
.nexon {
font-family: "NexonLv1Gothic";
/* h2태그의 기본 성질은 700[bold]로 되어있음. */
font-weight: 400;
}
img {
width: 100%;
vertical-align: top;
}
.notice__small {
display: inline-block;
font-size: 14px;
border-radius: 50px;
background-color: rgba(208, 211, 55, 0.8);
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 10px;
}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0,0,0,0.3); */
}
.text2__wrap {
padding: 120px 0;
}
.text2__wrap span {
display: block;
width: 100px;
height: 22px;
border-radius: 50px;
background-color: #D0D337;
text-align: center;
margin-bottom: 16px;
color: #fff;
}
.bread__wrap {
display: flex;
box-sizing: border-box;
}
.bread__wrap .bread__explain {
width: 32.3333%;
margin-right: 1%;
/* background-color: #ccc; */
}
.bread__wrap .bread__explain h2 {
text-align: left;
font-size: 50px;
}
.bread__wrap .bread__explain p {
color: #666;
text-align: left;
line-height: 1.6;
}
.bread__wrap .bread__explain p.bread__turf {
margin-top: 25px;
margin-bottom: 16px;
}
.bread__wrap .bread__img1 {
width: 32.3333%;
margin-right: 1%;
}
.bread__wrap .bread__img2 {
width: 32.3333%;
}
</style>
</head>
<body>
<section class="text2__wrap section center nexon">
<div class="container">
<span>NOTICE</span>
<div class="bread__wrap">
<div class="bread__explain">
<h2>맛있는 빵<br> 다양한 종류</h2>
<p class="bread__turf">빵은 매우 다양한 종류가 있지만, 여기에 몇 가지 대표적인 빵의 종류를 나열해 보겠습니다.</p>
<p>1.식빵 (White bread): 밀가루, 물, 효모, 설탕 등을 사용하여 만든 기본적인 빵으로, 부드러운 식감과 담백한 맛이 특징입니다.</p>
<p>2.프렌치 빵 (French bread): 프랑스에서 유래한 빵으로, 밀가루, 물, 효모, 소금을 사용하여 만들며, 바삭한 외피와 쫄깃한 내용물이 특징입니다.</p>
<p>3.베이글 (Bagel): 유대인 커뮤니티에서 유래한 빵으로, 매우 밀도가 높은 반죽으로 둥글게 만들어져, 끓는 물에 찐 후 오븐에서 구워져서 외피는 딱딱하고, 속은 쫄깃한 맛이 특징입니다.</p>
</div>
<div class="bread__img1">
<figure>
<img src="../result/img/bread1.png" alt="빵 집~~">
</figure>
</div>
<div class="bread__img2">
<figure>
<img src="../result/img/bread2.png" alt="빵 제작~~">
</figure>
</div>
</div>
</div>
</section>코드 설명
1.와. section태그 3번째 올리네요..
2.다시 또 3번 반복 똑같은 말 들어가네요
3. section 태그의 .text2__wrap은 3번째 내용물이 전부 들어갑니다.
4. div태그의 .container는 안에 내용물 전부를 가운데에 옮겨줍니다.
5. sapn태그는 글씨로 "NOTICE"라고 써놓았습니다.
6. div태그의 .bread__wrap은 div태그 3개를 담아줍니다.^_^.. ㄷㄷ
7. div태그 .bread__explain은 p태그로 설명 글을 적었습니다.
8. div태그 .bread__img1은 이미지 1개를 넣었습니다.
9. div태그 .bread__img1은 이미지 2개를 넣었습니다.
10. div태그의 .bread__wrap은 부모라 display: flex;를 줍니다.
와 1번,2번째는 학원에서 선생님이랑 같이하고
3번부터 혼자하는데 5분도 안걸려서 끝났네요..
무한반복......