p의 부모 body에 아무 조건이 없음 -> 기본값임 16px적용됨
content가 24px로 지정되어있어서 아래 p는 24px이 적용됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
.content {
font-size: 1.5em;
}
p {
font-size: 1em;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<div class="content">
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</div>
</body>
</html>
상속과 em/rem중엔 후자가 더 우선
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
html {
font-size: 16px;
}
.content {
font-size: 1.5rem;
}
p {
font-size: 1rem;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<div class="content">
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</div>
</body>
</html>실무에선 img태그 자체에 적용하기도 함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 이미지 만들기</title>
<style>
p {
font-size: 1.5rem;
}
.top {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div>
<p>브라우저 창의 크기를 조절해보세요.</p>
<img src="images/kitten.jpg" alt="베개 뒤에 숨어 있는 고양이" class="top">
</div>
</body>기본값을 정하고 해야함
pc 테블릿 모바일 순서 혹은 모바일 테블릿 pc 순서
(pc 디폴트 이후 미디어쿼리로 모바일 or 모바일 디폴트 이후 미디어쿼리로 pc)
요즘은 거의 다 모바일 기본으로 함
사용자의 상황에 따라 기본값도 다르게 정해야함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어 쿼리 사용하기</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
font-size: 4rem;
}
/* Do it! 미디어 쿼리 사용 */
body {
background: url(images/bg-light.jpg) no-repeat fixed;
background-size: cover;
}
/* 768px ~ 1023px 이면 images/bg-dark.jpg 사용 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
body {
background: url(images/bg-dark.jpg) no-repeat fixed;
background-size: cover;
color: #fff;
}
}
/* 768px 미만이면 images/bg-small.jpg 사용 */
@media screen and (max-width: 767px) {
body {
background: url(images/bg-small.jpg) no-repeat fixed;
background-size: cover;
color: #fff;
}
}
</style>
</head>
<body>
<h1>미디어 쿼리</h1>
</body>
</html>
'코딩 > CSS 실습' 카테고리의 다른 글
| [코드 연습장]CSS: 다양한 고급 선택자를 활용한 폼(Form)과 리스트 디자인 (0) | 2026.03.25 |
|---|---|
| [코드 연습장] CSS: Flexbox 기초 정렬 실습 및 반응형 프로필 카드 만들기 (0) | 2026.03.23 |
| [코드 연습장] CSS 배경 꾸미기 (background-size, linear-gradient 등) (0) | 2026.03.20 |
| [코드 연습장] margin, padding, left-top등 박스 모델과 레이아웃 제어 (0) | 2026.03.19 |
| [코드 연습장] CSS 박스 만들기 (border, border-radius 활용) (1) | 2026.03.18 |