앞선 포스팅의 반응형 웹 만들기 첫째 마당에선 핵심 기술들에 대해 살펴보았다면 둘째 마당에서는 직접 만들기.
웹사이트의 구조를 먼저 살펴보면 메인페이지와 서브페이지들은 아래와 같은 구조를 한다.
구조를 확인했다면 그다음은 폴더랑 기본파일 구성하기이다.
루트 폴더 하나 만들어주고(상위폴더) 그 아래다가 css, images, js, webfont 폴더를 차례로 만들어준다.
그다음 images 폴더 아래 s_images, p_images, favicon 폴더를 만들어주고 메인 페이지가 될 index.html,
서브페이지가 될 introduce.html, gallery.html, board.html 페이지도 차례로 만들어주면 끝!
폴더 구조는 위와 같은데 소스코드랑 이미지 많아서 이건 따로 뭐....올릴수가....없따......(더 공부할라믄 책 사서ㅎㅎㅎ)
아 여기서 웹폰트란 운영체제에 별도로 설치된 폰트를 웹에서도 사용할 수 있게 도와주는 CSS 속성 중 하나라고 한다.
그다음은 각 HTML파일이랑 CSS 기본 구조 작업을 해줘야 한다.
아래는 HTML파일 기본구조인데 여기에다가 모바일용, 태블릿용, PC용으로 나눠서 CSS 작성하게 되는데,
이것이 미디어쿼리이다. 태블릿용은 최소 768px, PC용은 최소 960px로 해서 각각 CSS 속성 지정을 다르게 해 줄 것이다.
<!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-scalable=no">
<title>FLAT DESIGN</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>
/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
flex-flow:column nowrap;
width:80%;
margin:0 auto;
max-width:1200px;
}
#wrap section{
box-sizing:border-box;
}
/* 태블릿용 CSS */
@media all and (min-width:768px){
/* 기본 CSS */
#wrap{
flex-flow:row wrap;
}
}
/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{
position:relative;
width:90%;
}
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>이거는 기본 CSS 초기화하는 것.
모든 태그를 기본값으로 초기화하고, body 태그에 폰트 속성과 배경 속성과 행간 속성을 지정해주기.
또한 a 태그도 기본값으로 초기화하고 이미지 파일의 경우 태그 간격 없애기 위해 vertical-align을 top으로 해주기.
table 태그도 간격 없애기 위해 아래처럼 속성 지정해주고 input도 초기화해주면 CSS 초기화는 끝.
@charset "UTF=8";
/* 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;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body{
font-family:NanumGothic,나눔고딕,'Nanum Gothic','맑은 고딕',HelveticaNeue,DroidSans,Sans-serif,Helvetica;
background:url(../images/s_images/body_bg.png);
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%;
text-decoration:none;
vertical-align:baseline;
color:#fff;
background:transparent;
}
img{
vertical-align:top;
}
table{
border-collapse:collapse;
border-spacing:0;
}
input{
margin:0;
padding:0;
box-sizing:content-box;
vertical-align:top;
appearance:none;
border:1px solid #e65d5d;
color:#e65d5d;
border-radius:0;
font-family:NanumGothic,나눔고딕,'Nanum Gothic','맑은 고딕',HelveticaNeue,DroidSans,Sans-serif,Helvetica;
}
input::-moz-input-placeholder{
color:#e65d5d;
}
input::-webkit-input-placeholder {
color:#e65d5d;
}
/* 웹폰트 CSS */
@font-face{font-family:'Nanum Gothic'; src:url(webfont/NanumGothic.eot)}
@font-face{font-family:'Nanum Gothic'; src:url(webfont/NanumGothic.woff)}다음은 이제 메인페이지랑 각 서브페이지 HTML, CSS코딩이라서 몇 가지 중요 부분만 정리하고 최종 화면만 보여줘야디.
order 속성
display: flex로 아이템 배치 시 입력한 순서대로 출력이 된다.
이때 내용을 변경하기 않고 출력 순서만 바꾸고 싶다면 이 속성 사용으로 해결할 수 있다.
속성 값을 px단위와 rem 단위 두 개로 나눠서 사용하는 폴백기법
모든 화면에서 동일한 글자 크기로 표시되는 em 단위를 사용하자니 상속 문제가 걸리고,
rem 단위를 쓰자니 하위 브라우저에서 작동하지 않는 문제가 있다.
이를 위해서 먼저 px 값을 입력하고 바로 이어서 rem 단위를 사용하 값을 입력하게 되면,
CSS가 위에서 아래로 읽는 순서에 따라서 최신 브라우저에서는 먼저 px 단위를 적용하고,
이어서 rem 단위를 적용하게 돼서 하위 브라우저에서는 최신 기술은 사용할 수 없지만 정상 작동된다.
flex-decoration 속성
플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정.
row는 가로로 1, 2, 3, row-reverse는 오른쪽부터 1,2,3 이런 식으로 사용.
text-indet 속성
글자 들여 쓰기와 내어 쓰기를 지정해주는 속성.
값이 양수면 들여 쓰기이고 음수면 내어 쓰기가 되고 default 값은 0.
justify-content 속성
플랙스 박스 요소의 수평 방향 정렬 방식을 설정하는 속성.
flex-end는 컨테이너 뒤쪽부터 배치, center는 가운데 배치, space-between은 요소 사이에 여유 공간을 두고 배치.
align-items 속성
플랙스 박스 요소의 수직 방향 정렬 방식을 설정하는 속성.
이 속성은 한 줄 만을 가지는 플랙스 박스보다는 두 줄 이상을 가지는 플랙스 박스에서 효과가 있음.
flex-start는 컨테이너의 위쪽에 배치, flex-end는 아래쪽에 배치,
stretch는 기본 설정으로 플랙스 요소의 높이가 컨테이너 높이와 같게 변경, baseline은 컨테이너의 기준선에 배치.
z-index 속성
position 속성을 이용하면 요소를 겹치게 놓을 수 있음.
이때 요소들의 수직 위치를 z-index 속성으로 정하고 값은 정수 값으로 숫자가 클수록 제일 위에(앞에) 배치.
또한 적용을 위해서 position:static 값이 아니어야 한다고 함.
아래의 경우 z-index를 음수 값을 주어서 글자 뒤에 오도록 배치한 것.
counter 속성
문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있는 속성으로 예를 들어,
counter를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있음.
counter는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가.
filter 속성
속성 값에 따라 다른 결과물을 보여주는 역할을 하는 속성.
grayscale()로 흑백 효과를 줄 수도 있고, shadow()로 그림자 효과를 줄 수도 있는 등등 다양한 속성들이 존재함.
transition 속성
서서히 뭔가 변화를 주고 싶을 때 사용하는 속성.
transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정함.
property는 transition 할 대상을 지정하고, timing-function은 진행 속도를 정하고,
duration은 전환 효과가 지속될 시간을 설정하고, delay는 효과가 나타나기 전까지의 지연 시간을 설정.
이렇게 해서 완성된 각 페이지들의 모바일, 태블릿, PC버전의 화면은 다음과 같다.
index.html(이미지 순서대로 모바일, 태블릿, PC)
 |
 |
 |
introduce.html(이미지 순서대로 모바일, 태블릿, PC)
 |
 |
 |
gallery.html(이미지 순서대로 모바일, 태블릿, PC)
 |
 |
 |
board.html(이미지 순서대로 모바일, 태블릿, PC)
 |
 |
 |
'BookReview' 카테고리의 다른 글
| DOIT! 반응형 웹 만들기_부록 (0) | 2022.03.10 |
|---|---|
| DOIT! 반응형 웹 만들기_셋째마당 (0) | 2022.03.10 |
| DOIT! 반응형 웹 만들기_첫째마당 (0) | 2022.03.08 |
| 자바와 JUnit을 활용한 단위테스트_02 (2) | 2022.02.10 |
| 자바와 JUnit을 활용한 단위테스트_01 (0) | 2022.02.05 |