viewport
.webkit 기반 모바일 브라우저의 기본 뷰포트 너비 980px
.viewport 지정, <head> 태그 사이 작성
..<meta name="viewport" content="<속성1=값>, <속성2=값>, ...">
..content 속성
| 속성 | 설명 | 사용 가능한 값 | 기본 값 |
| width | 뷰포트 너비 | device-width | 크기 | 브라우저 기본 값 |
| height | 뷰포트 높이 | device-height | 크기 | 브라우저 기본 값 |
| user-scalable | 확대/축소 가능 여부 | yes | no | yes |
| initial-scale | 초기 확대/축소 값 | 1~10 | 1 |
| minimum-scale | 최소 확대/축소 값 | 0~10 | 0.25 |
| maxumim-scale | 최대 확대/축소 값 | 0~10 | 1.6 |
크롬 '디바이스 모드'
http://mediaqueri.es/ : 미디어 쿼리를 이용한 반응형 웹 사이트 소개
가변 그리드 레이아웃 fluid grid layout
주로 960 픽셀의 12칼럽 그리드 사용 ( 1칼럼=60px, 좌우마진 10px)
1. 전체를 감싸는 요소 확인
.너비 값을 백분율 값으로 변환
2. 각 요소의 너비 값 계산
.요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비 *100
가변 글꼴
.텍스트 크기를 px 단위 지정 시 크기 고정, 화면 작은 기기에선 작게 표시, em / rem 사용
.em단위 : 부모 요소의 폰트 대문자 M의 너비를 1em으로 지정 , 1em=16px
.rem 단위 : root em으로 처음부터 기본 크기를 지정하여 중간에 바뀌지 않음
가변 이미지(fluid image)
.CSS max-width 속성 값 100% 지정, 고해상도 경우 사이즈 커 다운로드 오래 걸림
.<img src="<이미지>" srcset="<이미지1 픽셀밀도>[, <이미지2>, ...]">, 너비에 따라 표시할 이미지 나열
.<picture> <source> 태그 - 상황별 다른 이미지 표시
..<picture>
<source srcset="images/1.jpg" media="(min-width:1024px)">
<source srcset="images/2.jpg" media="(min-width:768px)">
<img src="images/.jpg" alt="fill with coffee" style="width:100%">
</picture>
가변 비디오
.CSS max-width 속성 값 100% 지정
미디어쿼리
mediaqueri : CSS3 모듈 중 하나로 접속하는 장치에 따라 특정한 CSS 스타일 적용
.@media [only | not] 미디어 유형 [and 조건] * [and 조건]
.<style> 태그 안에 사용하며, 미디어 유형 지정, 필요에 따라 and 연산자로 조건 적용
.미디어 유형의 종류
| 미디어 유형 | 사용 가능한 미디어 |
| all | 모든 미디어 유형 |
| 인쇄 장치 | |
| screen | 컴퓨터 스크린(스마트폰 포함) |
| tv |
TV |
| aural | 음성 합성 장치 (화면을 읽어 소리로 출력하는 장치) |
| braile | 점자 표시 장치 |
| handheld | 패드처럼 들고 다니는 장치 |
| projection | 프로젝터 |
| tty | 디스플레이 기능이 제한된 장치 (px 단위 사용 불가) |
| embossed | 점자 프린터 |
화면 크기에 따라 다른 CSS 적용
width, height : 웹페이지 가로, 세로 길이
min-width/height : 최소
max-width/height : 최대
단말기의 크기에 따라 적용
device-width/height : 단말기의 가로 너비, 세로 높이
min-device-width/height : 단말기의 최소 너비, 높이
max-device-width/height : 단말기의 최대 너비, 높이
화면 회전
orientation:portrait 세로 방향
orientation:landscape 가로 방향
화면 비율, 물리적 화면 비율
.뷰포트의 너비 값 /높이 값
.aspect-ratio 속성 : 화면 비율
.min-aspect-ratio 속성 : 최소 화면 비율
.max-aspect-ratio 속성 : 최대 화면 비율
.device-aspect-ratio 속성 : 단말기 화면 비율
.min-device-aspect-ratio 속성 : 단말기 최소 화면 비율
.max-device-aspect-ratio 속성 : 단말기 최대 화면 비율
색상당 비트 수
color : 비트 수
min-color : 최소 비트 수
max-color : 최대 비트 수
https://www.w3.org/TR/css3-mediaqueries/ : 여러 미디어쿼리 조건
중단점 break point
.mobile first : 모바일을 중단점으로 하고 태블릿, 데스트톱을 작성하는것
.스마트폰 : 기본 CSS 작성, 세로일 때 min-width :320px, 가로일 때 min-width : 480px
.태블릿 : 768px 이상일 때 태블릿 지정, 가로일 땐 데스트콥과 동일 1024px
.데스크톱 - 1024px 이상
외부 CSS 파일 연결하기
.<head> 태그 사이에 삽입,<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">
.<style>태그 사이 사용, @import url(css 파일경로) 미디어 쿼리 조건
.외부 파일이 많을 경우 <link> 태그 권장
웹문서에 직접 정의
.<style media="">
.<style> @medial 미디어쿼리 조건{ 규칙}
모바일 해상도
http://mobiphonespec.com/cellphone-screen-resolution.php
플렉서블 박스 레이아웃 flexible box layout
.flex container
.flex item : container 에 담기는 웹 요소
.main axis : 배치하는 기본 방향, 왼쪽에서 오른쪽 수평 방향 배치
.cross axis : main axis와 교차되는 방향, 위에서 아래
display 속성 - flex container 지정
.display : flex | inline-flex
.display:-webkit-box;
.display:-moz-box;
.display:-ms-flexbox;
.display:-webkit-flex;
flex-direction 속성 - 방향 지정
.flex-direction : row | row-inverse | column | column-inverse
flex-wrap 속성 - item을 한줄, 여러 줄로 배치
.flex-wrap : no-wrap | wrap | wrap-reverse
flex-flow 속성 - 방향과 여러 줄의 배치를 한꺼번에 지정
.flex-flow : <플렉스 방향> < 플렉스 줄 배치>
order 속성 - 플렉스 항목 배치 순서 바꾸기
.oreder : 0 | 숫자
.플렉스 항목에서 지정
flex 속성 - 플렉스 항목 크기 조절
.flex : [<flex-grow> < flex-shrink> <flex-basis>] | auto | initial
justify-content 속성 - 주축 기준의 배치 방법 지정
.justify-content : flex-start | flex-end | center | space-between | space-around
align-items, align-self 속성 - 교차축 기준의 배치 방법 지정
.align-items : stretch | flex-start | flex-end | center | baseline
.align-self : auto | strectch | flex-start | flex-end | center | baseline
align-content 속성 - 여러 줄일때 배치 방법 지정
.align-content : flex-start | flex-end | center | space-between | space-around
'소프트웨어 > HTML+CSS' 카테고리의 다른 글
| CSS 7번째 - 애니메이션 (0) | 2020.01.30 |
|---|---|
| CSS 6번째 - 선택자 (0) | 2020.01.22 |
| CSS 5번째 - CSS 포지셔닝 (0) | 2020.01.17 |
| CSS 4번째 - 레이아웃 스타일 (0) | 2020.01.16 |
| CSS 3번째 - 색상/배경 스타일 (0) | 2020.01.15 |
