728x90
★ 반응형 웹, Responsive Web
- 반응형 레이아웃
- 웹 소비 장치 > 다양화
- 이전 : PC(다양한 해상도)
- 이후 : PC, 태블릿, 스마트폰 등.. (훨씬 다양한 해상도)
- 웹 페이지의 크기??
- 1. 페이지 각각 생성
- PC > PC 해상도에 맞는 페이지 제작
- MObile > Mobile 해상도에 맞는 페이지 제작
- 2. 페이지 1회 생성 > 반응형 레이아웃 > CSS 미디어 쿼리
- PC > PC 해상도에 맞게 출력
- Mobile > Mobile 해상도에 맞게 출력
- 사용 방법
@media (조건) {
CSS 영역
}
@media screen and (해상도 조건) {
해상도 조건에 맞는 기기를 위한 CSS 정의
}
■ 사용 ex)
- HTML 코드
<div id="box">
상자
</div>- 기본 CSS 코드
#box {
border : 1px solid black;
width : 200px;
height : 300px;
background-color : gold;
}- CSS 미디어 쿼리
@media (min-width : 768px) {
#box {
background-color: tomato;
}
}- 실행 결과
■ 스마트폰, 태블릿, PC 사이즈 조정
- 세로모드 스마트폰 너비
color : red;
- 가로모드 스마트폰 너비(567px ~ 767px)
@media (min-width : 576px) {
color : blue;
}
- 태블릿 너비(768px ~ 991px)
@media (min-width : 768px) {
color : orange;
}
- 데스크톱(랩탑)(992px~1199px)
@media (min-width : 992px) {
color : red;
}
- 큰화면 데스크톱(1200px ~ )
@media (min-width : 1200px) {
color : red;
}
■ 프로젝트 > 반응형 레이아웃 결정
- 1. 데스크톱 우선 vs 모바일 우선
- a. 데스크톱 우선
- 큰 가로폭부터 > 작은 가로폭순으로 제작하는 방법
- b. 모바일 우선
- 작은 가로폭부터 > 큰 가로폭으로 제작하는 방법
- 2. 모바일 어디까지 지원?
- 스마트폰(가로/세로) 구분?
- 태블릿 별도 지원?
- PC > (HD, FHD, 4K, 8K)
- HTML 코드
<body>
<main>
<header>
<h1>Responsive Layout</h1>
</header>
<section>
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam dignissimos, pariatur iste quasi nostrum fugit at explicabo officiis perferendis distinctio unde labore illum. Facere laborum distinctio optio ex nihil magni.</p>
</section>
<aside>
<h3>Sidebar</h3>
<div>item</div>
<div>item</div>
<div>item</div>
</aside>
<footer>
©Copyright test.com 2023 All rights reserved.
</footer>
</main>
</body>- CSS 코드
/* PC 우선 */
main {
width : 1000px;
border : 10px solid cornflowerblue;
margin : 0px auto;
padding : 20px;
}
header {
padding : 20px;
border : 10px solid orange;
margin-bottom : 20px;
}
section {
width : 650px;
border : 10px solid tomato;
padding : 20px;
float : left;
margin-bottom: 20px;
}
aside {
border : 10px solid skyblue;
width : 220px;
padding : 20px;
float : right;
}
footer {
border : 10px solid greenyellow;
padding : 20px;
clear : both; /*both를 주게 되면 자동으로 큰것에 대해 클리어함 */
}- CSS 코드 : 모바일 작업
/* 모바일 작업 */
@media screen and (max-width : 640px) {
/* 작은 해상도 지원 */
main {
width : auto;
}
section {
width : auto;
float : none;
}
aside {
width : auto;
float : none;
margin-bottom : 20px;
}
}- 그외 Tip
@media screen and (orientation : landscape) {
body {
background-color: blue;
}
}
/* 미디어 종류, Media Type
1. screen > 모니터, 태블릿, 스마트폰 화면 등
2. print > 프린터 장치, 인쇄용 CSS
3. speech > 스크린리더기
4. all > 모든 장치를 Cover
*/
@media print {
body {
background-color: chartreuse;
}
}728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 1 - JavaScript의 기초 (0) | 2023.04.20 |
|---|---|
| CSS STEP 34 - Grid (0) | 2023.04.20 |
| CSS STEP 32 - Variable (0) | 2023.04.20 |
| CSS STEP 31 - Animation (0) | 2023.04.19 |
| CSS STEP 30 - Transition 응용 예제 모음 (0) | 2023.04.19 |
