SMALL
1. 미디어 쿼리(media query)
- 반응형 웹
하나의 웹사이트에서 pc, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라
화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법
 |
|
<head> <style> body {background-color: deeppink;}
@media screen and (min-width: 800px) {
body {background-color: deeppink;}
}
</style>
<head> |
800px 이하일 때  800px 이상일 때  |
|
- 적용예시(1)
|
<head> <style> * {margin:0; padding:0; box-sizing: border-box;}
header {
width: 100%;
background-color: black;
margin-bottom: 20px;
}
nav > ul {
height: 50px;
list-style: none;
color: gold;
font-size: 12px;
}
nav > ul > li {
float: left;
padding: 10px;
margin: 5px 5px;
}
/*
구형폰: 320px;
일반폰: 360PX;
( 0px ~ 320px )
*/
nav, #contents {
width: 320px;
margin: 0 auto;
}
#intro > img {
width: 100%;
padding: 10px;
}
#desc {
width: 100%;
padding: 10px;
line-height: 1.5;
}
footer {
width: 100%;
height: 50px;
padding: 10px;
background-color: black;
color: white;
}
footer > p {
text-align: center;
font-size: 16px;
line-height: 25px;
}
/* 태블릿: 768px ~ ( 320px ~ 768px )*/
@media screen and (min-width: 768px) {
nav > ul {
font-size: 20px;
height: 80px;
}
nav > ul > li {
margin: 20px 25px;
}
nav, #contents {
width: 750px;
margin: 0 auto;
}
#intro {
width: 100%;
}
#intro > img {
width: 22%;
padding: 10px;
}
#desc {
width: 100%;
padding: 10px;
margin: 10px auto;
}
footer {
height: 70px;
padding: 10px;
}
footer > p {
font-size: 20px;
line-height: 50px;
}
}
/* 데스크탑: 1024px ~ ( 768px ~ 1024px ) */
@media screen and (min-width: 1024px) {
nav, #contents {
width: 1000px;
margin: 0 auto;
}
#intro > img {
width: 10%;
padding: 10px;
float: left;
margin-right: 20px;
}
#desc{
height: auto;
font-size: 20px;
padding: 10px;
}
footer {
clear: both;
}
}
</style>
</head> <body>
<div id="container">
<header>
<nav>
<ul>
<li>인스타그램</li>
<li>유튜브</li>
<li>페이스북</li>
<li>트위터</li>
</ul>
</nav>
</header>
<div id="contents">
<section id="intro">
<img src="images/instargram.png" alt="인스타그램">
<img src="images/youtube.png" alt="유튜브">
<img src="images/facebook.png" alt="페이스북">
<img src="images/twitter.png" alt="트위터">
</section>
<section id="desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab ad sint quas praesentium reprehenderit nihil, magnam similique quidem aperiam necessitatibus, numquam tenetur suscipit. Maxime nihil, accusamus nisi numquam exercitationem distinctio! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, dolorum voluptates temporibus reprehenderit magnam fugit veritatis ipsam maiores nisi sit? Possimus eaque culpa earum? Fugiat molestias dolorum ipsam ad in? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi maiores ipsum obcaecati at placeat eaque eius voluptates aspernatur quo saepe neque praesentium, exercitationem laboriosam repudiandae aut repellendus non qui veritatis! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas minus ducimus sapiente, distinctio quidem reiciendis unde recusandae eos dolor optio placeat quos impedit molestiae ea libero velit vitae vel corrupti!</p> </section>
</div>
<footer>
<p>copyright 2024 by 김사과</p>
</footer>
</div>
</body>
|
- 폰버전  - 태블릿버전  - PC 버전  |
- 적용예시(2)
|
<head> <style> #container {
width: 100%;
}
header {
width: 100%;
}
header > h1 {
text-align: center;
font-size: 3em;
}
#menus {
width: 100%;
}
#menus > div {
height: 400px;
border: 1px solid black;
margin-bottom: 15px;
position: relative;
}
#menus h2 {
position: absolute;
right: 3%;
bottom: 10px;
font-size: 2em;
color: white;
text-shadow: 3px 3px 5px black;
}
#menu1, #menu2, #menu3, #menu4, #menu5 {
width: 100%;
}
#menu1 {
background: url(/images/dish1.jpg) no-repeat center/cover;
}
#menu2 {
background: url(/images/dish2.jpg) no-repeat center/cover;
}
#menu3 {
background: url(/images/dish3.jpg) no-repeat center/cover;
}
#menu4 {
background: url(/images/dish4.jpg) no-repeat center/cover;
}
#menu5 {
background: url(/images/dish5.jpg) no-repeat center/cover;
}
footer {
width: 100%;
background-color: black;
height: 100px;
}
footer > p {
font-size: white;
color: white;
text-align: center;
line-height: 100px;
}
/* 태블릿: 768px ~ ( 320px ~ 768px )*/
@media screen and (min-width: 768px) {
#menus {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#menu1, #menu2, #menu3, #menu4 {
width: 49%;
}
}
/* 데스크탑 1024px ~ ( 768px ~1024px )*/
@media screen and (min-width : 1024px) {
#menu1, #menu2, #menu3, #menu4 {
width: 32%;
}
#menu5 {
width: 66%;
}
}
</style>
</head> <body>
<header>
<h1>솔로의 식탁</h1>
</header>
<div id="contents">
<section id="menus">
<div id="menu1">
<h2>밥/죽</h2>
</div>
<div id="menu2">
<h2>샐러드</h2>
</div>
<div id="menu3">
<h2>반찬</h2>
</div>
<div id="menu4">
<h2>토스트</h2>
</div>
<div id="menu5">
<h2>음료/칵테일</h2>
</div>
</section>
</div>
</div>
<footer>
<p>솔로의 식탁</p>
</footer>
</body>
|
- 핸드폰 버전  - 태블릿 버전  -PC 버전  |
2. em 과 rem
상대적인 크기를 정하는 단위
- em: 부모 요소 크기의 몇 배인지를 단위로 설정
PC의 일반 텍스트 크기: 16px(브라우저 기본값) = 1em
모바일의 일반 텍스트 크기: 12px(브라우저 기본값) = 1em
| PC의 예) CSS #hello {font-size: 2em;} <!-- 1em=16px --> <!-- 2em=32px --> HTML <div id='hello> <!-- 2em=32px --> <div>안녕하세요</div> <!-- 1em=32px --> </div> |
- rem: 문서의 최상위 요소(html)의 단위가 몇 배인지를 크기로 설정
| PC의 예) CSS html {font-size: 2rem} <!-- 2rem=32px --> HTML <body> <!-- 글자 크기가 모두 2rem=32px로 적용 --> <div id='hello> <div>안녕하세요</div> </div> </body> |
'Web > CSS' 카테고리의 다른 글
| 09. CSS Transform, Transition, Animation (0) | 2024.04.12 |
|---|---|
| 08. CSS 우선순위, Custom Properties (0) | 2024.04.11 |
| 06. flex (0) | 2024.04.09 |
| 05. CSS 디스플레이, 폼, 포지션 (0) | 2024.04.08 |
| 04. 박스모델 (0) | 2024.04.08 |
