![[2021/12/31]국비지원 CSS3 11-(6) 클론코딩 예제: html5헤럴드](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcpLiGJ%2Fbtrsc1Y0ib1%2FfW7yR65K40sgej5rLK0Xj0%2Fimg.jpg)
원본
작업내용
html
<!DOCTYPE html>
<html lang="en">
<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>html5 헤럴드</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrap">
<header>
<h1>HTML5 <img src="images/logo.png" alt="로고"> 헤럴드</h1>
<h2>HTML5 & CSS3를 이용해 옛 신문 스타일을 재현하다</h2>
<nav>
<h2 class="blind">주메뉴</h2>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">등록</a></li>
</ul>
<p>Vol.MMXI</p>
<p>June 4, 1904</p>
</nav>
</header>
<main>
<div class="content1">
<article>
<video width="373" height="280" autoplay controls poster="images/ford-plane-still.png" src="media/ford-plane-takes-off.mp4" type="video/mp4"></video>
<h2>마지막 미개척지 비디오, 드디어 정복하다!</h2>
<div class="text">
<p>
Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla.
</p>
<p>
In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis.
Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus.
</p>
<p>
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas.
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
<p>
Neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum.
Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit,
eu euismod magna sapien ut nibh.
</p>
</div>
</article>
<article>
<h2>엄청난 일이 CSS 단으로 가능해지다!</h2>
<div class="text">
<p>
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
<p>
Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi.
Duis aliquet egestas purus in blandit.
</p>
<p>
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas.
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
<p>
Neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum.
Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit,
eu euismod magna sapien ut nibh.
</p>
<p>
Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi.
Duis aliquet egestas purus in blandit.
</p>
</div>
</article>
</div>
<div class="content2"><!-- 기사 머리말에도 header,본론div,footer 가능 -->
<article>
<header>
<h2>더 새로워진 텍스트 섀도</h2>
<h3>어떻게 가능한가?</h3>
</header>
<div class="text">
<p>
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
<p>
Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit.
</p>
</div>
</article>
<article>
<header>
<h2>WAI-ARIA? 아하!</h2>
<h3>폼 접근성</h3>
</header>
<figure>
<img src="images/cat.png" alt="고양이사진">
<figcaption class="blind">고양이</figcaption>
</figure>
<figure>
<img src="images/computer-mouse-pic.png" alt="컴퓨터마우스 사진" width="30px">
<img src="images/computer-mouse-pic.png" alt="컴퓨터마우스 사진" width="30px">
<img src="images/computer-mouse-pic.png" alt="컴퓨터마우스 사진" width="30px">
<figcaption class="blind">마우스</figcaption>
</figure>
<div class="text">
<p>
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum.
</p>
<p>
Nam vestibulum, arcu sodales feugiat.
</p>
</div>
</article>
<article>
<header>
<h2>MODERNIZR 타임즈</h2>
<h3>새로운 시대</h3>
</header>
<div class="text">
<p>
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum.
</p>
<p>
Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit.
</p>
</div>
</article>
</div>
<div class="content3">
<aside class="quick_menu">
<h2 class="blind">광고</h2>
<article>
<h3>수배중</h3>
<p></p>
<a href="#"><HTML5> & {CSS3}</a>
<p>보상:행복과 만족</p>
</article>
<article>
<h3>Put<br> your <span>dukes </span>up sire</h3>
<p>싹싹 비는 편이 좋을 텐데,<br>흠씬 얻어맞게 될테니!</p>
</article>
<article>
<h3><a href="#">HTML5 & CSS3<br>단행본으로!</a></h3>
</article>
<article>
<h3>지금 계신 곳이 어딘가요?</h3>
<form action="/" method="post">
<fieldset>
<legend class="blind">지도</legend>
<input type="button" value="알려주세요!">
</fieldset>
</form>
</article>
</aside>
<article>
<header>
<h2>CSS TRANSITIONS - THE STATE OF PLAY</h2>
<h3>과연 그 미래는?</h3>
</header>
<div class="text">
<p>
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
<p>
Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum.
</p>
<p>
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
<p>
Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at. vestibulum. Nulla at.
</p>
<p>
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
<p>
Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at. vestibulum. Nulla at.
</p>
</div>
</article>
</div>
</main>
<footer>
<section>
<h2 class="blind">인물소개</h2>
<section>
<h3>알렉시스 골드스타인</h3>
<p>
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
</section>
<section>
<h3>루이스 라자리스</h3>
<p>
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
</section>
<section>
<h3>에스텔 웨일</h3>
<p>
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.
</p>
</section>
</section>
<address>
<small>ⓒ SitePoint</small>
<a href="#"><img src="images/logo-sp.png" alt="SitePoint로고"></a>
</address>
</footer>
</div>
</body>
</html>
main.css
@import url(reset.css);
/* main.css */
/* common */
*{margin:0;padding:0;}
body{font-size:13px;font-family:'Times New Roman', Times, serif;color: #484848;height:100%;
line-height: 1;background:url(../images/bg-main.gif) repeat 0 0;}
a{color:#484848;text-decoration: none;display:block;}
#wrap>header>nav li a:hover{text-decoration: underline;}
main h2,footer>section h3{font-family:leaguegothic,sans-serif;text-transform: uppercase;
text-shadow: 1px 1px 0 #fff;font-size: 22px;margin: 0 0 8px;}
main p,footer>section p{line-height: 1em;text-align: justify;word-break: break-all;
padding:0 0 13px;}
/* font */
@font-face {
font-family: acknowledge;
src: url(../fonts/Acknowledgement-webfont.ttf);
src: url(../fonts/Acknowledgement-webfont.woff);
}
@font-face {
font-family: leaguegothic;
src: url(../fonts/League_Gothic-webfont.ttf);
src: url(../fonts/League_Gothic-webfont.woff);
}
/* layout */
#wrap{width:758px;margin:6px auto;border-top:1px solid #8e8e8e;
background: url(../images/bg-texture.png) no-repeat 50% 0;}
#wrap>header{width:758px;border-top:1px solid #8e8e8e;margin:1px 0;padding-top:8px;
text-align: center;border-bottom:1px solid #8e8e8e;position:relative;}
main{width:758px;border-top: 1px solid #8e8e8e;padding:10px 0;}
main::after{content: "";display: block;clear: both;}
/* .content1{float:left;width:375px;padding-right:4px;}
.content2{float:left;width:130px;}
.content3{float:left;width:244px;padding-left: 4px;} */
main>div{float:left;}
main>div:first-of-type{width:375px;padding-right:4px;}
main>div:nth-of-type(2){width:130px;}
main>div:last-of-type{width:244px;padding-left: 4px;}
#wrap>footer{width:758px}
/* header */
#wrap>header>h1{font-size: 60px;text-shadow: 1px 1px 1px #fff;}
#wrap>header>h2{font-family:leaguegothic,sans-serif;text-transform: lowercase;font-size: 16px;line-height: 2;letter-spacing: 2px;}
#wrap>header>nav{border-top: 3px double #8e8e8e;height:28px;}
#wrap>header>nav>ul{width:10.2em;margin:0 auto;}
#wrap>header>nav>ul::after{content:"";display:block;clear:both;}
#wrap>header>nav li{list-style: none;float:left; width:5em;text-align: center;}
#wrap>header>nav li a{line-height: 27px;}
#wrap>header>nav p{position:absolute;bottom:0;line-height:27px;}
#wrap>header>nav p:last-child{right:0px;}
/* main */
/* content1 */
video{margin-bottom: 12px;}
main>div:first-of-type h2{font-size:33px;padding: 0 0 4px;letter-spacing: -1px;}
.contain article .text{column-count: 3;column-width:9em;column-gap: 10px;margin-bottom: 20px;}
/* content2 */
.content2 article {border-left: 1px solid #959595;border-right: 1px solid #959595;
padding:0 4px;}
.content2 article header,.content3 article header{padding:0 0 10px;margin: 0 0 5px;background: url(../images/bg-subhead.gif) no-repeat 50% 100%;}
.content2 article header h2{font-family:leaguegothic,sans-serif;letter-spacing: -1px;}
.content2 article header h3, .content3 article header h3{font-weight: bold;font-size:14px;background: url(../images/bg-header.gif) no-repeat 50% 0;text-align:center;padding: 7px 0 0;}
.content2 article figure:nth-of-type(2){text-align: center;margin: 0 0 13px;}
/* content3 */
aside>article{width:236px;border:1px solid #ccc;margin-bottom:5px;}
aside>article:first-of-type h3{font-size:36px;font-family:acknowledge, sans-serif;
letter-spacing: 0.1em;margin:0;text-align:center;}
aside>article:first-of-type h3::first-letter{letter-spacing: -0.1em;}
aside>article:first-of-type p + a{display:block;background-color:#484848;color:#fff;text-shadow: 3px 3px 1px #000;
font-size: 28px;font-family:acknowledge,san-serif;border: 2px double #fff;border-radius: 15px;
text-align: center;margin:5px 5px 9px;box-shadow: 2px 5px 0 #484848;padding: 15px 0;}
aside>article:first-of-type p + a:hover{box-shadow: 4px 10px 0 #484848;position:relative;left:-2px;top:-5px;}
aside>article:first-of-type p:last-of-type{text-align: center;}
aside>article:nth-of-type(2){background:url(../images/dukes.png) no-repeat 0 100%;background-size: contain;}
aside>article:nth-of-type(2) h3{font-family: acknowledge,sans-serif;font-size: 20px;line-height:1;color:#999;padding:0 30px 0 75px;margin:0 0 15px;}
aside>article:nth-of-type(2) h3 span{display:block;color: #999;font-size:30px;transition: all 0.5s ease-out 0s;}
aside>article:nth-of-type(2) h3:hover span{transform:rotate(10deg) scale(1.5) translateX(40px);color:#484848;}
aside>article:nth-of-type(2) p{font-size: 0.85em;padding:5px 3px 0 75px;}
aside>article:nth-of-type(3){height:170px;background:url(../images/bg-bike.png) no-repeat 50% 88%,
linear-gradient(to bottom, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.16) 92%, rgba(0,0,0,0) 98%);
transition:background-position 1s linear 250ms;}
aside>article:nth-of-type(3) h3{font-size:30px;font-family:leaguegothic,sans-serif;text-align:center;letter-spacing:-1px;margin:20px 5px;}
/* aside>article:nth-of-type(3) h3 a는 공통사항 중 하나라서 안 집어넣었음 = 내가 */
aside>article:nth-of-type(3):hover{background-position:150% 88%, 0 0;}
aside>article:last-of-type{height:140px;text-align: center;}
aside>article:last-of-type h3{font-size: 23px;font-family: leaguegothic,sans-serif;}
input[type="button"]{font-size: 28px; padding:10px 30px;border: none;border-radius: 5px;color: #fff;
margin: 10px auto;background-color: #333;background:radial-gradient(circle at center, #909090 0, #484848 50%);}
/* radial 모양 circle, ellipse 기본값, 위치 at 30% 30% */
.content3 article .text{column-count:2;column-width: 117px;column-gap: 10px;}
/* footer */
footer>section{width:738px;padding:10px 20px 0 0;background-color: #d1d1d1;border-top: 1px solid #888;border-bottom:1px solid #888;}
footer>section::after{content: "";display: block;clear: both;}
footer>section>section{float:left;width:226px;padding-left: 20px;}
address{height:30px;width:100%;}
address>small{float:left;line-height:32px;font-family:leaguegothic,sans-serif;padding-left: 7px;font-size: 85%;text-transform: uppercase;letter-spacing: 0.08em;
text-shadow: 1px 1px 4px rgba(0,0,0,0.4);}
address>a{float:right;padding-top: 5px;}
reset.css
@charset "UTF-8";
/* reset.css */
html,body{width:100%;height:100%}
body,div,dl,dt,dd,ul,li,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,table,
small,b,i,article,aside,canvas,details,figcaption,figure,footer,header,menu,nav,section,time,mark,audio,video{margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,menu,nav,section,video{display:block;}
table{border-collapse:0;}
img,fieldset{border:none;}
address,caption,cite,code,em,strong,th{font-style: normal;font-weight:normal;}
ol,ul{list-style: none;}
caption,th{text-align: left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q::after,q::before{content:"";}
abbr,acronym{border:none;}
img,input{vertical-align:middle;}
hr{display: none;}
#skipNavi,.blind{position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-height:0;
visibility:hidden;text-indent: -9999px;overflow: hidden;}
결과물
더보기
2021/12/31
2021년의 마지막 수업
신년맞이 과제가 있었는데
그 건 안 올릴 생각
그 건 transition 복습이었거든
과제폭풍 없으면 좋겠다 레알..
폭풍처럼 몰아닥치면 기술블로그 언제 쓰냐고!!!