반응형 웹 디자인하기
1. 원하는 글꼴, 폰트 마음대로
시스템 폰트 = 웹 세이프 폰트(Web safe font)
글자를 제대로 보이게 하려면 윈도우 시스템 폰트를 사용 해 왔다.
사용하고 싶은 글꼴을 선언해 주고 해당 글꼴 파일의 경로를 지정 해 주면 자동으로 다운로드 받아 브라우저가 출력해준다.
@font-face 속성을 이용해서 글꼴의 종류와 글꼴의 파일 경로를 설정 해 준다.
사용법
@font-face {
font-family : 글꼴이름;
src : url('글꼴파일URL경로1'), url('글꼴파일URL경로2')..;
}
글꼴 | 확장자 | 설명 | 지원 브라우저 |
TrueType | ttf | 글꼴을 벡터 형식인 직선과 곡선을 이용해서 표시하는 형식. 윈도우환경의 표준 글꼴 | 단, IE 지원 안함 |
OpenType | otf | TTF 기술을 보유한 MS와 포스트 스크립트 기술의 어도비사 제휴해서 PC와 Mac 서체 환경을 통합하기 위해 만든 형식. | 단, IE 지원 안함 |
Embedded-OpenType | eot | MS에서 웹 페이지에 폰트를 포함시킬 목적으로 CSS2 에서 IE4.0 버전부터 시작한 형식 | IE만 지원 |
Scalable-vector-graphic | svg,svgz | W3C에서 벡터 그래픽 표현할 목적으로 XML을 기반으로 해서 만든 오픈 형식. | 단, IE 버전 9이상 |
사용법
@font-face
{
font-family : 글꼴이름;
src: url (URL 경로);
font-weight : 속성값;
}
속성값 : normal(기본값), bold(진하게)
별도 설정하지 않으면, normal 로 기본값으로 설정
2. 반응형 웹 디자인 준비하기
미디어쿼리와 반응형 웹
미디어쿼리는 서로 다른 미디어나 모바일 기기라 할지라도 각각의 스타일 시트를 만든 후 조건에 맞는 스타일 시트를 적용 할수있다.
=> 반응형 웹 디자인(Responsive Web Design)
@media 명령어를 사용하면 같은 슽일 시트 안에서 미디어 경우에 맞게 다른 스타일을 편리하게 지정 할 수 있다.
종류 | 값 | 설명 | 예 |
디바이스 | all | 모든 디바이스를 대상으로 합니다. | media="all" |
| screen | 컴퓨터 화면을 대상으로 합니다. | media="screen" |
| 인쇄 미리보기, 실제 인쇄매체를 대상으로 한다. | media="print" | |
| orientation | 디바이스의 방향을 나타낸다. | media="orientation:landscape" |
연산자 | and | and 연산자 역활을 수행 | media="screen and (orientation:landscape)" |
| , | or 연산자 역활을 수행 | media="screen, print" |
속성값 | width | 대상 매체의 해상도 너비값을 지정해서 미디어쿼리가 만족하는 조건을 설정합니다. 'min-(최소값)' ; 'max -(최대값)'의 접두어를 함께 적어서 범위를 지정할수 있다. | media="screen and (min-width:320px)" |
| height | 대상 매체의 해상도 높이값을 지정해서 미디어쿼리가 만족하는 조건을 설정합니다. . 'min-(최소값)' ; 'max -(최대값)'의 접두어를 함께 적어서 범위를 지정할수 있다. | media="screen and (min-height:320px)" |
내부 스타일 시트를 사용하는 반응형 웹을 위한 미디어쿼리
사용법
<style>
@media (max-width:799px){/ * 스마트폰 용 스타일 */}
@media only screen and (min-width : 800px) and (max-width: 1023 px){ /* 태블릿PC 전용 */ }
@media only screen and (min-width : 1024 px ) {/ * 데스크탑 pc */}
</style>
내부 스타일 시트로 반응형 웹 만들기
<실습>브라우저 너비에 따라 배경의 색상과 제목의 내용이 바뀌도록 한다.
*유사 클래스 :after
모든 엘리먼트에 붙어서 사용이 가능하며 브라우저가 실행 되는 도중에 지정한 내용값을 추가로 보여준다.
추가 할 내용 값은 다음의 'content'라는 특성을 이용한다.
사용법
엘리먼트:after {content :"내용값"};
예제
<style>
h1:after{content : "반갑습니다!" };
</style>
<body>
<h1>안녕하세요</h1>
</body>
결과값
안녕하세요 반갑습니다!
<style>
/* 스마트폰 */
@media (max-width:799px){
body { background-color: #FFFFFF} /*배경 흰색 */
#title:after { content :":스마트폰";} /*스마트폰 접속표시 */
}
/*태블릿 PC*/
@media only screen and (min-width:800px) and (max-width : 1023px){
body { background-color: #CACACA} /*배경 연한 회색 */
#title:after { content :":태블릿PC";} /*태블릿PC 접속표시 */
}
/* PC*/
@media only screen and (min-width:1024px) {
body { background-color: #606060} /*배경 연한 회색 */
#title:after { content :":태블릿PC";} /*태블릿PC 접속표시 */
}
}
</style>
외부 스타일 시트로 반응형 웹 만들기
<link media ="미디어쿼리값" >
미디어쿼리값 : 연산자(and,or), 디바이스 종류, 속성값
예제
<link href ="desktop_pc.css" rel=stylesheets" type="text/css" media="screen and (min-width:800px)">
<link href ="mobile.css" rel=stylesheets" type="text/css" media="screen and (max-width:799px)">
스타일 파일을 분리하여 포함시키도록 선언한 사례이다.
미디어쿼리 값을 잘 조합해서 원하는 디바이스조건을 잘 충족시키는 CSS파일만 <link> 태그를 통해서 포함시켜 사용하는 것이다.
이러한 개념을 총칭해서 CSS의 'Media Query(미디어쿼리)라 부른다.
*visibility 와 display의 유사점과 차이점
h1 {visibility : hidden ;} /*화면에서 사라짐. 공간은 남음 */
h1 {display : none;} /*화면에서 사라짐. 공간도 사라짐 */
3. 실전에서 미디어쿼리 이용하기
1단계 : 모바일과 PC의 환경의 차이를 인식하라.
다양한 모바일 디바이스의 화면 크기
중요한 스마트폰 한정해 놓고 초점을 맞출것!
모든 브라우저에서 모두 동일한 화면 보여줄 필요 없다.
2단계 : HTML 작업
심플한 시맨틱 마크업
*뷰포트 메타데이터
스마트폰 브라우저를 통해서 데스크톱 PC 사이트 접속할때 줌아웃이 되어 글씨가 작게 되는 경우
<meta name="viewport" content="user-scalable=no, width=device-width">
3단계 : 모바일 스타일링
미디어쿼리 @media 적용
공통 스타일 시트 제작
<link href ="common.css" rel="stylesheets" type="text/css" >
하이퍼링크 스타일 : 상속기능을 이용하면, 상위 스타일 그대로 전해 받아 처리 한다.
예제
a:link, a:visited{
color: inherit ; /* 상위 엘리먼트의 색상 상속받음 */
text-decoration: none;
}
a:horver, a:active {
text-decoration: underline
}
모바일 퍼스트! 모바일 스타일을 먼저 맛지게 만들고 그 다음 데스트톱PC.의 큰화면을 스타일 한다
작은 화면 을 큰화면에 담기 쉽지만, 그 반대는 어렵다. 반대의 접근법이 해결책이다. (-Luke Wroblewski, (전) 야후 디자인 아키텍처)
메뉴를 접근하기 편한곳에 배치
사용자 관점에서 볼때 메뉴는 하당에 있는것이 바람직하다.
4단계: 데스크톱 PC 스타일링
타이틀 배경 이미지를 활용
배경이미지를 넣기 좋은 곳은 header 엘리먼트 이다. because pc는 화면크기가 넓기 때문이다.
메뉴를 오른쪽에 배치하기
.entries {
float: left /* entiries를 상자로 간주하여 왼쪽으로 float" */
width : 680px /* 너비는 sidebar도 고려하여 680px로 줄임 */
}
.sidebar {
float : left /*entries 옆에 나란히 출력을 위해 float 시킴 */
text-align :right /*텍스트 표시는 우측 정렬시킴 */
width : 100px; /* 너비는 entries 고려하여 800px을 넘기지 않도록 100px 설정 */
margin-left :20px; /*entries와 간격을 만듬 */
}