TechScribe Notes
9.오징어 게임 웹사이트 만들어보기(미디어쿼리, 반응형 웹) 본문
반응형 웹
반응형 웹 디자인: 기존 웹사이트를 그대로 유지하면서 다양한 화면 크기에 맞춰서 요소를 재배치하고 표시방법을 변경해주는 것.
뷰포트: 실제 내용이 표시되는 영역
-뷰포트는 <meta>태그를 이용하여 <head>태그 사이에 작성한다.
| 기본형 : <meta name ="viewport" content ="속성1=값1" , "속성2=값2",...."> 가장 많이 쓰이는 뷰포트 속성: <meta name="viewport" content ="width=device-width, initial-scale =1"> |
content 속성에 작성하는 뷰포트 속성
| 종류 | 설명 | 사용 가능한 값 | 기본값 |
| width | 뷰포트 너비 | device-width또는 크기 | 브라우저 기본값 |
| height | 뷰포트 높이 | device-height또는 크기 | 브라우저 기본값 |
| user-scalable | 확대-축소 가능 여부 | yes 또는 no (yes는 1로, device-width 와 device-height값은 10으로 간주) |
yes |
| initial-scale | 초기 확대, 축소값 | 1~10 | 1 |
뷰포트 단위
| vw | 1vw는 뷰포트 너비의 1% |
| vh | 1vh는 뷰포트 높이의 1% |
| vmin | 뷰포트 너비와 높이 중 작은 값의 1% |
| vmax | 뷰포트 너비와 높이 중 큰 값이 1% |
미디어 쿼리 : 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법
| @media [only | not ]미디어 유형[and 조건] *[and조건] |
-only: 미디어 쿼리를 지원하지 않는 웹브라우저에서는 미디어쿼리 실행 안함
-not: 다음에 지정하는 미디어 유형 제외한 모든 유형의 미디어에 적용
-and: 조건을 여러개 연결해서 사용함
-미디어 유형의 종류
| 종류 | 설명 |
| all | 모든 미디어 유형 |
| pring | 인쇄 장치 |
| screen | 컴퓨터 스크린이나 태블릿, 모바일 디바이스의 스크린들 |
| tv | 음성과 영상이 동시에 출력되는 TV |
| aural | 음성 합성 장치( 주로 화면을 읽어 소리로 출력해주는 장치) |
| braille | 점자 표시 장치 |
| handheld | 패드처럼 손에 들고 다니는 장치 |
| projection | 프로젝터 |
| tty | 디스플레이 기능이 제한된 장치 (픽셀단위 사용 불가) |
| embossed | 점자 프린터 |
-웹문서 가로와 높이 속성 : 미디어에 따라 높이값이 달라짐
(screen이 아닌 미디어에서는 스크롤을 포함한 전체문서, print에서는 한 페이지 높이 기준)
| 종류 | 설명 |
| width, height | 웹페이지의 가로너비, 세로 높이 지정 |
| min-width, min-height | 웹페이지의 최소너비, 최소 높이 지정 |
| max-width, max-width | 웹페이지의 최대너비, 최대 높이 지정 |
-단말기의 가로 너비와 세로 높이 속성: 단말기의 너비와 높이를 고려해야 할 때
*대부분의 단말기 해상도와 실제 브라우저 너비는 다름.
| 종류 | 설명 |
| device-width, device-height | 단말기의 가로너비, 세로 높이 지정 |
| min-device-width, min-device-height | 단말기의 최소너비, 최소 높이 지정 |
| max-device-width, max-device-width | 단말기의 최대너비, 최대 높이 지정 |
-화면 회전 속성 : 화면 가로모드, 세로모드에서도 미디어 쿼리 속성 지정이 가능하다.
| 종류 | 설명 |
| orientation: portrait | 단말기의 세로 모드 |
| orientation: landscape | 단말기의 가로 모드 |
-미디어쿼리의 중단점(break point)
:화면 크기에 따라 서로 다른 CSS를 적용할 분기점. 주로 화면 크기 기준으로 지정함
-모바일 퍼스트 기법: 모바일의 레이아웃을 기본으로 다른 디바이스의 레이아웃에 더 많은 기능과 스타일 추가하는 방법
(모바일용 css는 태블릿과 데스크탑에서도 기본으로 적용됨. 처리속도나 화면 크기 등에서 모바일의 제약조건이 많으므로 모바일 퍼스트 기법으로 함)
*스마트폰: 모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 CSS로 작성한다.
스마트폰 화면 전환방향까지 생각하면 min-width를 주로 portrait 320px, landscape 480px로 지정.
*태블릿: 세로 크기가 768px이상이면 태블릿으로 지정함. 가로크기는 1024px 이상.
*데스크톱: 화면크기 1024px이상.
-미디어쿼리 적용방법
1)외부 CSS파일 연결하기
| <link rel ="stylesheet" media="미디어 쿼리 조건" href="css파일 경로"> :<head>태그 사이에 적용 @import url(css파일 경로) 미디어 쿼리 조건 : css파일이나 style태그 사이에 적용 *자바스크립트와 @import문이 함께 있을 때 자바스크립트 먼저 내려받고 @import문에 있는 css 다운로드하므로 자바스트립트에서 스타일 관련 정보를 처리할 경우 오류가 날 수도 있어서 규모가 크고 css파일이 많으면 <link>태그를 주로 씀 |
2)웹 문서에 직접 정의하기
| <style media="조건"{ 스타일 규칙 } </style> |
3)css 문서에 직접 정의하기
| <style> @media 조건 { 스타일 규칙 } </style> |
-개발자 도구에서 미디어 쿼리 확인할 때 상단에 나타나는 막대 색의 의미
파란색: 최대 너비(max-width)를 기준으로 중단점을 나눈 미디어 쿼리 문
초록색: 최소 너비와 최대 너비를 이용해 특정 범위를 기준으로 중단점을 나눈 미디어쿼리문
주황색: 최소 너비(min-width)를 기준으로 중단점을 나는 미디어 쿼리 문
'프론트엔드 > Online Tutorial' 카테고리의 다른 글
| 8. 인풋 검색창 + 드롭다운 버튼 /input (0) | 2021.12.19 |
|---|---|
| 7.아코디언 메뉴 만들기 (0) | 2021.12.19 |
| 6. 메뉴토글 버튼 만들기(+애니메이션 효과)/ClassList (0) | 2021.12.19 |
| 5. 커스텀 체크박스 / 속성선택자/가상클래스/가상요소 (0) | 2021.12.19 |
| 4. 드롭다운 메뉴 만들기 (0) | 2021.12.19 |
