읽는 즐거움

[HTML5] 가변 그리드 레이아웃

2021. 6. 30. 22:20

728x90

가변 그리드 레이아웃은 사이트의 모든 요소들을 상대적 크기로 지정해 브라우저의 크기에 따라 탄력적으로 보여주는 방법입니다. 가변 그리드 레이아웃에서는 CSS를 하나만 정의하면 됩니다.

1. 고정 그리드 레이아웃

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<style>
  #wrapper {
    width: 960px;
    margin: 0 auto;
  }
  header {
    width: 960px;
    height: 120px;
    background-color: #066cfa;
    border-bottom: 1px solid black;
  }
  .header-text {
    font-size: 40px;
    color: white;
    text-align: center;
    line-height: 120px;
  }
  .content {
    float: left;
    width: 600px;
    height: 400px;
    padding: 15px;
    background-color: #ffd800;
  }
  .right-side {
    float: right;
    width: 300px;
    height: 400px;
    padding: 15px;
    background-color: #00ff90;
  }
  footer {
    clear:both;
    height: 120px;
    background-color: #c3590a;
  }
</style>
</head>

<body>
  <div id="wrapper">
    <header>
      <h1 class="header-text">Fixed Grid Layout</h1>
    </header>
    <section class="content">
      <h4>본문</h4>
    </section>
    <aside class="right-side">
      <h4>사이드바</h4>
    </aside>
    <footer>
      <h4>푸터</h4>
    </footer>
  </div>
</body>
</html>

2. 가변 그리드 레이아웃 만들기

픽셀(px)을 이용한 레이아웃을 만들어 놓았다면 간단한 계산법으로 만들수 있다.

1) 전체를 감싸는 요소 확인하기

#wrapper의 너비값 960px을 백분율 값으로 변환

#wrapper {

width: 96% (화면의 양옆에 여백을 두기 위해 100%가 아닌 96%로 지정)

margin: 0 auto;

}

2) 각 요소의 너비 값 계산하기

기준이 되는 요소를 찾았다면 그 요소의 너비값으로 각 요소의 값을 계산합니다.

(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100

요소	고정 그리드	가변 그리드
header	960px	100%
.content	600px	62.5%
padding	15px	1.5625%
.right-side	300px	31.25%
padding	15px	1.5625%
footer	960px	100%

728x90

[HTML5] 반응형 웹

2021. 6. 26. 13:28

728x90

1. 모바일 기기를 위한 기본 다지기, 뷰포트

뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.

content 안에서 사용하는 뷰포트 속성은 다음과 같습니다.

속성	설명	사용 가능한 값	기본값
width	뷰포트 너비	device-width 또는 크기	브라우저 기본값
height	뷰포트 높이	device-height 또는 크기	브라우저 기본값
user-scalable	확대/축소 가능여부	yes or no	yes
initial-scalable	초기 확대/축소 값	1-10	1
minimum-scale	최소 확대/축소 값	0-10	0.25
maximum-scale	최대 확대/축소 값	0-10	1.6