티스토리 뷰

What I Learned

TIL_20221212_프론트 반응형

오베르 2022. 12. 13. 02:36

- 반응형

다양한 기기에 최적화된 화면을 제공

css반응형 레이아웃 : width 에 따라서 디바이스를 인식하고 레이아웃을 맞춰 변경

 

- 미디어 쿼리

화면의 크기와 종류에 따라 디자인을 달리 해주는 css 기술

나누는 기준 해상도 위치를 중단점이라고 함

 

미디어 쿼리 사용 예시

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>반응형 웹 미디어쿼리 테스트</title>
<!-- 반응형 웹을 위한 미디어쿼리 선언부 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
	body {
		background-color: olive;
	}
	/*	
            768px 이상 너비부터 olive -> yellow
			992px 이상 너비부터 yellow -> lime
			1200px 이상 너비부터 lime -> orange
		*/
   	/*
    max-width 를 설정할 수도 있음
 	@media ( max-width : 767px) {
		body {
			background-color: blue;
		}
	}
    */
    @media ( min-width : 768px) {
		body {
			background-color: yellow;
		}
	}
	
	@media ( min-width : 992px) {
		body {
			background-color: lime;
		}
	}
	@media ( min-width : 1200px) {
		body {
			background-color: orange;
		}
	}
   </style>
</head>
<body>

</body>
</html>

 

출처 :

언젠가는 개발자 - 반응형에 대해(1)

Programmer 파프리카의 이야기 - [부트스트랩/BootStrap] 반응형 웹, 미디어쿼리, 부트스트랩(그리드, 테이블)

 

오늘 한일

- 팀프로젝트 css html 디자인 업데이트

저작자표시

'What I Learned' 카테고리의 다른 글

TIL_20221214_배포 때 pip 문제, 회원 탈퇴 문제  (0) 2022.12.15
TIL_20221213_배포 정리  (0) 2022.12.14
WIL_221205to221209_내일배움캠프15주차  (1) 2022.12.12
TIL_20221209_자바스크립트 fetch  (1) 2022.12.12
TIL_20221208_Redirect URIs  (0) 2022.12.09
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함