# 반응형
반응형이란?
하나의 웹사이트에서 PC, Tablet, Mobile 등 접속하는 기기의 화면 크기에 맞게 사이트가 자동으로 반응하는 기법
적응형이란?
접속하는 기기에 따라 PC용 웹사이트, 테블릿/모바일용 웹사이트를 보여주는 기법
#HTML
반응형 페이지를 만들기 위한 메타 태그
viewport meta 태그를 추가하여 페이지가 호출될 때 보이는 화면을 어떻게 계산해서 보여줄지 정의
name : 메타태그 중 viewport를 사용하겠다고 선언
content : viewport 가 가진 content 값 지정하여 사용
- width : 브라우저에게 페이지의 가로 너비 계산하는 방법 알려줌, device-width 지정 시 접속하는 기기의 브라우저 너비에 맞게 페이지 맞춰줌
- initial-scale : 최초 화면 확대 값, 1.0 으로 두어 페이지 확대하지 않고 1배율로 보겠다고 정의
핸드폰으로 PC 전용 사이트에 들어갔을 때
페이지가 애매하게 확대되어 보이는 경우
-> viewport device-width 설정하지 않은 경우, 페이지 내 모든 요소를 축소해서 한 눈에 보여주려고 함
반응형 이미지 처리
picture : picture 태그를 사용하여 의도한 viewport 너비에 원하는 이미지를 넣을 수 있음
picture 태그의 자식 요소
- source : media 속성으로 조건을 넣어 화면 크기에 맞는 이미지를 불러
- img : 조건 충족하지 못할시 img 태그가 불러와짐
<!-- doctype 선언 -->
<!DOCTYPE html>
<!-- html 선언 -->
<html lang="ko">
<head>
<meta charset="UTF-8" />
<!-- 반응형을 위한 viewport meta 태그 선언 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>반응형 실습</title>
</head>
<body>
<picture>
<!-- 최대 가로 너비가 768일 때 해당 image를 사용하겠다는 의미 -->
<source
media="(max-width: 768px)"
srcset="https://via.placeholder.com/200x200?text=mobile"
/>
<img
src="https://via.placeholder.com/200x200?text=pc"
alt="PC용 이미지"
/>
</picture>
</body>
</html>위의 코드에서 브라우저의 크기를 조절해보면 768px를 기준으로 다르게 보인다
이렇게 브라우저 크기와 기기 상황에 따라 다르게 보이는 것이 반응형이다
# CSS
미디어 쿼리(Media Query) 란?
기기의 유형과 어떤 특성이나 수치에 따라 스타일 수정할 수 있다
@media + 기기유형 + 연산자 + (규칙) { ..스타일... }
@media 로 시작
기기 유형 all : 모든 장치, print : 인쇄 결과물 및 출력 미리보기, screen : 화면
and 연산자를 통해 조건을 계속 추가할 수 있음
# CSS 호출 방법
link 태그를 사용하면 원하는 유형과 조건에 따라 스타일 파일을 불러올 수 있다
# CSS 반응형 작업 시 주의사항
1. 레이아웃의 고정크기 사용 지양
width 값을 고정하면 반응형 매구간마다 고정값을 변경해야 하는 불편함 발생
max-width를 사용한 최대 너비를 사용하자
heigth 역시 값을 고정하면 유동적으로 변하는 높이에 대응할 수 없다
min-height 를 사용한 최소 높이를 적극 활용하자
2. 인라인 스타일은 반응형을 처리할 수 없다
인라인 스타일의 사용을 지양하자
<!-- doctype 선언 -->
<!DOCTYPE html>
<!-- html 선언 -->
<html lang="ko">
<head>
<meta charset="UTF-8" />
<!-- 반응형을 위한 viewport meta 태그 선언 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>반응형 실습</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>박스입니다</div>
</body>
</html>위의 HTML 코드에 반응형 CSS를 적용해보겠다
div {
font-size: 20px;
background-color: #ddd;
}
/*
반응형 CSS 기본 틀
@media 기기유형 연산자 (조건) {
....
} */
/*너비가 1024px 이하일 때 적용되도록 설정한 반응형 CSS*/
@media all and (max-width: 1024px) {
div {
font-size: 30px;
background-color: blueviolet;
}
}페이지의 크기가 변하니까 CSS도 변하는 것을 확인할 수 있다
여러 개의 조건을 넣어줄 때는 and 연산자를 사용해서 설정해주면 된다
/*768px 이상 ~ 1024px 이하인 구간에서
적용되는 반응형 CSS */
@media all and (min-width: 768px) and (max-width: 1024px) {
div {
font-size: 50px;
background-color: blue;
}
}
반응형 CSS를 따로 파일로 분리하는 경우 HTML 코드에서 link 태그를 사용해서 지정해 줄 수 있다
<link rel="stylesheet" href="media.css" media="(max-width : 1024px)" />반응형 CSS를 한 파일 내에서 볼 수 있기 때문에 하나의 파일로 분리하는 것을 추천!
# 마무리
내가 쓰는 코드가 어떤 브라우저의 버전 몇까지 지원하는지 알고 싶을 때?
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
사이트를 활용하자
HTML, CSS 관련해서 헷갈리거나 궁금한 개념이 있다면 MDN 사이트를 적극 활용하자
https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
모르는 것이 생기면 한글 검색보다는 영문 검색을 해보자
#새로 알게 된 점
반응형 CSS를 어떻게 사용해야 하는지에 대해서 배울 수 있었다
HTML과 CSS 강의를 마무리하면서 꿀팁들과 유용하게 활용할 수 있는 사이트들을 알게 되어 유익한 시간이었다
앞으로 실습과 해당 사이트들을 적극 활용해서 개발 역량을 기를 수 있도록 노력할 것이다
다가올 자바스크립트 강의도 기초부터 탄탄하게 다시 공부하여 프론트엔드 개발 역량을 기르자
'TIL > 프로그래머스 데브코스' 카테고리의 다른 글
| 클라우딩 어플리케이션 엔지니어링 TIL Day 5 (2) (0) | 2024.01.04 |
|---|---|
| 클라우딩 어플리케이션 엔지니어링 TIL Day 7 (1) | 2024.01.03 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 5 (1) (1) | 2023.12.29 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 4 (2) (1) | 2023.12.22 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 4 (1) (0) | 2023.12.22 |
