티스토리 뷰

HTML/Responsive web

HTML: Responsive web design, float 이용하기

carrot62 2020. 7. 25. 19:38

화면 크기가 달라지더라도(pc, tablet와 스마트폰의 화면은 각각 다르므로) 각 화면에 맞게 자동으로 조절해주는 설정을 하는 방법이다. 

Viewport

<head> 태그 안에 다음 <meta>태그를 추가해준다. 이 기능은 스마트폰이나, pc 화면에 알맞게 조절해주는 역할을 한다.

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

 

적용하기 전

 

적용한 후

Responsive image

화면을 조정할 때 이미지가 알아서 크기 조정이 되도록 해주는 설정:

img {
  max-width: 100%; <!--if we use max-width instead of width, 
  the image will never be scaled larger than its original size-->
  height: auto;
}

화면 크기에 따라 다른 이미지가 나타나길 바란다면:

<picture>	<!--image대신 picture를 사용하면 여러 source를 정의할 수 있다-->
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Responsive text size

  • vw : viewport width으로 설정 가능
<h1 style="font-size:10vw">Hello World</h1>

Media queries

브라우저의 화면 크기마다 다른 스타일을 적용할 수 있도록 한다

예제)

800px 넘어가지 이전의 모습
화면이 800px를 넘어간 후의 모습

  • float와 width설정을 이용해서 각 항목이 서로 다닥 붙어있도록 만들어주고
  • @media 를 사용해서 특정 px를 넘어가면 자동으로 조정되도록 한다
    • 화면 크기가 작을 때는 각 항목을 쌓아올린 형태로
    • 화면이 클 때는 옆으로 나열해놓은 형태로
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}

.left {
  background-color:#2196F3;
  padding:20px;
  float:left;
  width:20%; /* The width is 20%, by default */
}

.main {
  background-color:#f1f1f1;
  padding:20px;
  float:left;
  width:60%; /* The width is 60%, by default */
}

.right {
  background-color:#4CAF50;
  padding:20px;
  float:left;
  width:20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .left, .main, .right {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
</head>
<body>
<div class="left">
  <p>Left Menu</p>
</div>

<div class="main">
  <p>Main Content</p>
</div>

<div class="right">
  <p>Right Content</p>
</div>

</body>
</html>

Responsive Web page

연습하기

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
  width:100%;
  color:black;
}
.main {
  float:left;
  width:60%;
  padding: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) {
  /* 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 w3schools.com</div>

</body>
</html>

 

 

float를 사용해서 만든 이런 비슷한 layout 예시를 더 보고 싶다면 HTML Layout 게실물에서 더 확인할 수 있다:

https://carrot62.tistory.com/10

 

HTML Layout: float, flexbox

HTML Layout Elements : like a sidebar HTML Layout Technique 4가지 CSS framework CSS float property float clear CSS flexbox CSS grid float나 flexbox을 사용할 필요 없이 rows와 columns을 가진 grid-bas..

carrot62.tistory.com