반응형:하나의 웹사이트에서 접속한 기기의 크기에 맞추어 사이트가 반응하는 기법
적응형:하나의 웹사이트에서 접속한 기기의 종류에 맞추어 사이트가 반응하는 기법
HTML에서의 반응형 코드
반응형을 위한 메타 태그:
<meta name="viewport" content="width=device-width, intial scale=1.0">해석
meta name="viewport":이름이 viewport인 메타데이터를 선언
content"~ initail scale=1.0":콘텐츠의 값 선언, 넓이는 디바이스의 넓이, 확대는 1배율(1.0)으로 보겠다고 선언
이런 식으로 viewport를 사용해 이미지에도 반응형 조건을 걸어줄 수 있다.
CSS에서의 반응형
Media query:기기 유형이나 수치에 따라서 스타일 수정 가능
형식
@media 기기유형과 연산자 (규칙) {
스타일
}@media로 시작하며
기기 유형:
all 모든 기기
print 인쇄 및 출력 기기 확인용
screen 화면
규칙 :
뷰포트 너비(가장 많이 사용)
뷰포트 가로세로비
기타
로 요약할 수 있다.
예시 코드 및 결과
link 태그를 적절히 활용하면 PC와 모바일에서 별개의 CSS를 참조할 수 있다.
예시 코드
반응형 웹 작업 시 주의 사항:
고정된 크기 사용 지양(px처럼 반응하지 않는 크기 사용 시 차후 화면 구성에 문제 생김)
max-widht, min-height 등 최대, 최소 크기를 정하고 반응하게 만드는 것이 최선
태그 내부에 인라인 스타일이 들어가면 반응형을 만들 수 없음을 기억하기
개발 초보