BootStrap
13. 디자인 실전
board2.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>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<!--
container-fluid 요소는 가로 해상도와 상관없이
항상 100%의 width를 가집니다.
-->
<div class="container-fluid">
<div class="row">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img width="30px" src="./img/logo.svg" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Main</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Grid Board</a></li>
<li><a href="#">Board</a></li>
</ul>
<!-- 드롭다운 방식으로 로그인 추가 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Join</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 검색창을 배치해 보자 -->
<form class="navbar-form navbar-right" action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">검색</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header>
<section>
<div class="container">
<h2>상품 그리드</h2>
<hr>
<ul class="row">
<li class="col-md-3 col-sm-6 col-xs-12">
<div class="prod-list-inner">
<img src="./img/prod1.jpg" alt="prod1">
<div class="prod-content clearfix">
<div class="info">
<span>나이키 에어맥스</span>
<span>MEN 신발 라이프스타일</span>
<span>8컬러</span>
</div>
<div class="price">
<strong>199,000원</strong>
</div>
</div>
<div class="prod-color">
<ul>
<li><img src="./img/color1.jpg" alt="c1"></li>
<li><img src="./img/color2.jpg" alt="c2"></li>
<li><img src="./img/color3.jpg" alt="c3"></li>
<li><img src="./img/color4.jpg" alt="c4"></li>
<li><img src="./img/color5.jpg" alt="c5"></li>
</ul>
</div>
</div>
</li>
<li class="col-md-3 col-sm-6 col-xs-12">
<div class="prod-list-inner">
<img src="./img/prod2.jpg" alt="prod2">
<div class="prod-content clearfix">
<div class="info">
<span>나이키 에어맥스</span>
<span>MEN 신발 라이프스타일</span>
<span>8컬러</span>
</div>
<div class="price">
<strong>199,000원</strong>
</div>
</div>
<div class="prod-color">
<ul>
<li><img src="./img/color1.jpg" alt="c1"></li>
<li><img src="./img/color2.jpg" alt="c2"></li>
<li><img src="./img/color3.jpg" alt="c3"></li>
<li><img src="./img/color4.jpg" alt="c4"></li>
<li><img src="./img/color5.jpg" alt="c5"></li>
</ul>
</div>
</div>
</li>
<li class="col-md-3 col-sm-6 col-xs-12">
<div class="prod-list-inner">
<img src="./img/prod3.jpg" alt="prod3">
<div class="prod-content clearfix">
<div class="info">
<span>나이키 에어맥스</span>
<span>MEN 신발 라이프스타일</span>
<span>8컬러</span>
</div>
<div class="price">
<strong>199,000원</strong>
</div>
</div>
<div class="prod-color">
<ul>
<li><img src="./img/color1.jpg" alt="c1"></li>
<li><img src="./img/color2.jpg" alt="c2"></li>
<li><img src="./img/color3.jpg" alt="c3"></li>
<li><img src="./img/color4.jpg" alt="c4"></li>
<li><img src="./img/color5.jpg" alt="c5"></li>
</ul>
</div>
</div>
</li>
<li class="col-md-3 col-sm-6 col-xs-12">
<div class="prod-list-inner">
<img src="./img/prod4.jpg" alt="prod4">
<div class="prod-content clearfix">
<div class="info">
<span>나이키 에어맥스</span>
<span>MEN 신발 라이프스타일</span>
<span>8컬러</span>
</div>
<div class="price">
<strong>199,000원</strong>
</div>
</div>
<div class="prod-color">
<ul>
<li><img src="./img/color1.jpg" alt="c1"></li>
<li><img src="./img/color2.jpg" alt="c2"></li>
<li><img src="./img/color3.jpg" alt="c3"></li>
<li><img src="./img/color4.jpg" alt="c4"></li>
<li><img src="./img/color5.jpg" alt="c5"></li>
</ul>
</div>
</div>
</li>
<li class="col-md-3 col-sm-6 col-xs-12">
<div class="prod-list-inner">
<img src="./img/prod5.jpg" alt="prod5">
<div class="prod-content clearfix">
<div class="info">
<span>나이키 에어맥스</span>
<span>MEN 신발 라이프스타일</span>
<span>8컬러</span>
</div>
<div class="price">
<strong>199,000원</strong>
</div>
</div>
<div class="prod-color">
<ul>
<li><img src="./img/color1.jpg" alt="c1"></li>
<li><img src="./img/color2.jpg" alt="c2"></li>
<li><img src="./img/color3.jpg" alt="c3"></li>
<li><img src="./img/color4.jpg" alt="c4"></li>
<li><img src="./img/color5.jpg" alt="c5"></li>
</ul>
</div>
</div>
</li>
<li class="col-md-3 col-sm-6 col-xs-12">
<div class="prod-list-inner">
<img src="./img/prod6.jpg" alt="prod6">
<div class="prod-content clearfix">
<div class="info">
<span>나이키 에어맥스</span>
<span>MEN 신발 라이프스타일</span>
<span>8컬러</span>
</div>
<div class="price">
<strong>199,000원</strong>
</div>
</div>
<div class="prod-color">
<ul>
<li><img src="./img/color1.jpg" alt="c1"></li>
<li><img src="./img/color2.jpg" alt="c2"></li>
<li><img src="./img/color3.jpg" alt="c3"></li>
<li><img src="./img/color4.jpg" alt="c4"></li>
<li><img src="./img/color5.jpg" alt="c5"></li>
</ul>
</div>
</div>
</li>
<li class="col-md-3 col-sm-6 col-xs-12">
<div class="prod-list-inner">
<img src="./img/prod7.jpg" alt="prod7">
<div class="prod-content clearfix">
<div class="info">
<span>나이키 에어맥스</span>
<span>MEN 신발 라이프스타일</span>
<span>8컬러</span>
</div>
<div class="price">
<strong>199,000원</strong>
</div>
</div>
<div class="prod-color">
<ul>
<li><img src="./img/color1.jpg" alt="c1"></li>
<li><img src="./img/color2.jpg" alt="c2"></li>
<li><img src="./img/color3.jpg" alt="c3"></li>
<li><img src="./img/color4.jpg" alt="c4"></li>
<li><img src="./img/color5.jpg" alt="c5"></li>
</ul>
</div>
</div>
</li>
<li class="col-md-3 col-sm-6 col-xs-12">
<div class="prod-list-inner">
<img src="./img/prod8.jpg" alt="prod8">
<div class="prod-content clearfix">
<div class="info">
<span>나이키 에어맥스</span>
<span>MEN 신발 라이프스타일</span>
<span>8컬러</span>
</div>
<div class="price">
<strong>199,000원</strong>
</div>
</div>
<div class="prod-color">
<ul>
<li><img src="./img/color1.jpg" alt="c1"></li>
<li><img src="./img/color2.jpg" alt="c2"></li>
<li><img src="./img/color3.jpg" alt="c3"></li>
<li><img src="./img/color4.jpg" alt="c4"></li>
<li><img src="./img/color5.jpg" alt="c5"></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="copyright">
<a href="#">
<img width="20px" src="./img/logo.svg" alt="logo2">
</a>
BootStrap | 대표자: 홍길동 | E-mail: info@info.com <br>
사업자번호: 123-45-67890 | 개인정보보호책임자: 홍길동 | 통신판매업: 2022-서울강남-0001 <br>
주소: 서울특별시 강남구 역삼동 649-5 7층
<address>©BootStrap. ALL RIGHTS RESERVED</address>
</div>
</div>
<div class="col-md-5 col-sm-12 text-right">
<ul class="footer-menu">
<li><a href="#">고객센터</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보취급방침</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>board2_detail.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>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<!--
container-fluid 요소는 가로 해상도와 상관없이
항상 100%의 width를 가집니다.
-->
<div class="container-fluid">
<div class="row">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img width="30px" src="./img/logo.svg" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Main</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Grid Board</a></li>
<li><a href="#">Board</a></li>
</ul>
<!-- 드롭다운 방식으로 로그인 추가 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Join</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 검색창을 배치해 보자 -->
<form class="navbar-form navbar-right" action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">검색</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>상세보기<small>(쿠팡예제)</small></h2>
<hr>
</div>
<div class="col-md-6 col-xs-12">
<img src="./img/detail.jpg" alt="detail">
</div>
<div class="col-md-6 col-xs-12">
<div class="detail-info">
<p class="title">[게릴라특가]30일체험가능! 벨라페이스 3컬러 LED마스크 눈마사지 겸용/4단계 시간조절/피부홈케어 + 사은품까지!</p>
<p class="price"><strong>135,000원</strong></p>
<p class="delivery">
무료배송<br>
상품별배송 | 택배배송 | 당일출고, 12시 이전 결제 건까지 해당 (주말, 공휴일 제외)
</p>
</div>
<div class="detail-control">
<div class="price clearfix">
<p class="left">총 상품금액</p>
<p class="right"><strong>0원</strong></p>
</div>
<div class="order clearfix">
<button type="button" class="left btn btn-default">장바구니</button>
<button type="button" class="right btn btn-primary">구매하기</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="reply">
<div class="container">
<div class="row">
<div class="col-md-9 col-xs-12 content-wrap">
<!-- 댓글 작성 공간 -->
<div class="reply-wrap">
<div class="reply-image">
<img src="./img/profile.png" alt="prof">
</div>
<div class="reply-content">
<textarea class="form-control" rows="3"></textarea>
<div class="reply-group clearfix">
<div class="reply-input">
<input type="text" class="form-control" placeholder="이름">
<input type="password" class="form-control" placeholder="비밀번호">
</div>
<button type="button" class="btn btn-info">등록하기</button>
</div>
</div>
</div>
<!-- 댓글이 달릴 공간 -->
<div class="reply-wrap">
<div class="reply-image">
<img src="./img/profile.png" alt="prof">
</div>
<div class="reply-content">
<div class="reply-group clearfix">
<strong class="left">honggildong</strong>
<small class="left">2022/04/20</small>
<a class="right" href="#"><span class="glyphicon glyphicon-remove"></span> 삭제</a>
<a class="right" href="#"><span class="glyphicon glyphicon-pencil"></span> 수정</a>
</div>
<p>여기는 댓글 영역</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="copyright">
<a href="#">
<img width="20px" src="./img/logo.svg" alt="logo2">
</a>
BootStrap | 대표자: 홍길동 | E-mail: info@info.com <br>
사업자번호: 123-45-67890 | 개인정보보호책임자: 홍길동 | 통신판매업: 2022-서울강남-0001 <br>
주소: 서울특별시 강남구 역삼동 649-5 7층
<address>©BootStrap. ALL RIGHTS RESERVED</address>
</div>
</div>
<div class="col-md-5 col-sm-12 text-right">
<ul class="footer-menu">
<li><a href="#">고객센터</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보취급방침</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>board_content.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>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<!--
container-fluid 요소는 가로 해상도와 상관없이
항상 100%의 width를 가집니다.
-->
<div class="container-fluid">
<div class="row">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img width="30px" src="./img/logo.svg" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Main</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Grid Board</a></li>
<li><a href="#">Board</a></li>
</ul>
<!-- 드롭다운 방식으로 로그인 추가 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Join</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 검색창을 배치해 보자 -->
<form class="navbar-form navbar-right" action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">검색</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header>
<section class="content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-9 content-wrap">
<div class="titlebox">
상세보기
</div>
<form action="#">
<div>
<label>DATE</label>
<p>2022-04-20</p>
</div>
<div class="form-group">
<label for="bId">글번호</label>
<input type="text" id="bId" class="form-control" readonly>
</div>
<div class="form-group">
<label for="writer">작성자</label>
<input type="text" id="writer" class="form-control" readonly>
</div>
<div class="form-group">
<label for="content">내용</label>
<textarea id="content" class="form-control" rows="10" readonly></textarea>
</div>
<button type="button" class="btn btn-primary">수정</button>
<button type="button" class="btn btn-dark">목록</button>
</form>
</div>
</div>
</div>
</section>
<section class="reply">
<div class="container">
<div class="row">
<div class="col-md-9 col-xs-12 content-wrap">
<!-- 댓글 작성 공간 -->
<div class="reply-wrap">
<div class="reply-image">
<img src="./img/profile.png" alt="prof">
</div>
<div class="reply-content">
<textarea class="form-control" rows="3"></textarea>
<div class="reply-group clearfix">
<div class="reply-input">
<input type="text" class="form-control" placeholder="이름">
<input type="password" class="form-control" placeholder="비밀번호">
</div>
<button type="button" class="btn btn-info">등록하기</button>
</div>
</div>
</div>
<!-- 댓글이 달릴 공간 -->
<div class="reply-wrap">
<div class="reply-image">
<img src="./img/profile.png" alt="prof">
</div>
<div class="reply-content">
<div class="reply-group clearfix">
<strong class="left">honggildong</strong>
<small class="left">2022/04/20</small>
<a class="right" href="#"><span class="glyphicon glyphicon-remove"></span> 삭제</a>
<a class="right" href="#"><span class="glyphicon glyphicon-pencil"></span> 수정</a>
</div>
<p>여기는 댓글 영역</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="copyright">
<a href="#">
<img width="20px" src="./img/logo.svg" alt="logo2">
</a>
BootStrap | 대표자: 홍길동 | E-mail: info@info.com <br>
사업자번호: 123-45-67890 | 개인정보보호책임자: 홍길동 | 통신판매업: 2022-서울강남-0001 <br>
주소: 서울특별시 강남구 역삼동 649-5 7층
<address>©BootStrap. ALL RIGHTS RESERVED</address>
</div>
</div>
<div class="col-md-5 col-sm-12 text-right">
<ul class="footer-menu">
<li><a href="#">고객센터</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보취급방침</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>14. 미디어 쿼리
실습 1. index01
<!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>
/* 768px 이상 사이즈에서 해당 css가 동작합니다. */
@media (min-width: 768px) {
.box1 {
border: 1px solid black;
}
}
@media (max-width: 767px) {
.box1 {
display: none;
}
}
.box2 {
width: 100%;
margin: 0 auto;
}
/* 1300px 이상에서 동작 */
@media (min-width: 1300px) {
.box2 .inner {
width: 16.6666%;
float: left;
}
}
/* 768 ~ 1299px 까지는 이렇게 동작 */
@media (max-width: 1299px) {
.box2 .inner {
width: 25%;
float: left;
}
}
/* 768px 미만에서는 이렇게 동작 */
@media (max-width: 767px) {
.box2 .inner {
width: 50%;
float: left;
}
}
</style>
</head>
<body>
<div class="box1">
내용....
</div>
<div class="box2">
<div class="inner">내용</div>
<div class="inner">내용</div>
<div class="inner">내용</div>
<div class="inner">내용</div>
<div class="inner">내용</div>
<div class="inner">내용</div>
</div>
</body>
</html>실습 2. index02
<!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>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
vertical-align: top;
}
body {
font-size: 12px;
font-family: "맑은 고딕", serif;
}
.wrap {
margin: 20px auto 0;
border: 1px solid #ddd;
}
section {
padding: 20px;
}
aside img:hover {
border: 1px solid #000;
}
footer {
padding: 10px 0;
line-height: 25px;
background: #222;
color: #fff;
text-align: center;
}
/* =========== 미디어 ============== */
@media screen and (min-width: 1024px) and (max-width: 1924px) {
.wrap {
min-width: 960px;
}
header {
height: 280px;
background-image: url(./img/bg.png);
background-size: cover;
background-position: center;
}
h1 {
padding: 30px;
font-size: 4em;
color: #ff0;
}
nav {
background: #c13333;
height: 70px;
}
nav ul {
text-align: center;
line-height: 70px;
}
nav li {
display: inline-block;
}
nav a {
display: block;
width: 120px;
line-height: 70px;
color: #fff;
}
section {
min-width: 960px;
line-height: 25px;
}
section h2 {
font-size: 18px;
}
section h3 {
margin: 20px 0;
}
aside {
background: #eee;
text-align: center;
padding: 5px 0;
}
aside img {
width: 25%;
border: 1px solid #ccc;
}
}
@media screen and (min-width: 600px) and (max-width: 1023px) {
.wrap {
min-width: 580px;
}
header {
height: 200px;
background-image: url(./img/bg.png);
background-size: cover;
background-position: center;
}
h1 {
padding: 20px;
font-size: 3em;
color: #ff0;
}
nav {
background: #c13333;
height: 50px;
}
nav ul {
text-align: center;
line-height: 50px;
}
nav li {
display: inline-block;
}
nav a {
display: block;
width: 90px;
line-height: 50px;
color: #fff;
}
section {
min-width: 540px;
line-height: 25px;
}
section h2 {
font-size: 15px;
}
section h3 {
margin: 20px 0;
}
aside {
background: #eee;
text-align: center;
padding: 5px 0;
}
aside img {
width: 32%;
border: 1px solid #ccc;
}
}
@media (max-width: 599px) {
.wrap {
min-width: 320px;
}
header {
height: 100px;
background-image: url(./img/bg.png);
background-size: cover;
background-position: center;
}
h1 {
padding: 15px;
font-size: 2em;
color: #ff0;
}
nav {
background: #c13333;
}
nav ul {
line-height: 30px;
}
nav a {
display: block;
height: 40px;
line-height: 30px;
text-align: center;
color: #fff;
}
section {
line-height: 15px;
}
section h2 {
font-size: 15px;
}
section h3 {
margin: 20px 0;
}
aside {
background: #eee;
text-align: center;
padding: 5px 0;
}
aside img {
margin-bottom: 5px;
width: 95%;
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<h1>반응형 웹(미디어)</h1>
</header>
<nav>
<ul>
<li><a href="#">반응형 웹</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">미디어쿼리</a></li>
<li><a href="#">적용하기</a></li>
</ul>
</nav>
<section>
<h2>반응형 웹</h2>
<article>
<h3>
웹 디자인 기법 중 하나. 웹(Web)에 접속하는 디바이스에 반응(Responsive)하는 디자인을 말한다.
</h3>
<p>
반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응하게 된다. 그리고 반응형 웹이 일반 웹 디자인과 다른 큰
이유 중에 하나는 이 모든 기술이 하나의 소스로 구현 가능하다는 점이다. 보통 일반 웹 디자인의 경우에는 PC와 태블릿, 스마트폰의 브라우저 각각에 최적화시킨 소스를 개발하여 각
디바이스 별로 산출물이 생기기 때문에 초기 제작비용뿐만 아니라 추후 유지보수 인력과 비용까지 추가로 발생하게 된다.
요즘에는 다양한 스마트 기기가 계속해서 개발되고 있기 때문에 각각의 디바이스와 스크린 사이즈에 맞추어 사이트를 개발한다는 것은 거의 불가능에 가깝다고 볼 수 있다. 하지만 반응형
웹은 하나의 소스를 수정하면 모든 스크린 사이즈에 맞추어 컨텐츠가 최적화되기 때문에 유지보수가 효율적이고, 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수
있다는 측면에서 반응형 웹의 장점이 고스란히 나타나게 된다.
반면 이러한 특징때문에 발생하는 단점이 있는데, 모바일 사이트에 비해서 무겁다는 점이다. 이는 사이트 속도와 직결되는 문제로, 사용자 입장에서는 특히 속도에 목숨을 거는 유저들에게
있어서 불편하게 느낄수도있다. 반응형 웹 디자인은 모바일 사이트보다 읽어들이는 소스가 많아서 쓸데없는 데이터를 소비할 수도 있고, 더군다나 데스크톱 사이트와 모바일 사이트의 용도가
다른 사이트의 경우 이러한 반응형 웹 디자인은 걸림돌이 될 수 있다. 이 때문에 서버 사이드 스크립트를 이용해 접속 기기에 따라 디자인을 선택적으로 적용하는
RESS(Responsive Design + Server Side Components)라는 기법도 있다.
</p>
</article>
</section>
<aside>
<img src="./img/blog1.png" alt="1">
<img src="./img/blog2.png" alt="2">
<img src="./img/blog3.jpg" alt="3">
</aside>
<footer>
<p>HTML5 + CSS3 Responsive</p>
<address>
Responsive Web Design
</address>
</footer>
</div>
</body>
</html>돌아보며
이것으로 HTML, CSS 강의 파트는 종료되었다. 내일 (04/21)부터 Oracle DB강의로 진입하게 되고 JS는 따로 강의되지 않았으므로 필요한 경우 따로 찾아보도록 해야겠다.
현재 CSS파트가 많이 이해되지 않고 부족한 부분이 있어, 사이트 레이아웃을 보고 바로 직접 클론할 수 있거나 적어도 어떻게 구성해야 하는지 아는 수준까지 스스로 복습하여 실력을 끌어올려야겠다.
