[TIL 4] 다양한 레이아웃의 구성과 기능, 반응형 웹

nini·2025년 3월 7일

CSS JavaScript KB KB it's your life TIL html web

KB IT's Your Life

목록 보기

4/40

다양한 레이아웃의 구성과 기능

수평, 중앙, One True 정렬 레이아웃

수평 정렬 레이아웃(수평 정렬 처리 - flex도 있음)
- 자손에게 float 속성을 지정하고, 부모의 overflow 속성에는 hidden 키워드를 적용
  - clear 속성 : float를 끝낸다
    - overflow hidden 효과를 줌
    - float 속성 적용 제거
    - 수평 정렬하고 싶은 대상 아래에 div 태그를 배치
```
<div class="clear"></div>
```
    - style에 clear 속성을 지정
```
div.clear {
	clear: both;
}
```
- float 떠다닌다~ 방향 지정이 가능
```
margin: 0 3px; -> 단위를 생략하면 적용이 안 된다. 0은 0
```

중앙 정렬 레이아웃

크기 고정, 브라우저 크기에 따라 margin 설정

body {
	margin: 0 auto; -> auto 자동으로 좌우 여백 1/2
	width: 960px;
} -> block을 중앙 정렬 하는 방법
-> content 중앙은? text-align:center

One True 레이아웃
- 1 행 구성하기
- 2 열 구성하기
- 3 레이아웃 구성하기
  - 부모 태그에 고정된 너비 지정
  - 수평 정렬하는 부모 태그의 overflow hidden 적용
  - 자손 태그에 적당한 너비를 입력하고 float 속성 적용
    - margin 겹치는 경우 큰 값으로 처리
```
    #left { margin: 10px; }
    #right { margin: 50px; }
```
```
  두 객체 사이의 간격, 마진은 60px이 아니라 50px
 
```
  - Flex 레이아웃
```
#middle { display: flex; }
#left { width: 150px; background: red; }
#right { width: 350px; background: blue; }
```

요소 배치

절대 위치를 사용한 요소 배치
- 자손의 position 속성에 absolute를 적용하려면 → 부모의 position 속성에 relative를 적용
요소를 중앙에 배치
1. 중앙 정렬하려는 div 태그의 position 속성을 absolute로 지정
2. left 속성과 top 속성을 모두 50%로 지정
3. 중앙에 정렬하려는 div 태그의 margin-left 속성과 margin-top 속성에 음수를 입력
요소를 고정 위치에 배치

position: fixed;

글자 생략

.ellipsis {
	white-space: nowrap; -> 줄바꿈X
	overflow: hidden; -> 영역을 벗어나는 부분 화면에서 제거
	text-overflow: ellipsis; -> 말줄임표 쓰기
}

실습

<!DOCTYPE html>
<html>
  <head>
    <title>floatWithOverflow</title>
    <style>
      div.container {
        overflow: hidden;
      }
      div.item {
        float: left;
        padding: 10px;
        margin: 0 3px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe fugiat
      praesentium adipisci architecto esse soluta at voluptatem, alias quisquam
      ad ab expedita, sapiente aut incidunt voluptatum placeat, autem deleniti
      quibusdam.
    </p>
    <div class="container">
      <div class="item">메뉴-1</div>
      <div class="item">메뉴-2</div>
      <div class="item">메뉴-3</div>
      <div class="item">메뉴-4</div>
    </div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, corporis
      suscipit aliquam nisi assumenda vel amet sunt facilis mollitia officiis
      rem, ipsa, incidunt ducimus laboriosam necessitatibus. Quidem esse
      similique ullam!
    </p>
  </body>
</html>

수평 정렬 레이아웃 overflow: hidden; float: left;

<!DOCTYPE html>
<html>
  <head>
    <title>marginWidth</title>
    <style>
      /* 초기화 */
      * {
        margin: 0;
        padding: 0;
      }
      
      body {
        margin: 0 auto;
        width: 960px;
      }
    </style>
  </head>
  <body>
    <h1>Lorem, ipsum.</h1>
    <h2>Lorem ipsum dolor sit amet.</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos dolorem
      consequatur, qui accusantium consequuntur perspiciatis eos? Ex, autem
      similique? Pariatur, harum inventore? Fugiat repellendus error suscipit
      possimus totam. Distinctio, quae.
    </p>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor deleniti
      sed veritatis suscipit laudantium dolore autem perspiciatis, impedit
      quisquam nulla reiciendis sunt excepturi, recusandae odit perferendis
      ducimus architecto omnis eos!
    </p>
  </body>
</html>

중앙 정렬 레이아웃

* {
	margin: 0;
	padding: 0;
}

- CSS 초기화를 해주는 이유는? 기본적인 여백을 default로 가지고 있음

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>One True 레이아웃</title>
    <style>
      body {
        width: 500px;
        margin: 10px auto;
      }
      #middle {
        overflow: hidden;
      }
      #left {
        float: left;
        width: 150px;
        background: red;
      }
      #right {
        float: right;
        width: 350px;
        background: blue;
      }
      -> 보통 padding까지 width에 포함됨. 
      그래서 * 전체 선택자로 margin을 주면 width가 500px이 넘어가므로 두 번째 줄에 텍스트가 다 나오지 않고 아래로 넘어감(초과)
      #top {
        background: green;
      }
      #bottom {
        background: purple;
      }
    </style>
  </head>
  <body>
    <div id="top">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit dolore
      rerum dolores cumque, earum suscipit atque error blanditiis numquam
      distinctio in aspernatur minus eos doloremque quam aperiam quas voluptates
      aliquam?.
    </div>
    <div id="middle">
      <div id="left">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde.
      </div>
      <div id="right">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque
        molestiae sint voluptatem cupiditate exercitationem totam delectus eos
        sed, quidem maiores distinctio modi minima nemo nisi, vitae eligendi
        ipsam? Suscipit, aspernatur..
      </div>
    </div>
    <div id="bottom">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quidem,
      ipsum voluptatibus sit tempore magnam suscipit perferendis totam sequi,
      fuga dolore, voluptates vel! Ipsa, cum quidem? Praesentium repellat harum
      pariatur!
    </div>
  </body>
</html>

One True 레이아웃

<!DOCTYPE html>
<html>
  <head>
    <title>absolutePosition_align</title>
    <style>
      /* 초기화 */
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: red;
      }
      #container {
        /* 색상 및 크기 적용 */
        width: 500px;
        height: 250px;
        background-color: orange;
        /* 위치 설정 */
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -250px;
        margin-top: -125px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>요소의 중앙 배치</h1>
    </div>
  </body>
</html>

요소를 중앙에 배치하기

<!DOCTYPE html>
<html>
  <head>
    <title>고정위치_변형(bottom bar)</title>
    <style>
      .container {
        /* 스크롤을 끝까지 했을 때 bottom bar에 의해 글씨가 가려지지 않도록 하기 위해 */
        margin-bottom: 50px;
        margin-left: 50px;
      }
      .left_bar {
        background-color: blue;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 50px;
        width: 50px;
      }
      .bottom_bar {
        background-color: red;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="left_bar"></div>
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti id
        provident odio totam quis facere aut harum maxime eum? Debitis,
        voluptate ea dolor beatae modi eaque accusantium iusto illo culpa!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, amet
        delectus aperiam sequi voluptates est accusantium eius quibusdam?
        Dolores saepe numquam aliquam perspiciatis dolorum ad iure maxime ipsa
        in aperiam.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore unde
        quasi, culpa, quisquam aspernatur saepe fugiat totam ut omnis distinctio
        molestias illum laboriosam quia aliquid, ipsum ex nostrum! Nemo,
        voluptate.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos delectus
        rem assumenda tempora, perferendis voluptate provident sunt error
        dolorum maxime doloremque consequatur eveniet, sapiente blanditiis.
        Minima perferendis esse aliquid et끝.
      </p>
    </div>
    <div class="bottom_bar"></div>
  </body>
</html>

고정 위치에 요소 배치(왼쪽, 아래쪽 네모 - 윈도우 크기가 조절되어도 고정된 위치)

반응형 웹

반응형 웹 소개

반응형 웹?
- 웹 페이지 하나로도 다양한 기기에 맞게 디자인이 자동으로 반응해서 변경됨
- 미디어 쿼리(media query)를 사용해 개발

반응형 웹을 위한 설정

meta 태그
- 브라우저에게 웹 페이지의 추가 정보를 제공
뷰포트 태그
- viewport meta 태그: name 속성에 viewport가 입력된 meta 태그
  - user-scalable=no → 줌 기능 X(확대, 축소 안 됨)
    - PC에는 적용X, 모바일 기기에서만 작동
  - initial-scale=1 → 원본으로 가져가라, 크기 조정X
미디어 쿼리 설정
- @-규칙: 스타일시트 내부에서 특정한 규칙을 표현
```
@media(<미디어 쿼리>) {
	<CSS 코드>
}
```
- media 속성: link 태그에 입력해서 해당 미디어 쿼리 조건에 맞는 장치에서만 CSS 파일을 불러옴
```
<link rel="stylesheet" href="<파일 이름>" media="<미디어 쿼리>">
```
media 속성을 사용한 미디어 쿼리 사용하기
- 지원하는 미디어 타입: all, aural, braille, screen 등
- 미디어 타입 연산자: only, not
- 미디어 특징: width, height, device-width, orientation 등

반응형 웹 패턴

메뉴가 왼쪽에 있다가 화면을 좁게 했을 때는 위쪽으로 이동
메뉴가 오른쪽에 있다가 화면을 좁게 했을 때는 아래쪽으로 이동
너비가 넓은 화면(데스크톱) / 너비가 좁은 화면(모바일 장치)
- 왼쪽 / 위쪽
- 오른쪽 / 위쪽
- 왼쪽 / 아래쪽
- 오른쪽 / 아래쪽
HTML 태그 구성은 모바일 장치를 기준으로(모바일 퍼스트)→default
float 태그의 left와 right를 활용해 적당한 위치에 놓아둠

실습

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="user-scalable=no,initial-scale=1,maximum-scale=1"
    />
    <title>Media Feature</title>
    <style>
      /* 스마트폰 */
      @media screen and (max-width: 767px) {
        body {
          background-color: red;
        }
      }
      /* 태블릿PC */
      @media screen and (min-width: 768px) and (max-width: 959px) {
        body {
          background-color: green;
        }
      }
      /* 데스크톱 */
      @media screen and (min-width: 960px) {
        body {
          background-color: blue;
        }
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ea
      dolore beatae expedita vel enim, molestias ipsam atque. Quasi eaque
      consequatur laudantium ea. Placeat deserunt suscipit adipisci libero id
      modi.
    </p>
  </body>
</html>

미디어 특징을 사용해 장치를 구분하는 예
- 스마트폰, 태블릿 PC, 데스크톱 구분

<!DOCTYPE html>
<html>
  <head>
    <title>이미지 크기 조정</title>
    <style>
      .imgDiv {
        border: 1px solid red;
        width: 150px;
        height: 150px;
        overflow: hidden;
        margin: 100px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 상위 div에 맞게 들어가도록 설정 */
      }
      .imgDiv:hover img {
        transform: scale(1.4);
      }
      .imgDiv img {
        transition: all 0.35s linear;
        /* 애니메이션 효과 -> 마우스 오버 시 이미지가 즉시 커지지 않고, 0.35초 시간에 걸쳐 커진다. */
      }
    </style>
  </head>
  <body>
    <div class="imgDiv">
      <img src="cat.jpg" alt="포항항" />
    </div>
  </body>
</html>