다연이네

[days03] 반응형 웹 본문

Web/HTML

[days03] 반응형 웹

　다연　 2020. 12. 2. 21:36
반응형

1. 반응형 웹 ? 모든 장치에서 잘(올바르게) 보이도록 만들어진 웹사이트
2. 반응형 웹 디자인 ? html, css를 사용하여 웹사이트의 크기를 자동으로 조정, 축소 또는 확대하여 모든 장치에서 보기 좋게 만드는 것
3. 뷰포트 설정
<meta name="viewport" content="width=device-width, initial-scale=1"> => 공식처럼 있어야 함
4. 반응형 이미지
너비(width) 속성 사용 : 100% 백분율 / 자동으로 너비에 맞춰 높이도 조정된다
5. 반응형 텍스트
6. 미디어 쿼리
1) 이미지
2) 텍스트
위의 1)2)를 제외한 애들은 일반적으로 미디어 쿼리를 사용해서 처리한다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<img alt="" src="./../days02/images/img_girl.jpg" style="max-width: 100%"> 
<!-- max-width 속성 : 100% 이미지의 원래 크기보다는 확대하지 않겠다, 축소는 상관 없음  -->
<hr>
<img alt="" src="./../days02/images/img_girl.jpg" style="width: 100%">  <!--height는 안줬지만 auto로 잡혀있음  -->
<!-- 현재 폴더에서 한단계 내려가(../) days02로 들어가 ... -->
<!-- 사용하는 장치 크기의 100프로로 지가 알아서 맞춤  -->



<hr>
<h1 style="font-size:10vw">Hello World</h1>
<!-- vw == viewport width(뷰포트 너비)		 1%가 1vw  -->
<!-- 예를들어 뷰포트 너비가 50cm라면 1vw라면 0.5cm  -->
</body>
</html>

vw : 뷰포트 너비로 1%가 1vw인 것 기억

 

 

 

화면 크기에 맞춰 박스의 위치가 변한다.

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
 *{
 	box-sizing: border-box;
 }
 
 .left{
 	background-color: red;
 	padding: 20px;
 	width: 20%;
 	float: left;
 }
 .main{
  	background-color: green;
 	padding: 20px;
 	width: 60%;
 	float: left;
 }
 .right{
  	background-color: blue;
 	padding: 20px;
 	width: 20%;
 	float: left;
 }
</style>

<style>
/* 미디어 쿼리 */
@media screen and (max-width:800px){ /* screen : 화면에 보여질땜나 반응을 해라 */
	.left, .main, .right{
		width: 100%; /* 800전까지는 모두 100으로 맞추고 800보다 커지면 20%60%20%로 맞춰진다 */
	}
}
</style>

</head>
<body>
<h3>Media Queries</h3>

<!-- div[class=""]*3>p -->
<div class="left">
	<p>Left Menu</p>
</div>
<div class="main">
	<p>Main content</p>
</div>
<div class="right">
	<p>Right Menu</p>
</div>
<!-- p*50>{.} -->
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</body>
</html>

 

화면의 크기가 620보다 작으면 각자 100%가 되어 아래로 주루룩 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
* {
  box-sizing: border-box;
}

.menu {
  float:left;
  width:20%;
  text-align:center;
}

.menu a {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px; /*위쪽여백  */
  display:block; /*a태그는기본적으로 인라인 모드라 width를 못줘서 block모드로 바꿔서 width줌  */
  width:100%;
  color:black;
}

.main {
  float:left;
  width:60%;
  padding:0 20px; /* 아래위로는 0 양쪽으로는 20px 준다는 의미  */
}

.right {
  background-color:#e5e5e5;
  float:left;
  width:20%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}

@media only screen and (max-width:620px) { /* only: 없어도 됨, 오직 화면에 보여질때만  */
	/*  인쇄해보면 줄어들지 않고 제대로 나옴 */
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
}
</style>

</head>

<body style="font-family:Verdana;color:#aaaaaa;">

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div style="overflow:auto"> 
  <div class="menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>

  <div class="main">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="right">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">
© copyright
</div>
</body>
</html>
반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days03] html 양식(form) - 사용자 입력값을 수집 -> 서버로 전송하는데 사용  (0) 2020.12.02
[days03] html 코딩 규칙(가이드)  (0) 2020.12.02
[days03] html의 head의 자식 요소  (0) 2020.12.02
[days03] iframe  (0) 2020.12.02
[days03] 토글 버튼  (0) 2020.12.02
'Web/HTML' Related Articles more
Comments