비교연산자
논리연산자
연산자 우선순위
1.()
2. 단항연산자
3. 산술연산자
4. 비교연산자
5. 논리연산자
6. 대입연산자
-산항조건연산자
조건문 > 어... 쓸게 간단할때.
-삼항조건으로 용돈 관리 페이지 만들기
이 창 뜨기 전 창 3개 뜬다. 지출 입력창.
리셋css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
address, i,em{
font-style: normal;
}
/*img*/
img{
vertical-align: top;
}
/*.blind*/
.blind{
position: absolute;
top: -99999px;
}
/*input*/
/*table*/
/*.skip*/
/*clearFix*/
.clearFix::after{
content: "";;
display: block;
clear: both;
}
/*위의 것들이 추가되어야한다!*/
스타일
body{
font-family: "돋움";
font-size: 16px;
line-height: 1.5;
color: #222;
}
/*.innerBox*/
.innerBox{
padding: 30px;
padding-bottom: 80px;
}
/*header*/
.header{
padding: 18px 0;
}
.logo{
float: left;
}
#nav{
float: right;
/* background-color: green; */
}
#nav>li{
float: left;
margin-left: 20px;
line-height: 50px;
}
/*container*/
#container{
}
#mainBanner>img{
width: 100%;
}
.downArrow{
text-align: center;
transform: rotate(180deg);
padding: 100px 0 20px 0;
}
.listWrap{
display: flex;
justify-content: space-between;
}
.listWrap>div{
width: 31%;
}
.listWrap>div .imgbox img{
width: 100%;
}
.textbox{
padding: 20px 0;
}
.textbox>span{
font;
}
.textbox>p.title{
font-weight: bold;
font-size: large;
padding: 10px 0;
}
/*footer*/
footer{
background: #000;
color: white;
}
address{
position: relative;
top: 50px;
}
.footlogo{
float: right;
position: relative;
right: 50px;
margin: 0;
}
.footinnerBox{
max-width: 1200px;
margin: 0 auto;
padding: 30px;
padding-bottom:40px;
/* background-color: rgba(255,0,0,0.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>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 1. header -->
<header>
<div class="innerBox">
<h1 class="logo"><a href="#"><img src="images/gnb_logo_new.png" alt="logo"></a></h1>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Our coffees</a></li>
<li><a href="#">Our People</a></li>
<li><a href="#">Learning</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</header>
<!-- 2. div#container -->
<div id="container">
<div id="mainBanner">
<img src="images/배너5-1-1500x736.png" alt="">
<p class="downArrow"><a href="#"><img src="images/top-btn.png" width = "40" height = "30"alt=""></a></p>
</div>
<div class="innerBox contents">
<h2 class="blind">커피알아보기</h2>
<!--div.listWrap>div*3>div.imgbox+div.textbox-->
<div class="listWrap">
<div>
<div class="imgbox"><img src="images/main_group1_bg.jpg" alt=""></div>
<div class="textbox">
<span>Ally Open</span>
<p class="title">The Comprehensive Coffee Sample Roasting Course featuring Mark Michaeson</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, voluptas eum. Saepe maxime nobis molestiae error delectus atque sint, libero animi, perferendis laborum, voluptatem cum nemo nihil! Accusantium, delectus totam.</p>
</div>
</div>
<div>
<div class="imgbox"><img src="images/main_group2_bg.jpg" alt=""></div>
<div class="textbox">
<span>Get Inspired</span>
<p class="title">Learn More About Ally's Core Coffees</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, voluptas eum. Saepe maxime nobis molestiae error delectus atque sint, libero animi, perferendis laborum, voluptatem cum nemo nihil! Accusantium, delectus totam.</p>
</div>
</div>
<div>
<div class="imgbox"><img src="images/main_group3_bg.jpg" alt=""></div>
<div class="textbox">
<span>Morning Coffee Forword</span>
<p class="title">The Grupo Montesanto Tavares Sustainabillty Policy</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, voluptas eum. Saepe maxime nobis molestiae error delectus atque sint, libero animi, perferendis laborum, voluptatem cum nemo nihil! Accusantium, delectus totam.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 3. footer -->
<footer>
<div class="footinnerBox clearFix">
<address>서울시 영등포구 당산동 6가 국민은행 건물 6층 3강의실</address>
<p class="footlogo"><img src="images/footer_logo_new.png" alt=""></p>
</div>
</footer>
</body>
</html>
'학원 > 웹' 카테고리의 다른 글
| 10월 17일 웹수업 (카카오 불나서 티스토리 작성이 안돼서 네이버블로그에 썻다 하하) (0) | 2022.10.20 |
|---|---|
| 10/19 웹수업 (0) | 2022.10.19 |
| 10/13 웹수업 (0) | 2022.10.13 |
| 👩🏫js/css-자바스크립트개념-특징,위치,출력,=,;,변수,변수규칙,let,const,사칙연산/리셋css/홈페이지영역/잼코드?/포맷도큐먼 (0) | 2022.10.12 |
| ♧[html]레이아웃/들어가는컨텐츠/테이블,테이블별간격등 (0) | 2022.10.11 |
