본문 바로가기
웹 개발/CSS

[Web_CSS] 07

유리rr 2022. 4. 25. 23:11

● 미디어 쿼리

- 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술

 

@media only all and(조건문){실행문}

(1) @media: 미디어 쿼리가 시작됨을 표시

(2) only: 미디어 쿼리 구문을 해석하라는 명령어(생략 가능)

(3) all: 미디어 쿼리를 해석해야 할 대상을 나타냄(생략 가능)

(4) and: 앞과 뒤의 조건을 나타낸다(생략 가능)

(5) (조건문): 해당 조건을 설정, max-width: 이하, min-width: 이상

(6) {실행문}: 조건에 따라 실행할 스타일 설정

 

 

 

 

실습(position)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thug life</title>
<style>
	div.img {
		position: relative;
		background-image: url("http://gangnam.koreaisacademy.com/renewal2016/img/tch/teacher007.png");
		background-size: 100% 100%; /* background-size: 좌우 상하 */
		background-position: center;
		width: 200px;
		height: 315px;
		margin: 0 auto;
	}
	
	div.sunglasses {
		position: absolute;
		background-image: url("sunglasses.png");
		background-size: 100% 100%; /* background-size: 좌우 상하 */
		background-position: center;
		width: 100px;
		height: 80px;
		margin: 0 auto;
		top: 61px;
		left: 30px;
	}
	
	div.candy {
		position: absolute;
		background-image: url("cigarette.png");
		background-size: 100% 100%; /* background-size: 좌우 상하 */
		background-position: center;
		width: 70px;;
		height: 75px;
		margin: 0 auto;
		top: 125px;
		left: 3px;
	}
	
</style>
</head>
<body>
	<div id="wrap">
		<div class="img">
			<div class="sunglasses"></div>
			<div class="candy"></div>
		</div>
	</div>
</body>
</html>
 

 

 

 

 

실습(publishing_미디어 쿼리 적용)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>스00닷컴</title>
<link href="//db.onlinewebfonts.com/c/05078759185c986d15c17e7ee8deff43?family=DINPro-Bold" rel="stylesheet" type="text/css"/>
<link href="//db.onlinewebfonts.com/c/e0be9bd5e372b2c379893b776e7b2b96?family=DINPro-Light" rel="stylesheet" type="text/css"/>
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-gothic.css" rel="stylesheet">
<style>
	body {
	    background-color: #f3f7fa;
    	color: #303030;
    }
    
    div#wrap-5 {
    	display: table;
    	border-spacing: 7px 7px;
    	margin: 0 auto;
    }
    
    div#wrap-3 {
    	display: none;
    }
    
    @media (max-width: 1250px) {
    	div#wrap-3 {
	    	display: table;
	    	border-spacing: 7px 7px;
	    	margin: 0 auto;
	    }
    
	    div#wrap-5 {
	    	display: none;
	    }
    }
    
    div.row {
    	display: table-row;
    }
    
    div.col {
    	display: table-cell;
    	background: white;
    	width: 230px;
    	height: 294.58;
    	font-family: "DINPro-Light";
    	font-size: 20px;
    	/*margin: 0 3px 6px;*/ /* 위 좌우 아래 */
    }
    
    div.col > p {
    	display: table-caption;
    	font-size: 12px;
    	width: 30px;
    	color: #ff6b00;
    	padding-left: 12px;
    }
    
    div.img-wrap {
    	text-align: center;
    	margin: 0 auto 22px;
    }
    
    div.brand-img-wrap {
    	margin: 0;
    }
    
    img {
    	width: 90px;
    	height: 90px;
    	border-radius: 100%;
    }
    
    div.title {
    	text-align: center;
    	letter-spacing: -1px;
    }
    
    div.title strong {
    	font-family: DINPro-Bold;
    }
    
    div.flex-container {
    	display: flex;
    	justify-content: space-evenly;
    	font-size: 12px;
    	color: gray;
    	margin-top: 24px;
    	font-family: "DINPro-Light";
    }
    
    div.flex-container div {
    	width: 50%;
    	position: relative;
    }
    
    div.flex-container div p {
    	text-align: center;
    }
    
    div.brand-flex-container {
    	border-top: 1px solid #edeff0;
    	margin-top: 40px;
    }
    
    div.flex-container button {
    	flex: 1;
    	background-color: #fff;
    	font-size: 11px;
	    color: #909090;
	    line-height: 40px;
	    text-align: center;
	    border: 0;
	    display: flex;
    }
    
    div.flex-container button img {
    	width: 11px;
    	height: 11px;
    	display: inline-block;
    	margin-left: 7px;
    }
    
    div.flex-container button p {
    	margin: 0;
    	margin-left: 10px;
    	width: 50%;
    	text-align: right;
    }
    
    div.flex-container button div {
    	padding-top: 1px;
    	width: 50%;
    	text-align: left;
    }
    
    div.flex-container a {
    	font-size: 11px;
    	flex: 1;
    	color: #909090;
    	border-right: 1px solid #edeff0;
    	line-height: 40px;
    	text-align: center;
    }
    
    p.number {
    	font-size: 26px;
    	text-align: center;
    	font-family: 'NanumGothicBold';
    	margin-top: 0;
    }
    
    div#shop-title {
    	color: gray;
    }
    
    p#shop-number::after {
    	content: "";
    	width: 1px;
    	height: 64px;
    	background: #edeff0;
    	position: absolute;
    	right: 0;
    	top: 14px;
    }
    
    p#item-number {
    	color: #ff6b00;
    }
    
    div#brand-title {
    	font-family: "Malgun Gothic";
    }
    
    div#brand-title h2 {
	    color: #303030;
	    font-size: 15px;
	    padding: 19px 0 15px;
	    margin: 0;
    }
    
    div#brand-title p {
    	text-align: center;
    	font-size: 13px;
    	color: #909090;
    	margin: 0;
    	padding: 1px 0;
    }
    
</style>
</head>
<body>
	<div id="wrap-5">
		<div class="row">
			<div class="col">
				<div class="img-wrap">
					<img src="https://www.sta1.com/_nuxt/img/icon-myshop@3x.00de977.png">
				</div>
				<div class="title" id="shop-title">
					<span>MY</span>
					<strong>SHOP</strong>
				</div>
				<div class="flex-container">
					<div>
						<p>SHOP</p>
						<p class="number" id="shop-number">0</p>
					</div>
					<div>
						<p>NEW ITEM</p>
						<p class="number" id="item-number">0</p>
					</div>
				</div>
			</div>
			<div class="col">
				<p>1위</p>
				<div class="img-wrap brand-img-wrap">
					<img src="https://image-proxy.sta1.com/_up/brnd/img/2018/01/1516080494643_130*130.jpg">
				</div>
				<div class="title" id="brand-title">
					<h2>나이키</h2>
					<p>10대,20대,30대</p>
					<p>스포츠</p>
				</div>
				<div class="flex-container brand-flex-container">
					<a>전체상품</a>
					<button>
						<p>마이샵</p>
						<div>
							<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5JREFUeNrs1jEKACAMQ9FGvP8ZclNdxbEWUfiZOpUHGVrZjoOMZVZ2SYsHAgIECBAgQHyJ6Ns5rjrr1JGuQ0UV8FmBAAECBAgQ1zMFGABYogYlJB84mgAAAABJRU5ErkJggg==">
						</div>
					</button>
				</div>
			</div>
			<div class="col">
				<p>1위</p>
				<div class="img-wrap brand-img-wrap">
					<img src="https://image-proxy.sta1.com/_up/

 

결과

 

 

 

 

저작자표시 비영리 변경금지

'웹 개발 > CSS' 카테고리의 다른 글

[Web_CSS] 08  (0) 2022.04.26
[Web_CSS] 06  (0) 2022.04.24
[Web_CSS] 05  (0) 2022.04.23
[Web_CSS] 04  (0) 2022.04.22
[Web_CSS] 03  (0) 2022.04.21

'웹 개발/CSS' Related Articles

티스토리툴바