[CSS] 반응형 웹 미디어쿼리(@media) 디바이스 별 해상도 분기점

CSS 반응형 웹 미디어쿼리(@media) 사용방법 미디어쿼리는 css3에서부터 사용할 수 있으며, 사용방법은 다음의 두가지 방법으로 사용할 수 있다. 1. 가장먼저 HTML head 부분에 meta viewport를 설정해준다. 2-1. style.css 파일에 함께 정리하여 사용하고 link로 호출하여 사용하는 방법. 2-2. 2-1항과는 별도의 media_style.css 파일을 따로 정리하여 사용조건에 부합할때 불러와서 사용하는 방법. 만약 본인이 필요하다고 판단되면 해상도별로 미디어css파일을 따로 만들어서 호출하여 쓰는것도 가능하다. 3. 스타일시트에서 @media 선언후 스타일입력 @media (조건입력) { 스타일 입력 } CSS 반응형 웹 미디어쿼리(@media) 디바이스 별 해상도 분기..

2022.08.25

[HTML5+CSS] 반응형 HTML 미디어쿼리 연습하기

반응형HTML의 기본! 미디어쿼리 연습하기 화면사이즈에 따라 반응하는 반응형 사이트를 만들기위해 가장 핵심적으로 알아야 하는 미디어쿼리를 만들어보는 연습입니다. [Sample Image] 이미지를 클릭하시면 새창에서 완성된 페이지를 확인하실 수 있습니다. [Source Code] 아래는 소스코드입니다. 미디어쿼리 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다. @media only all and (조건문) {실행문} @media : 미디어 쿼리가 시작됨을 표시합니다. only : 미디어 퀴리 구문을 해석하라는 명령업니다. (생략가능) all : 미디어 쿼리를 해석해야 할 대상을 나타냅니다. (생략가능) all : 모든 미디어 유형에서 사용할 CSS를 정의..

2021.02.10