2022-10-26 강의 내용
- 반응형 웹
- 뷰포트
- 미디어 쿼리
반응형 웹이란?
- pc, TV, 스마트폰 등 다양한 기기에 맞춰 반응하는 웹 사이트
- 사용자가 접속하는 기기,환경에 맞춰 화면크기가 자동 조절된다.
- 사용자가 굳이 확대하거나 스크롤 막대를 옮기거나 하는 수고를 최대한 줄일 수 있음
반응형 웹 사이트 예시
이전부터 많이 사용하던 사이즈였지만 요즘엔 더 다양한 스마트기기가 출시되어 더 다양한
사이즈를 고려해야한다.
반응형 웹의 장점
- 기기의 화면 크기나 해상도에 영향을 받지 않음
- 화면 변화에 즉기 반응
- 어느 기기에서도 사이트 주고가 동일
- 유지 관리가 편함
반응형 웹의 단점
- 사이트 디자인이 단순함
- 반응형 웹은 브라우저의 너비값에 따라 레이아웃을 변경하기 때문에
- 사이트의 디자인이 단순한 경우가 많다.
뷰포트(viewport)
스마트 폰 화면에서 실제 내용이 표시되는 영역
뷰포트를 지정하면 화면 크기에 맞춰 내용을 확대 및 축소해서 표시 가능
HTML을 VS코드에 입력하게되면 상단에 meta태그 부분을 확인할 수 있다.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- initial-scale=1.0" 은 화면을 1.0배로 확대하겠다는 뜻*/ -->
</head>
뷰포트 속성
| 종류 | 설명 | 사용 가능한 값 | 기본값 |
| width | 뷰포트 너비 | device-width 또는 크기 | 브라우저 기본값 |
| height | 뷰포트 높이 | device-height 또는 크기 | 브라우저 기본값 |
| user-scalable | 확대 축소 가능 여부 |
yes 또는 no | yes |
| initial- scale | 초기 확대 축소 값 |
1~10 | 1 |
뷰포트 단위
min/max 사용 시 작성 순서 주의
- min을 사용 시 , 크기가 작은 순서대로 작성
- max를 사용 시 , 크기가 큰 순서대로 작성
| 단위 | 비고 |
| vw | 1vw == 뷰포트 너비의 1%와 같음 |
| vh | 1vh == 뷰포트 높이의 1%와 같음 |
| vmin (이상) | 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같음 |
| vmax (이하) | 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같음 |
미디어 쿼리
사이트에 접속하는 기기별로 적용할 스타일 파일을 다르게 지정해주는 css의 모듈
미디어 쿼리를 사용해 적용하는 스타일을 기기마다, 화면크기마다 전환할 수 있음
미디어 쿼리를 사용한 사이트 예씨
Media Queries
mediaqueri.es
미디어 쿼리 기본 문법
not 을 사용하여 지정하는 미디어 유형을 제외 시킬수도 있음
@media screen and (min-width:720 ){
p {
background-color: red;
}
}
@media 미디어유형 and (조건문){
실행문{
}
}
미디어 유형의 종류
| 기기명 | 비고 |
| all | 모든 장치 (기본값) |
| 인쇄 장치 | |
| screen | 컴퓨터 화면 장치 또는 스마트 기기의 화면 |
| tv | 영상과 음성이 동시에 출력되는 장치 |
미디어 유형의 (조건문) 둘 다 생략가능
사용시 주의사항
논리 연산자 and 구문을 사용할 때 and 구문 뒤에 항상 공백을 한 칸 띄워줘야 함
| 키워드 | 비고 |
| and | 앞뒤 조건을 모두 만족할떄 뒤 따라오는 것을 해석함 |
| , (or) | 앞뒤 조건 중 하나만 만족하더라도 뒤에 따라오는 것을 해석함 |
사용방법
@media screen and (min-width:768px) and (max-width:1439px) {
//스타일 작성
}
미디어 쿼리 적용 방식
- 외부 css 파일 연결(linke방식)
- 웹 문서에 직접 정의
외부 css 파일 연결
css 파일 내에 미디어 쿼리를 작성 후, <link> 태그로 연결하여 사용
<link rel ="stylesheet" media="미디어 쿼리 조건" href="css_파일_경로">
웹 문서에 직접 정의
<style>
@media 조건{
스타일 작성
}
</style>
새싹 DT 기업연계형 프론트엔드 실무 프로젝트 2주차 블로그 포스팅
'CSS' 카테고리의 다른 글
| 2022-10-28 [새싹 프론트엔드] grid 레이아웃 (0) | 2022.10.28 |
|---|---|
| 2022-10-27 [새싹 프론트엔드] display: flex; (1) | 2022.10.27 |
| 2022-10-25 [새싹 프론트엔드] 목록태그 (0) | 2022.10.25 |
| 2022-10-24 [새싹 프론트엔드] 테이블, CSS 레이아웃 강의정리 (0) | 2022.10.24 |
| 2022-10-21 [새싹 프론트엔드] 강의정리 (0) | 2022.10.21 |
