이전 웹 브라우저에서 HTML5 사용
1. 구현
1) IE 9 이전 버전
- html5shiv 사용
- 지원 현황
IE6~9 | 사파리 4.x | 파이어폭스 3.x
| [Template] Accordion menu- 아코디언 메뉴 (0) | 2017.01.08 |
|---|---|
| [Template] DropDownMenu - 드랍다운메뉴 (0) | 2017.01.08 |
| [HTML5] meta 태그의 viewport 속성 (0) | 2016.12.19 |
| [CSS3] Transform - 위치, 모양 크기 지정 (0) | 2016.12.18 |
| [CSS] overflow-x /overflow-y (0) | 2016.12.18 |
리딩리드
meta 태그의 viewport 속성
1. 정의
- 최적화된 모바일 페이지를 만들기 위해선 meta 태그의 viewport 속성을 추가해야 한다
- 웹 표준은 아니지만 많은 브라우저 창에서 표준 처럼 사용
1) 문제
- 데스크 기반으로 만들어진 웹 페이지를 모바일에서 보면 작아보임
- 이유는 모바일 기본 뷰 포트가 960px 이기 때문에 브라우저가 고려안함
- 반응형 디자인의 예
a. 데스크 탑
b. nexus 5 크기(viewport 설정 시)
- 화면을 클릭하면 옆에 사이드 바가 나온다
c. viewport 비 설정시
- 전체 크기가 보인다.( 더 작아보임)
2) 해결
- <head>에 viewport를 설정 함으로써 모바일 화면에서도 자연스럽게 나오도록 한다
2. viewport 사용법
1) 기본 사용 <meta>
2) IE 10 에선 @viewport rule 사용한다
- 모든 브라우저에 적용을 원한다면 위 처럼 사용
3) 속성
meta name="viewport" : 뷰포트 선언
content="width=device-width" : 콘텐츠를 표현할 넓이
intial-scale=1 : 초기 크기 설정(기본 꽉찬 화면)
minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0)
maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0)
user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no)
target-densitydpi=device-dpi : 모바일 해상도로 맞춰서 보여줌(안드로이드 지원)
| [Template] DropDownMenu - 드랍다운메뉴 (0) | 2017.01.08 |
|---|---|
| [HTML] 이전 웹 브라우저에서 HTML5 사용 (0) | 2016.12.19 |
| [CSS3] Transform - 위치, 모양 크기 지정 (0) | 2016.12.18 |
| [CSS] overflow-x /overflow-y (0) | 2016.12.18 |
| [CSS3] @media 쿼리 (0) | 2016.12.18 |
리딩리드
Transform - 위치, 모양 크기 지정
- 회전(rotation), 비틀기(skewing), 확대/축소(scaling), 평면과 3D 공간에서 이동(tranlation) 한다
1. transform 속성
1) transform-origin
- 원점의 위치를 지정.
- 기본값은 엘리먼트의 왼쪽(left) 위(top)
- 회전, 확대/축소, 비틀기와 같이 한 점을 기준으로 수행되는 변환에 지정
2) transform
- 엘리먼트에 적용될 변환 지정
- 몇 가지 변환을 공백으로 구분하여 순서대로 지정해 놓음으로 여러가지 변환을 동시에 적용
2. 구현
1) 이미지 시계 방향으로 90도 회전
2) 이미지 비틀고 오른쪽으로 100px 이동
| [HTML] 이전 웹 브라우저에서 HTML5 사용 (0) | 2016.12.19 |
|---|---|
| [HTML5] meta 태그의 viewport 속성 (0) | 2016.12.19 |
| [CSS] overflow-x /overflow-y (0) | 2016.12.18 |
| [CSS3] @media 쿼리 (0) | 2016.12.18 |
| [CSS] @media 타입 (0) | 2016.12.18 |
리딩리드
overflow-x /overflow-y
1. 정의
- overflow는 요소의 내용이 넘칠 때 스크롤 생성, 혹은 보여줄지 말지를 결정
- overflow-x : x축, 왼쪽 오른쪽의 내용을 어떻게 보여줄지 결정
- overflow-y : y축, 위 아래 내용을 어떻게 보여 줄지 결정
2. 속성 및 구현
1) 종류
- visible, hidden, scroll, auto, initial, inherit
2) visible
- 기본값, 내용이 잘리지 않고 밖으로 넘침
3) hidden
- 내용이 잘리고 scroll이 생기지 않는다
4) scroll
- 잘리지만 scroll이 나타난다
5) auto
- 내용이 잘리고 필요할 때만 스크롤이 생김
| [HTML5] meta 태그의 viewport 속성 (0) | 2016.12.19 |
|---|---|
| [CSS3] Transform - 위치, 모양 크기 지정 (0) | 2016.12.18 |
| [CSS3] @media 쿼리 (0) | 2016.12.18 |
| [CSS] @media 타입 (0) | 2016.12.18 |
| [CSS3] Flex Position - Flexbox Layout (0) | 2016.12.18 |
리딩리드
