기본 속성들
padding(안쪽 여백)
margin(바깥 여백)
width(가로)
height(세로)
float(배치)
clear(float 초기화)
Homepage Layout
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/01_oneTrueLayout_basic.css">
</head>
<body>
<!-- TODO: one true layout == 현대 홈페이지를 만드는 전형적인 구조 -->
<!-- container == 1 page 디자인 -->
<div id="container">
<!-- 줄복사 : ctrl + d -->
<!-- 머리말 시작 -->
<header id="header">
<h1>사이트 제목</h1>
</header>
<!-- 머리말 끝 -->
<!-- 사이드 메뉴 시작-->
<aside id="sidebar">
<h2>사이드바</h2>
</aside>
<!-- 사이드 메뉴 끝-->
<!-- 본문 시작 -->
<section id="contents">
<h2>본문</h2>
</section>
<!-- 본문 끝 -->
<!-- 꼬리말 시작 -->
<footer id="footer">
<h2>꼬리말</h2>
</footer>
<!-- 꼬리말 끝 -->
</div>
</body>
</html>
css
/* 여백 초기화 */
* {
padding: 0;
margin: 0;
}
/* 전체 페이지 크기 정하기 */
#container {
/* 가로 */
width: 1200px;
/* 중앙 정렬 auto (오른쪽/왼쪽 여백을 똑같이 정함(중앙 정렬이 됨))*/
/* 사용법 : margin: 상/하 auto */
margin: 20px auto;
}
/* 머리말 */
#header {
/* 세로 */
height: 120px;
/* 임시 */
background-color: gray;
}
/* 디자인 계산 : 전체(1200px) == 사이드(300px) + 본문(900px) */
/* 사이드바(좌측메뉴) */
#sidebar {
/* 가로 */
width: 300px;
/* 세로 */
height: 600px;
/* 임시 */
background-color: aqua;
/* 좌측 배치 */
float: left;
}
/* 본문(우측) */
#contents {
/* 가로 */
width: 900px;
/* 세로 */
height: 600px;
/* 임시 */
background-color: beige;
/* 우측 배치 */
float: left;
/* float : right해도 결과 같음 */
}
/* 꼬리말 */
#footer {
/* float 영향 제거 */
clear: both;
/* 세로 */
height: 100px;
/* 임시 */
background-color: burlywood;
}
결과
company exam
html
<!-- 02_exam_company.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/02_exam_company.css" />
<!-- TODO: 힌트 -->
<!-- TODO: 전체 페이지(#page) : width: 995px; -->
<!-- TODO: 전체 페이지(header) : width: 995px; height: 70px; -->
<!-- TODO: 전체 페이지(nav) : width: 995px; -->
<!-- TODO: 전체 페이지(footer) : width: 995px; -->
</head>
<body>
<div id="page">
<header>
<div id="logo">
<img src="./img/logo.png" />
</div>
<div id="top">로그인 | 회원가입 | 사이트 맵 | 회사소개</div>
</header>
<div class="clear"></div>
<!-- float 속성 해제 -->
<nav>
<ul>
<li><img src="./img/menu01.png" /></li>
<li><img src="./img/menu02.png" /></li>
<li><img src="./img/menu03.png" /></li>
<li><img src="./img/menu04.png" /></li>
<li><img src="./img/menu05.png" /></li>
<li><img src="./img/menu06.png" /></li>
</ul>
</nav>
<div class="clear"></div>
<!-- float 속성 해제 -->
<section>
<img src="./img/main_img.png"
width="600px" height="200px"
/>
</section>
<aside>
<ul>
<li><img src="./img/banner01.png" /></li>
<li><img src="./img/banner02.png" /></li>
</ul>
</aside>
<div class="clear"></div>
<!-- float 속성 해제 -->
<footer>
<div id="address">
<img src="./img/address.png" />
</div>
<div id="customer">
<img src="./img/customer.png" />
</div>
</footer>
<div class="clear"></div>
<!-- float 속성 해제 -->
</div>
<!-- 아이디 page의 끝 -->
</body>
</html>
css
/* 문제 풀이 */
/* 여백 초기화 */
* {
padding: 0;
margin: 0;
}
/* 목록 점 없애기 */
li {
list-style-type: none;
}
/* 전체 페이지 */
#page {
/* 가로 */
width: 995px;
/* 중앙 정렬 */
margin: 0 auto;
/* 임시 */
/* background-color: beige; */
}
/* 머리말 디자인 */
header {
/* 가로 */
width: 995px;
/* 세로 */
height: 100px;
/* 외곽선 - 아래 */
border-bottom: 1px solid #cccccc;
/* 임시 */
/* background-color: aqua; */
}
/* 로고 디자인 : 왼쪽 배치 */
#logo {
/* 왼쪽 배치 */
float: left;
/* 임시 */
/* background-color: aquamarine; */
}
/* 소메뉴 디자인 : 오른쪽 배치 */
#top {
/* 오른쪽 배치 */
float: right;
/* 바깥여백 - 위쪽 */
margin-top: 30px;
/* 임시 */
/* background-color: blueviolet; */
}
/* 더미 div : float 영향 제거용 */
.clear {
/* float 영향 제거 */
clear: both;
}
/* 대메뉴 크기 */
nav {
/* 가로 */
width: 995px;
/* 세로 */
height: 70px;
/* 바깥여백 - 위쪽 */
margin-top: 10px;
}
/* 대메뉴(이미지들) 세로 -> 가로배치 */
/* inline-block : 가로로 배치하되 크기가 모자라면 줄바꿈이 됨 */
/* 세로 -> 가로배치 : display(inline-block), float:left */
nav li {
/* 가로배치 */
display: inline-block;
/* float:left; */
/* 가로 */
width: 150px;
}
/* 본문 : 좌측 */
section {
/* 왼쪽 배치 */
float: left;
/* 가로 */
width: 600px;
/* 임시 */
/* background-color: aqua; */
}
/* 사이드바 : 우측 */
aside {
/* 우측 배치 == 왼쪽 배치 */
float: right;
/* 가로 */
width: 370px;
/* 임시 */
/* background-color: blueviolet; */
}
/* 꼬리말 */
footer {
/* 가로 */
width: 995px;
/* 세로 */
height: 100px;
/* 바깥여백 - 위쪽 */
margin-top: 20px;
/* 외곽선 - 위쪽 */
border: 1px solid #cccccc;
/* 임시 */
/* background-color: blue; */
}
/* 꼬리말 - 주소 */
#address {
/* 왼쪽 배치 */
float: left;
/* 바깥여백 - 위 */
margin-top: 30px;
/* 바깥여백 - 왼쪽 */
margin-left: 50px;
/* 임시 */
/* background-color: aqua; */
}
/* 꼬리말 - 고객센터 */
#customer {
/* 오른쪽 배치 */
float: right;
/* 바깥여백 - 위 */
margin-top: 20px;
/* 바깥여백 - 오른쪽 */
margin-right: 80px;
/* 임시 */
/* background-color: blueviolet; */
}
Photo academy exam
html
<!-- 03_exam_photo_academy.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/03_exam_photo_academy.css">
<!-- TODO: 힌트 -->
<!-- TODO: 전체 페이지(header) : width: 1140px; height: 100px; -->
<!-- TODO: 큰 로고 이미지(#main_img) background-size: cover; height: 281px; -->
</head>
<body>
<header>
<!-- 로고 시작 -->
<div id="logo">
<img src="img/logo.png" />
</div>
<!-- 로고 끝 -->
<!-- 소메뉴 시작 -->
<nav id="menus">
<!-- 소소메뉴 #1 시작 -->
<div id="top_menu">로그인 | 회원가입 | 공지사항</div>
<!-- 소소메뉴 #1 끝 -->
<!-- 소소메뉴 #2 시작 -->
<ul id="main_menu">
<li>사진이론</li>
<li>사진구도</li>
<li>사진작가</li>
<li>갤러리</li>
<li>커뮤니티</li>
</ul>
<!-- 소소메뉴 #2 끝 -->
</nav>
<!-- 소메뉴 끝 -->
</header>
<!-- 단축키 : 찾기/바꾸기 ctrl + f/r -->
<!-- 이미지 헤더 -->
<section id="main_img">
</section>
<!-- 본문( 소본문 + 사이드바 ) 시작 -->
<section id="contents">
<!-- 사이드바 시작 -->
<nav id="sub_menu">
<h3>사진이론</h3>
<ul>
<li>카메라 동작 원리</li>
<li>무조건 찍어보자!</li>
<li>피사체의 배경</li>
<li>조리개와 심도</li>
<li>카메라 촬영 모드</li>
</ul>
</nav>
<!-- 사이드바 끝 -->
<!-- 소본문 시작 -->
<div id="main_contents">
<h3>카메라 동작 원리 background-position: top center;</h3>
<p>
DSLR 카메라에서 DSLR은 “Digital Single Lens Reflex”의 약어로써
우리말로는 디지털 일안 반사식 카메라을 의미합니다. DSLR은 디지털
카메라로써 카메라 내부에 들어온 빛이 상단의 펜타프리즘을 통하여
뷰파인더에 맺히게 되어 셔터를 누르기 전에 뷰 파인더를 통하여 피사체를
확인할 수 있게 됩니다.
</p>
<div id="figure">
<img src="./img/dslr.png" />
</div>
<p>
[그림 1]은 DSLR 카메라에서 셔터를 누르기 전의 상태를 보여주는데 렌즈를
통해 들어오는 빛은 카메라 내부에서 다음과 같은 과정을 거치게 됩니다.
</p>
<ul>
<li>① 빛이 카메라 렌즈를 통과합니다.</li>
<li>② 빛이 반사 거울에 반사되어 위쪽으로 향합니다.</li>
<li>③ 빛이 펜타프리즘 거울에 반사되어 뷰파인더로 향합니다.</li>
<li>④ 들어온 빛에 의해 뷰파인터들 통하여 피사체를 볼 수 있습니다.</li>
</ul>
</div>
<!-- 소본문 끝 -->
</section>
<!-- 본문( 소본문 + 사이드바 ) 끝 -->
<div class="clear"></div>
<!-- float 속성 해제 -->
<footer>
<!-- 전체 꼬리말 div 시작 -->
<div id="footer_box">
<!-- 꼬리말 로고 시작 -->
<div id="footer_logo">
<img src="img/footer_logo.png" />
</div>
<!-- 꼬리말 로고 끝 -->
<!-- 꼬리말 주소 시작 -->
<ul id="address">
<li>서울시 강남구 삼성동 1234 우:123-1234</li>
<li>TEL:031-123-1234 Email : email@domain.com</li>
<li>COPYRIGHT (C) 루바토 ALL RIGHTS RESERVED</li>
</ul>
<!-- 꼬리말 주소 끝 -->
</div>
<!-- 전체 꼬리말 div 끝 -->
</footer>
</body>
</html>
css
/* 문제 풀이 */
/* 여백 초기화 */
* {
padding: 0;
margin: 0;
}
/* 목록 점 없애기 */
li {
list-style-type: none;
}
/* 폰트 , 글자 크기, 색깔 */
body {
/* 폰트 스타일 */
font-family: Arial, Helvetica, sans-serif;
/* 글자 크기 */
font-size: 14px;
/* 글자색 */
color: #444444;
}
/* 머리말 디자인 */
header {
/* 전체 가로 크기 */
width: 1140px;
/* 세로 */
height: 100px;
/* 중앙 정렬 */
/* 사용법 : margin: 상/하 auto */
margin: 0 auto;
}
/* 머리말 - 로고 (왼쪽) */
#logo {
/* 왼쪽 배치 */
float: left;
/* 바깥여백 : 축약형 */
/* margin: 상 우 하 좌 */
margin: 20px 0 0 20px;
}
/* 머리말 - 소메뉴(오른쪽) */
#menus {
/* 오른쪽 배치 */
float: right;
}
/* 머리말 - 소메뉴 - 소소메뉴#1 */
#top_menu {
/* 글자 오른쪽 정렬 */
text-align: right;
/* 바깥여백 - 위 */
margin-top: 20px;
}
/* 머리말 - 소메뉴 - 소소메뉴#2 */
#main_menu {
/* 바깥여백 - 위 */
margin-top: 20px;
/* 글자 크기 */
font-size: 20px;
/* 글자색 */
color: black;
}
/* 소소메뉴#2 : 세로 -> 가로배치(li) */
#main_menu li {
/* 가로 배치 */
display: inline-block;
/* 바깥여백 - 왼쪽 */
margin-left: 80px;
}
/* 대메뉴 부분 : 큰 로고 이미지 */
#main_img {
/* 세로 */
height: 281px;
/* 배경이미지 넣기 */
background-image: url("../img/main_img.png");
/* 배경이미지 반복 중지 */
background-repeat: no-repeat;
/* 배경이미지 크기 */
/* TODO: background-size: cover(최대한 이미지를 늘려서 화면을 채움, 원본 훼손) */
background-size: cover;
/* 배경이미지 위치 지정 */
/* TODO: background-position: center(배경이미지가 중심에 위치하는 예약 키워드) */
background-position: center;
/* 바깥여백 - 위 */
margin-top: 20px;
}
/* 본문 (소본문(main_contents) + 사이드바(sub_menu)) : 1140px */
#contents {
/* 가로 */
width: 1140px;
/* 중앙 정렬 */
margin: 0 auto;
}
/* 본문 - 사이드바(왼쪽): 234px */
#sub_menu {
/* 왼쪽 배치 */
float: left;
/* 가로 */
width: 234px;
/* 바깥여백 - 위 */
margin-top: 25px;
}
/* 본문 - 사이드바(왼쪽) - li : 밑줄(점선) */
#sub_menu li {
/* 외곽선 - 아래 (점선) */
border-bottom: 1px dotted #cccccc;
/* 안쪽 여백 */
padding: 10px;
}
/* 본문 - 소본문(오른쪽) : 880px */
#main_contents {
/* 오른쪽 배치 */
float: right;
/* 가로 */
width: 880px;
/* 바깥여백 - 위 */
margin-top: 25px;
}
/* 더미 div : float 해제 */
.clear {
/* float 속성 해제 (위에 본문 사용된것) */
clear: both;
}
/* 꼬리말 : 로고(왼쪽) + 주소(오른쪽) */
#footer_box {
/* 가로 */
width: 1140px;
/* 중앙 정렬 */
/* margin: 상/하 auto */
margin: 0 auto;
}
/* 꼬리말 */
footer {
/* 세로 */
height: 150px;
/* 배경색 */
background-color: #2c2a29;
/* 바깥 여백 - 위 */
margin-top: 30px;
}
/* 꼬리말 - 로고(왼쪽) */
#footer_logo {
/* 왼쪽 배치 */
float: left;
/* 바깥여백 - 위 */
margin-top: 50px;
/* 바깥여백 - 왼쪽 */
margin-left: 30px;
}
/* 꼬리말 - 주소(오른쪽) */
#address {
/* 오른쪽 배치 */
float: right;
/* 바깥여백 - 위 */
margin-top: 50px;
/* 바깥여백 - 오른쪽 */
margin-right: 30px;
}
Structure exam
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Dream Jeju</title>
<link rel="stylesheet" href="./css/04_exam_structure_header.css">
<link rel="stylesheet" href="./css/04_exam_structure_body.css">
<!-- TODO: -->
<!-- TODO: .contents {중앙정렬; width 1000px} -->
<!-- TODO: 글과 이미지 배치 : 이미지(float), 글은 float 사용안함 -->
<!-- TODO: .detail p 태그 (단락 글) : float 안씀-->
<!-- TODO: .detail > img (이미지) : float left-->
</head>
<body>
<!-- container == page -->
<div id="container">
<!-- TODO: header 시작 -->
<header>
<div id="logo">
<a href="#">
<h1>Dream Jeju</h1>
</a>
</div>
<nav>
<ul id="topMenu">
<li><a href="#">단체 여행</a></li>
<li><a href="#">맞춤 여행</a></li>
<li><a href="#">갤러리</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</nav>
</header>
<!-- TODO: 본문 끝 -->
<!-- TODO: main(본문, section과 비슷) -->
<main class="contents">
<section id="headling">
<h2>몸과 마음이 치유되는 섬</h2>
<div class="detail">
<img src="img/healing.jpg">
<b>
<p>쉼(Healing)의 공간으로 안내합니다</p>
</b>
<p>탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다. </p>
</div>
<div class="schedule">
<h3>상세 일정</h3>
<ul>
<li>여행 기간 : 2박 3일</li>
<li>여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)</li>
</ul>
</div>
</section>
<section id="activity">
<h2>다양한 액티비티가 기다리는 섬</h2>
<div class="detail">
<img src="img/activity.jpg">
<b>
<p>모험과 스릴이 넘치는 레저의 천국으로 안내합니다.</p>
</b>
<p>둘러보기만 하는 여행을 하셨나요? </p>
<p>하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄
수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?</p>
</div>
</section>
</main>
<footer>
<div id="bottomMenu">
<ul>
<li><a href="#">회사 소개</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">여행약관</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
css
header
/* 구글 웹폰트 import(외부 css 파일 가져오기의 뜻) */
/* 여백 초기화 */
* {
padding: 0;
margin: 0;
}
/* 점 없애기 */
ul {
list-style-type: none;
}
/* a 링크에 밑줄 없애기 */
a {
/* a 태그 밑줄 없애기 */
text-decoration: none;
}
/* 전체 페이지 디자인 */
#container {
/* 가로 */
width: 1200px;
/* 중앙정렬 */
margin: 0 auto;
}
/*************************************/
/* 헤더 영역 - 로고와 네비게이션 */
/*************************************/
header {
/* 가로 */
width: 100%;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: #045;
}
/* 헤더(header) - 로고(#logo, 왼쪽) + 네비게이션(nav, 오른쪽) */
/* 로고(왼쪽) : 가로(250px) */
#logo {
/* 왼쪽 배치 */
float: left;
/* 가로 */
width: 250px;
/* 세로 */
height: 100px;
/* 글자 세로 중앙 정렬 : height 값 == line-height 값 */
line-height: 100px;
/* 안쪽여백 - 왼쪽 */
padding-left: 20px;
}
/* 구글 웹폰트 적용 : Merienda */
#logo h1 {
/* 구글 웹폰트 적용 */
font-family: 'Merienda', cursive;
/* 글자 크기 */
font-size: 40px;
/* 글자색 */
color: white;
/* 글자 굵기 : bold(키워드), 숫자도 가능 900까지 */
font-weight: 600;
}
/* 헤더 - 네비게이션(nav) : 오른쪽배치, 900px */
nav {
/* 오른쪽 배치 */
float: right;
/* 가로 */
width: 900px;
/* 세로 */
height: 100px;
/* 메뉴를 아래로 내리기 위해 안쪽 여백 추가 (위쪽) */
padding-top: 40px;
}
/* ul(#topMenu) > li : 세로 -> 가로배치 */
#topMenu > li {
/* 가로배치 */
display: inline-block;
}
/* #topMenu(ul) > li > a태그 */
#topMenu > li > a {
/* 글자 크기 */
font-size: 1.1em;
/* 글자색 */
color: white;
/* 글자 굵기 : bold(키워드), 숫자도 가능 100 ~ 900까지 */
font-weight: 600;
/* 안쪽 여백 : 축약식 */
/* padding : 상하 좌우 */
padding: 20px 60px;
}
/* 마우스가 위로 올라갔을때 디자인 적용 :hover */
#topMenu > li > a:hover {
/* 글자색 */
color: skyblue;
}
body
/* 본문 영역 */
.contents {
/* 가로 */
width: 1000px;
/* 중앙정렬 */
/* margin: 상하 auto */
margin: 50px auto;
}
/* section 별 위쪽 여백 */
main > section {
/* 바깥여백 - 위 */
margin-top: 60px;
}
/* 본문 - 글 */
.detail p {
/* 글자색 */
color: #222;
/* 바깥여백 - 아래 */
margin-bottom: 30px;
}
/* 본문 - 이미지 */
.detail > img {
/* 좌측 배치 */
float: left;
/* 바깥여백 - 오른쪽 */
margin-right: 50px;
/* 둥근 사각형 : 값이 클수록 원이 됨 */
border-radius: 20px;
}
/* 여백 들 추가 */
/* 본문 - 제목 */
main h2 {
/* 글자 크기 */
font-size: 1.5em;
/* 바깥여백 - 아래 */
margin-bottom: 40px;
}
/* div : 이미지(왼쪽) + 상세설명(글) */
main div {
/* 바깥여백 - 위쪽 */
margin-top: 20px;
}
/* main : 소제목 */
main h3 {
/* 글자 크기 */
font-size: 1.2em;
/* 바깥여백 - 아래 */
margin-bottom: 20px;
}
/* 기타 등등 */
/* main - 상세 일정 */
.schedule h3 {
/* 글자 크기 */
font-size: 1.2em;
}
/* main - 상세일정(li) */
.schedule ul li {
/* 바깥여백 - 아래 */
margin-bottom: 20px;
}
footer
footer {
width: 1200px;
height: 100px;
border-top: 2px solid black;
margin-top: 50px;
}
/* 꼬리말 : li -> 세로 -> 가로 */
#bottomMenu > ul > li {
/* 가로 배치 */
display: inline-block;
/* 안쪽 여백:(축약식) */
/* padding: 상하 좌우 */
padding: 5px 20px;
/* 외곽선 - 오른쪽 */
border-right: 1px solid #ddd;
}
#bottomMenu ul {
margin-top: 15px;
margin-left: 60px;
}
/* 꼬리말 -a태그 */
#bottomMenu ul li a {
font-size: 15px;
color: #666;
}
flex
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/05_flex.css">
</head>
<body>
<div class="container">
<!-- ctrl + d -->
<div class="item">hello</div>
<div class="item">abc</div>
<div class="item">hello</div>
</div>
</body>
</html>
css
/* flex(플렉스) layout : 배치 기능(좌/중앙/우) 가로/세로 모두 가능 */
/* TODO: flex 사용 시 주의점 : 부모 div - 자식 div 형태에서 속성을 부모 div에 줘야함 */
/* 부모 div */
.container {
/* 배경색 */
background-color: beige;
/* 가로 */
width: 1580px;
/* 세로 */
height: 750px;
/* flex 정의 */
display: flex;
/* TODO : 가로 중앙배치 */
justify-content: center;
/* 가로 왼쪽 배치(left == start) */
/* justify-content: flex-start; */
/* 가로 오른쪽 배치(right == end) */
/* justify-content: flex-end; */
/* TODO : 세로 중앙배치 */
align-items: center;
/* 세로 위쪽 배치 */
/* align-items: flex-start; */
/* 세로 아래쪽 배치 */
/* align-items: flex-end; */
}
/* 자식들 box: div */
.item {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: blue;
/* 바깥여백 */
margin: 10px;
}
결과
media
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/06_media.css">
</head>
<body>
<!-- 반응형 웹: 핸드폰, 태블릿, pc 모니터 크기에 따라 변하는 웹 -->
<h1>Lorem ipsum dolor sit amet</h1>
<p>안녕하세요 홍길동입니다.</p>
</body>
</html>
css
/* 반응형 웹 css */
/* 사용법 : @media (max-width: 최대크기) {선택자 { 속성:값;}} */
/* 모니터 최대 크기가 699px 이하일때 빨간색 */
@media (max-width: 699px){
body {
background-color: red;
}
}
/* 사용법 : @media (min-width: 최대크기) {선택자 { 속성:값;}} */
/* 모니터 최소 크기가 900px 이하일때 파란색 */
@media (min-width: 900px){
body {
background-color: blue;
}
}
/* 사용법 : @media (min-width: 최대크기) and (max-width: 최대크기) {선택자 { 속성:값;}} */
/* 모니터 최소 크기가 700px 이상이고 최대크기가 899px 사이일때 녹색*/
@media (min-width: 700px) and (max-width: 899px) {
body {
background-color: green;
}
}
결과
'HTML > Css' 카테고리의 다른 글
[CSS] (0) | 2023.08.16 |
---|---|
[CSS] position (0) | 2023.08.11 |
[CSS]특수 선택자, 가상 선택자 글꼴, 선택자 우선순위, div ,span (0) | 2023.08.09 |
[CSS] box collapse schedule (0) | 2023.08.08 |
[CSS] box, border, padding, margin, width (0) | 2023.08.07 |