둘째마당에서 플렉서블 박스를 활용해서 반응형 웹을 만들어보았다면,
셋째마당에서는 가변그리드, 미디어쿼리, 뷰포트를 활용해서 반응형 웹을 만들어 보도록 할 것이다.
이전과 동일하게 구조를 먼저 알아보고 각각의 폴더들이랑 index.html 파일 생성으로 시작!
앞선 둘째마당과 유사하게 기본 index.html 먼저 만들어주기.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scale=no">
<title>INDIGO</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="images/favicon/flat-design-touch.png">
<script src="js/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>다음은 기본 CSS 설정 파일인 reset.css파일 만들어주기.
@charset "UTF-8";
/* 웹폰트 CSS */
@import url('https://fonts.googleapis.com/css?family=Montserrat|PT+Serif');
/* CSS 초기화 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body{
font-family:'Montserrat',DroidSans,AppleSDGothicNeo,Sans-serif,Helvetica;
line-height:1;
}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{
display:block;
}
nav ul, li{
list-style:none;
}
a{
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration:none;
}
img{
vertical-align:top;
}
hr{
display:block;
height:2px;
border:0;
margin:0;
padding:0;
}
input, textarea{
width:100%;
margin:0;
padding:0;
border:0;
border-bottom:1px solid #757575;
color:#3f51b5;
font-family:'Montserrat';
font-size:12px;
vertical-align:top;
border-radius:0;
box-sizing:content-box;
appearance:none;
}
::-moz-input-placeholder, ::-moz-textarea-placeholder{
color:#3f51b5;
}
::-webkit-input-placeholder, ::-webkit-textarea-placeholder{
color:#3f51b5;
}CSS 파일에서 앞선 둘째마당과 다른 점은 웹폰트 적용 부분이다.
매번 웹폰트를 위한 별도의 코드 입력이 번거롭기 때문에,
이를 위해서 구글 폰트와 같이 다양한 업체에서 import해서 사용하는 방식으로 웹폰트를 제공하고 있다.
알아두면 좋으니 기억해두도록 하고 필요시에 적용해보기!!
둘째마당에서 설명하지 않은 알아두면 좋을 것들을 몇 가지를 먼저 정리하고 마지막은 완성본 올리고 끝.
가상 엘리먼트
가상 엘리먼트란 실제로 눈에 보이지 않지만 :before나 :after 등으로 가상으로 생성하고 지정할 수 있는 엘리먼트.
이러한 특성을 활용하여 float 속성 사용 시 부모가 해당 높이값을 인식 못할 경우가 존재할 때 문제 해결 가능.
:after 속성을 활용해서 부모 요소의 마지막 위치에 가상의 엘리먼트 생성해주고 높이값 인식 가능하게 해주기.
파란색 박스부분은 원래 밑에 위치 해야하나 제목과 목록에 float을 줘서 밀고 올라온 경우. :after로 박스 아래로 내려주기.
|
nav::after {
content: '';
display: block;
clear: both;
}
h1 {
float: left;
}
ul {
float: left;
}
div {
width: 300px;
background: cornflowerblue;
}
|
 |
구글지도 가져오기
구글지도 들어가서 아무곳이나 위치 클릭해서 보면 공유 아이콘이 보일 것이다.
그럼 여기서 공유 아이콘 클릭해서 지도 퍼가기 누르고 사이즈 선택해주고 HTML 복사 누르고 코드 붙여넣기하면 된다.
완성된 각각의 모바일, 태블릿, PC버전의 화면은 아래와 같다.
 |
 |
 |
'BookReview' 카테고리의 다른 글
| 자바와 JUnit을 활용한 단위테스트_03 (0) | 2022.04.09 |
|---|---|
| DOIT! 반응형 웹 만들기_부록 (0) | 2022.03.10 |
| DOIT! 반응형 웹 만들기_둘째마당 (0) | 2022.03.08 |
| DOIT! 반응형 웹 만들기_첫째마당 (0) | 2022.03.08 |
| 자바와 JUnit을 활용한 단위테스트_02 (2) | 2022.02.10 |