[반응형 웹] html, css

반응형

1. html

2. css

 

반응형 : 하나의 웹사이트에서 PC, Tablet, Moblie 등 접속하는 기기의 화면 크기에 맞게 사이트가 자동으로 반응하는 기법

적응형 : 접속하는 기기에 따라 PC용 웹사이트, 테블릿/모바일 용 웹사이트를 보여주는 기법

 

html

반영형 페이지를 만들기 위한 메타 태그

<meta name="viewport" content="width=device-width, initial-scale=1.0">

반응형 이미지 처리 : ;;picture 태그를 사용하여 의도한 viewport 너비에 원하는 이미지를 넣을 수 있다.

<picture>
	<soure media="(max-width: 768px)" srcset="https://via.placeholder.com/1000x1000?text=Moblie" />
	<soure media="(max-width: 1024px)" srcset="https://via.placeholder.com/1000x1000?text=Tablet" />
</picture>

 

html 문서 자동으로 만들기

! + enter

 

CSS

미디어 쿼리 : 기기의 유형과, 어떤 특성이나 수치에 따라 스타일을 수정할 수 있다.

@media로 시작한다.

@media 기기유형과 연산자 (규칙) {
	스타일
}

and 연산자를 통해 조건을 계속 추가할 수 있다.

 

주의사항

1. 레이아웃의 고정 크기 의 사용지양

매구간 마다 고정값을 변경해야 하는 불편함이 발생할 수 있다 (max-width, min-height 활용)

2. 인라인 스타일 반응형을 처리할 수 없다.

 

END

1. 내가 쓰는 이코드, 어떤 브라우저의 버전 몇까지 지원하느지?

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

2. 많은 HTML 코드와 CSS 속성을 배웠는데, 얼마나 더 많은 내용이 있을까?

mdn