오늘과 내일은 여름 휴가?
1박으로 호스텔에서.
방콕에서 만난 사람들과 다같이 놀기로 했다.
그래서 좀 짧은 공부가 될 것이다...
학원에서 자습 시간에 풀었던 HTML 코드.
<!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>
<style>
div#wrap {width: 640px;
margin: 0 auto;}
main {background-color: black;
color: aliceblue;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
font-weight: bold;}
span {color: #2f3bc0;}
aside {text-align: center;
font-weight: bold;
padding-bottom: 50px;}
div.hi {border: 1px solid #e2e2e2;
padding-bottom: 20px;}
{font-size: xx-large;
font-weight: bold;}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<img src="images/apple.jpg" alt="가정용 꿀사과" >
</header>
<main id="main">
<p>확인하세요</p>
</main>
<aside id="aside">
<div class="hi">
<p style="color: #db0a15;">주문 및 배송</p>
<h1><span >오후 2시 이전</span> 주문건은 당일 발송합니다</h1>
<h1>2시 이후 주문건은 다음날 발송합니다(주말 제외)</h1>
</div>
<div class="hi">
<p style="color: #db0a15;">교환 및 환불</p>
<h1>불만족시 <span>100%</span> 환불 해 드립니다</h1>
<h1>고객 센터로 전화주세요</h1>
</div>
<div class="hi">
<p style="color: #db0a15;">고객센터</p>
<h1>0000-0000</h1>
<p>상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</p>
</div>
</aside>
</div>
<!--div#wrap-->
</body>
</html>
대략 65줄 정도 된다...
이걸 정리해보겠다고 다시 해봤는데
오히려 늘어났다.
그 대신 코드는 보기에 깔끔해진 듯하다.
<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>
<style>
div#wrap {
width: 640px;
}
main {
background-color: #000;
color: aliceblue;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
}
aside {
text-align: center;
}
div.text {
border: 1px solid #e2e2e2;
}
div.red {
color: red;
padding-top: 20px;
}
span {
color: blue;
}
div.bold {
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<img src="images/apple.jpg" alt="사과" />
</header>
<main id="main">
<p>확인하세요</p>
</main>
<aside id="aside">
<div class="text">
<div class="red">주문 및 배송</div>
<div class="bold">
<p><span>오후 2시 이전</span> 주문건은 당일 발송합니다</p>
<p>2시 이후 주문건은 다음날 발송합니다(주말 제외)</p></div class>
</div>
<div class="text">
<div class="red">교환 및 환불</div>
<div class="bold">
<p>불만족시 <span>100% 환불</span> 해드립니다</p>
<p>고객센터로 전화주세요</p></div class>
</div>
<div class="text">
<div class="red">고객센터</div>
<div class="bold"> <p>0000-0000</p></div class>
<p>상담시간: 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</p>
</div>
</aside>
</div>
</body>
</html>
'코딩 해보자' 카테고리의 다른 글
| 220711 HTML FORM 배우기 & FTP 오류 해결하기 (0) | 2022.07.12 |
|---|---|
| 220710 백준 처음 접해보기 아니, 처음은 아니지 (0) | 2022.07.10 |
| 220708 시험 & HTML 문제 (0) | 2022.07.08 |
| 220707 (0) | 2022.07.07 |
| 220706 FileZilla 사용하기 (0) | 2022.07.06 |
댓글