HTML, CSS
- HTML(반응형)
- CSS
- End
1. HTML(반응형)
반응형
- 하나의 웹에서 접속하는 기기의 화면 크기에 맞게 사이트가 자동으로 반응하는 기법
적응형
- 접속하는 기기에 따라 각기 다른 웹사이트를 보여주는 기법
반응형 페이지를 위한 메타 태그
viewport meta태그를 추가하여 페이지가 호출될 때 부이는 화면을 어떻게 계산해서 보여줄지 정의
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
name: 메타태그 중viewport를 사용하겠다고 선언
content:viewport가 가진 content 값을 지정하여 사용
width: 브라우저에게 페이지의 가로 너비를 계산하는 방법을 알려주며, device-width를 지정하면 접속하는 기기의 브라우저 너비에 맞게 페이지를 지원
initial-scale: 최초 화면 확대값
반응형 이미지 처리
picture태그를 사용하여 의도한viewport너비에 원하는 이미지를 넣을 수 있다.
2. CSS
미디어 쿼리(Media Query)
- 기기의 유형과, 어떤 특성이나 수치에 따라 스타일을 수정할 수 있다.
@media로 시작
- 기기 유형:
all(모든 장치),print(인쇄 결과물 및 출력),screen(화면) and연산자를 사용해 조건 계속 추가 가능
CSS 호출 방법
link태그의 뒤에media=""를 추가해 유형과 조건에 따라 스타일 파일 불러오기 가능
주의사항
- 레이아웃의 고정 크기의 사용 지양
- 크기를 고정하면 반응형 매 구간마다 고정값을 변경해야 하는 불편함 발생
max-width,min-height등의 크기 적극 사용
- 인라인 스타일은 반응형 처리 불가
미디어쿼리는 생각보다 더 다양한 플랫을 가지고 있다.
(가로모드, 세로모드, 뭐 라이트나 다크모드 등등 까지 훨씬 많다.)
3. End
꿀팁 몇가지
- caniuse.com: 내가 쓰는 코드(태그, 속성 등)가 브라우저 몇까지 지원하는지 가르쳐줌
- MDN: 그냥 브라우저 코딩의 교과서 느낌. html input으로 함 검색해보자
- 구글 검색 팁: 언어 모르는거 순으로 검색 추천
ex) css display flex, python dictionary, c char 등 - 영어 검색 생활화
