ABOUT ME

    -
    • 자바스크립트 - 반응형 웹
      프로그래밍/JavaScript 자바스크립트 2021. 10. 7.
      반응형
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	margin: 30px auto;
	border: 3px dotted #333;
	padding: 10px;
	background: green;
}

/* 브라우저의 너비가 0~600 인 경우 */
@media (max-width:600px) {
	.box {
		display: none;
	}
}
</style>

</head>
<body>

<h3>반응형 웹</h3>

<p>미디어 쿼리 : 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는것</p>

<div class="box"></div>

</body>
</html>

      @media 옵션을 주면 페이지의 너비나 높이가 몇이상 이하 일때의 옵션을 줄 수 있다.

       

      @media (max-width:600px) {
      .box {
      display: none;
      }
      }

       

      최대 너비가 600보다 작아지게 되면 display를 none으로 하겠다는 뜻

       

      그리고 meta 부분에 이걸 추가해야 반응형으로 만들 수 있다.

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
* {
	padding: 0; margin: 0; box-sizing: border-box;
}
body {
	font-size: 14px;
	font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif;
}

.container{
	width: 1200px; margin: 20px auto 10px;
	border: 3px solid black;
}

.header {
	width: 100%; background: #e4f7ba;
	padding: 20px;
	text-align: center;
}

.body-main:after{
	content: ""; clear: both; display: block;
}

.article {
	float: left; width: 75%; height: 500px; background: #eee;
	padding: 15px;
}
.side {
	float: left; width: 25%; height: 500px; background: #faf4c0;
}

.footer {
	width: 100%;
	background: #9575cd;
	padding: 20px;
	text-align: center;
}

/*
  - max-width : 데스크탑의 가장 큰 화면 사이즈의 레이아웃을 기본으로 하고, 점차 축소하는 형태로 css 작성
*/

/* 화면 너비 : 0~1200 */
@media (max-width:1200px) {
	.container { width: 95%; border: 3px solid red; }
}

/* 화면 너비 : 0~768 */
@media (max-width:768px) {
	.container { width: 100%; border: 3px solid green; }
}

/* 화면 너비 : 0~480 */
@media (max-width:480px) {
	.container { width: 100%; border: 3px solid blue; }
	.header { height: 300px; }
	.article { float: none; width: 100%; height: 300px; }
	.side { float: none; width: 100%; height: 300px; }
}

/* 화면 너비 : 0~320 */
@media (max-width:320px) {
	.container { width: 100%; border: 3px solid gray; }
}

</style>

</head>
<body>

<div class="container">
	<div class="header">
		<h1>헤더입니다.</h1>
	</div>
	<div class="body-main">
		<div class="article">
			메인입니다.
		</div>
		<div class="side">
			사이드 입니다.
		</div>
	</div>
	<div class="footer">
		<h3>푸터입니다.</h3>
	</div>
</div>

</body>
</html>

      전부 max-height 옵션을 줘서 각각의 최대치의 너비보다 작아졌을때의 옵션을 준 모습

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
* {
	padding: 0; margin: 0; box-sizing: border-box;
}
body {
	font-size: 14px;
	font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif;
}

.container{
	width: 1200px; margin: 20px auto 10px;
	border: 3px solid black;
}

.header {
	width: 100%; background: #e4f7ba;
	padding: 20px;
	text-align: center;
}

.body-main:after{
	content: ""; clear: both; display: block;
}

.article {
	float: left; width: 75%; height: 500px; background: #eee;
	padding: 15px;
}
.side {
	float: left; width: 25%; height: 500px; background: #faf4c0;
}

.footer {
	width: 100%;
	background: #9575cd;
	padding: 20px;
	text-align: center;
}

/*
  - min-width : 스마트폰 등 가장 작은 시이즈에서의 레이아웃을 기본으로 하고, 점차 확대되어가는 형태의 css
*/

/* 화면 너비 : 320 px 이상 */
@media (min-width:320px) {
	.container { width: 100%; border: 3px solid gray; }
	.header { height: 300px; }
	.article { float: none; width: 100%; height: 300px; }
	.side { float: none; width: 100%; height: 300px; }
}

/* 화면 너비 : 480 px 이상 */
@media (min-width:480px) {
	.container { width: 100%; border: 3px solid blue; }
	.header { height: 100%; }
	.article { float: left; width: 75%; height: 500px; }
	.side { float: left; width: 25%; height: 500px; }
}

/* 화면 너비 : 768 px 이상 */
@media (min-width:768px) {
	.container { width: 100%; border: 3px solid green; }
}

/* 화면 너비 : 1024 px 이상 */
@media (min-width:1024px) {
	.container { width: 100%; border: 3px solid red; }
}
</style>

</head>
<body>

<div class="container">
	<div class="header">
		<h1>헤더입니다.</h1>
	</div>
	<div class="body-main">
		<div class="article">
			메인입니다.
		</div>
		<div class="side">
			사이드 입니다.
		</div>
	</div>
	<div class="footer">
		<h3>푸터입니다.</h3>
	</div>
</div>

</body>
</html>

      max-height와는 반대의 개념인 min-height가 있다.

       

      최소 너비가 ~~ 이상일때 의 의미이다.

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<link rel="stylesheet" href="desktop.css" type="text/css">
<link rel="stylesheet" href="mobile.css" media="(max-width:480px)" type="text/css">


</head>
<body>

<header>
	<h1>반응형 웹</h1>
</header>
<nav>
	<a href="#">홈</a>
	<a href="#">스터디</a>
	<a href="#">공지사항</a>
</nav>
<main>
	<article class="left">
		<h3>메인 화면</h3>
	</article>
	<aside class="right">
		<h3>사이드</h3>
	</aside>
</main>
<footer>
	<h3>footer 영역</h3>
</footer>
</body>
</html>

      그리고 만약에 이렇게 css파일을 이용해서 했을경우

      2개의 css파일이 겹칠 수 있으니까

      하나의 css파일에 옵션으로 media를 줘서 너비의 옵션이 몇일때의 옵션을 주면

      css파일 2개를 받고도 2개다 적용이 가능하다.

       

      반응형 웹.txt
      0.01MB

      반응형
      저작자표시

      '프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

      sweetalert2 - alert창 관련 오픈소스 라이브러리  (0) 2023.11.22
      자바스크립트 - 파일 File  (1) 2021.10.06
      자바스크립트 - DOM  (0) 2021.10.06
      자바스크립트 - 정규식  (0) 2021.10.06
      자바스크립트 - Form 폼 (양식) / 예제  (0) 2021.10.06

      관련글 관련글 더보기

      댓글

    Copyright 2021. qkqajfl007@naver.com. All rights reserved.

    티스토리툴바