반응형 웹 사이트를 만드는 강의입니다.
box-shabow와 transition을 이용하여 마우스 오버 효과를 준 헤더 타이틀 예제입니다.
영상을 보시면서 하나하나씩 따라하면서 익혀주세요. 많은 도움이 되실거예요.
Code Youtube
사용 프로그램
∗ filezilla - CLICK
∗ brackets - CLICK
∗ sublime - CLICK
∗ visualstudio - CLICK
- 에디터는 본인이 편한것으로 사용하시면 되고, 저는 이번 강의에서 sublime을 사용하였습니다. -
Code example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="webstoryboy">
<meta name="description" content="반응형 사이트 따라하기">
<meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5, webstoryboy, webs">
<title>반응형 사이트 만들기</title>
<!-- style
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
-->
<!-- 파비콘 -->
<link rel="shortcut icon" href="icon/favicon-152.png">
<link rel="apple-touch-icon-precomposed" href="icon/favicon-152.png">
<link rel="icon" href="path/to/favicon.png">
<link rel="icon" href="icon/favicon-16.png" sizes="16x16">
<link rel="icon" href="icon/favicon-32.png" sizes="32x32">
<link rel="icon" href="icon/favicon-48.png" sizes="48x48">
<link rel="icon" href="icon/favicon-64.png" sizes="64x64">
<link rel="icon" href="icon/favicon-128.png" sizes="128x128">
<!-- 웹 폰트 -->
<link href="https://fonts.googleapis.com/css?family=Abel&display=swap" rel="stylesheet">
<!-- HTLM5shiv ie6~8 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script type="text/javascript">
alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
</script>
<![endif]-->
<style>
/* 여백 초기화 */
body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form, figure, figcaption {margin:0; padding:0;}
/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #2698cb;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family: 'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}
/* 폰트 스타일 초기화 */
em, address {font-style: normal;}
/* 블릿기호 초기화 */
ul, li, ol {list-style: none;}
/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 13px; font-weight: normal;}
</style>
<style>
/* 레이아웃 */
#header {background: url(../img/header_bg.jpg) repeat-x center top;}
/* 컨테이너 */
.container {width: 1200px; margin: 0 auto; background: rgba(0,0,0,0.3);}
/* 헤더 */
.header {height: 327px;}
.header .header_menu {text-align: right;}
.header .header_menu a {color: #fff; padding: 8px 0 6px 10px; display: inline-block; transition: color 0.3s ease; font-family: 'Abel', sans-serif;}
.header .header_menu a:hover {color: #ccc;}
.header .header_tit {text-align: center; text-transform: uppercase; margin-top: 55px; font-family: 'Abel', sans-serif;}
.header .header_tit h1 {font-size: 30px; color: #fff; background: #51b0dc; display: inline-block; padding: 5px 30px 5px 30px; letter-spacing: 2px; font-weight: 900; transition: box-shadow 0.25s ease-in-out;}
.header .header_tit h1:hover {box-shadow: inset -9em 0 0 0 #257fac, inset 9em 0 0 0 #257fac;}
.header .header_tit a {font-size: 16px; color: #fff; background: #4a9abf; display: inline-block; padding: 10px 20px 10px 20px; margin-top: -7px; transition: box-shadow 0.25s ease-in-out;}
.header .header_tit a:hover {box-shadow: 0 0 0 5px rgba(75,154,191,0.9) inset, 0 0 0 100px rgba(0,0,0,0.1) inset;}
/* media query*/
@media (max-width: 1220px){
.container {width: 100%;}
.row {padding: 0 15px;}
}
</style>
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="header">
<div class="header_menu">
<a href="#">Blog</a>
<a href="#">Github</a>
<a href="#">Webstandard</a>
</div>
<!-- //header_menu -->
<div class="header_tit">
<h1>Professional Web Publishser</h1><br>
<a href="http://webstoryboy.co.kr">webstoryboy.co.kr</a>
</div>
<!-- //header_tit -->
</div>
</div>
</div>
</header>
<!-- //header -->
<nav>
<h2>반응형 사이트 전체 메뉴</h2>
</nav>
<article>
<h2>반응형 사이트 서브 타이틀</h2>
</article>
<main>
<section>
<h2>반응형 사이트 컨텐츠</h2>
<section>
<h3>반응형 사이트 왼쪽 컨텐츠</h3>
<article><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 가운데 컨텐츠</h3>
<article><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 오른쪽 컨텐츠</h3>
<article><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
</section>
</section>
</main>
<footer>
<h2>반응형 사이트 푸터</h2>
</footer>
<!-- JavaScript Libraries -->
<script src="js/jquery.min_1.12.4.js"></script>
<script src="js/modernizr-custom.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="webstoryboy">
<meta name="description" content="반응형 사이트 따라하기">
<meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5, webstoryboy, webs">
<title>반응형 사이트 만들기</title>
<!-- style -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- 파비콘 -->
<link rel="shortcut icon" href="icon/favicon-152.png">
<link rel="apple-touch-icon-precomposed" href="icon/favicon-152.png">
<link rel="icon" href="path/to/favicon.png">
<link rel="icon" href="icon/favicon-16.png" sizes="16x16">
<link rel="icon" href="icon/favicon-32.png" sizes="32x32">
<link rel="icon" href="icon/favicon-48.png" sizes="48x48">
<link rel="icon" href="icon/favicon-64.png" sizes="64x64">
<link rel="icon" href="icon/favicon-128.png" sizes="128x128">
<!-- 웹 폰트 -->
<link href="https://fonts.googleapis.com/css?family=Abel&display=swap" rel="stylesheet">
<!-- HTLM5shiv ie6~8 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script type="text/javascript">
alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
</script>
<![endif]-->
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="header">
<div class="header_menu">
<a href="#">Blog</a>
<a href="#">Github</a>
<a href="#">Webstandard</a>
</div>
<!-- //header_menu -->
<div class="header_tit">
<h1>Professional Web Publishser</h1><br>
<a href="http://webstoryboy.co.kr">webstoryboy.co.kr</a>
</div>
<!-- //header_tit -->
</div>
</div>
</div>
</header>
<!-- //header -->
<nav>
<h2>반응형 사이트 전체 메뉴</h2>
</nav>
<article>
<h2>반응형 사이트 서브 타이틀</h2>
</article>
<main>
<section>
<h2>반응형 사이트 컨텐츠</h2>
<section>
<h3>반응형 사이트 왼쪽 컨텐츠</h3>
<article><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 가운데 컨텐츠</h3>
<article><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 오른쪽 컨텐츠</h3>
<article><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
</section>
</section>
</main>
<footer>
<h2>반응형 사이트 푸터</h2>
</footer>
<!-- JavaScript Libraries -->
<script src="js/jquery.min_1.12.4.js"></script>
<script src="js/modernizr-custom.js"></script>
</body>
</html>
/* 레이아웃 */
#header {background: url(../img/header_bg.jpg) repeat-x center top;}
#nav {background-color: #f6fdff;}
/* 컨테이너 */
.container {width: 1200px; margin: 0 auto; /* background: rgba(0,0,0,0.3); */}
/* 헤더 */
.header {height: 327px;}
.header .header_menu {text-align: right;}
.header .header_menu a {color: #fff; padding: 8px 0 6px 10px; display: inline-block; transition: color 0.3s ease; font-family: 'Abel', sans-serif;}
.header .header_menu a:hover {color: #ccc;}
.header .header_tit {text-align: center; text-transform: uppercase; margin-top: 55px; font-family: 'Abel', sans-serif;}
.header .header_tit h1 {
font-size: 30px;
color: #fff;
background: #51b0dc;
display: inline-block;
padding: 5px 30px 5px 30px;
letter-spacing: 2px;
font-weight: 900;
transition: box-shadow 0.25s ease-in-out;
}
.header .header_tit h1:hover {
box-shadow:
inset -9em 0 0 0 #257fac,
inset 9em 0 0 0 #257fac;
}
.header .header_tit a {
font-size: 16px;
color: #fff;
background: #4a9abf;
display: inline-block;
padding: 10px 20px 10px 20px;
margin-top: -7px;
transition: box-shadow 0.25s ease-in-out;
}
.header .header_tit a:hover {
box-shadow:
0 0 0 5px rgba(75,154,191,0.9) inset,
0 0 0 100px rgba(0,0,0,0.1) inset;
}
/* media query*/
@media (max-width: 1220px){
.container {width: 100%;}
.row {padding: 0 15px;}
}
/* 여백 초기화 */
body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form, figure, figcaption {margin:0; padding:0;}
/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #2698cb;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family: 'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}
/* 폰트 스타일 초기화 */
em, address {font-style: normal;}
/* 블릿기호 초기화 */
ul, li, ol {list-style: none;}
/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 13px; font-weight: normal;}
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
