[SeSAC] 웹 풀스택 과정

반응형 이란 동일한 웹 페이지를 상황에 따라 레이아웃을 다르게 보여주는 것입니다.

예로 https://www.kakaomobility.com 웹사이트에서 브라우저의 크기를 변경하거나 모바일로 웹사이트를 볼 때 같은 내용의 레이아웃들이 변경되는 것을 볼 수 있습니다.

1. 뷰포트

뷰포트(viewport)는 현재 화면에 보이고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다.

2. CSS 미디어 쿼리

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다.

2-1. 미디어 쿼리 구문

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

구문 예시 (media-type 을 생략)

@media (max-width: 480px) {
  /* 뷰포트의 width 가 480px 이하일때 */
  .aside {
    display: none;
  }
}

2-2. media-type

all, print, screen, speech 등이 있습니다. 기본값은 all 이며 생략 시 기본값이 적용됩니다.

예를 들어 print 적용 시 페이지 인쇄 시에만 동작합니다.

2-3. media-feature-rule

규칙을 적용할 기능을 작성합니다.

자주 사용하는 기능 규칙은 min-width , max-width , width와 같은 뷰포트의 너비와 관련된 기능 규칙입니다.

2-3-1. Orientation

세로 모드인지 가로 모드인지를 검사할 수 있도록 해주는 기능 규칙입니다.

세로 모드: Portrait(포트레이트) 모드

가로 모드: Landscape(랜드스케이프) 모드

구문 예시 : @media (orientation: landscape) {}

2-3-2. Hover

마우스 커서를 올렸는지 아닌지로 검사합니다. 터치스크린은 적용되지 않습니다.

구문 예시 : @media (hover: hover) {}

2-4. 논리연산 media-feature-rules

논리 곱 (and) :

@media screen and (min-width: 400px) and (orientation: landscape) {
  body {
    color: blue;
  }
}

논리 합 ( , ) :

@media screen and (min-width: 400px), screen and (orientation: landscape) {
  body {
    color: blue;
  }
}

논리 부정 (not) :

@media not all and (orientation: landscape) {
  body {
    color: blue;
  }
}

실습. 브라우저의 너비에 따라 직사각형을 가로 - 세로로 배치하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>실습. 크기에따라 자리바꾸기</title>
    <link rel="stylesheet" href="./prac02.css" />
  </head>

  <body class="body">
    <div class="div">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

#header {
  height: 100px;
  display: flex;
  justify-content: space-around;
  background-color: greenyellow;
  border: 1px solid red;
  align-items: center;
}
#div2 {
  display: flex;
}

.menu {
  margin-right: 10px;
}

@media (max-width: 768px) {
  #header {
    flex-direction: column;
    align-items: center;
  }
  #div2 {
    background-color: greenyellow;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
}

3. 부트스트랩

부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 프레임워크입니다.

- 공개 HTML CSS JS

- CSS 프레임워크

- https://getbootstrap.com

3-1. 부트스트랩 적용방법

- DOC 링크 : https://getbootstrap.kr/docs/5.2/getting-started/introduction/

- 추가로 부트스트랩을 적용한다음에 내가만든 css 코드를 추가로 적용하거나 태그에 클래스를 추가할 수 도 있다. 이때 부트스트랩에서 미리 정의된 클래스사용하지 않고 내가 클래스를 만들어서 사용하고싶을때가 있는데, 이때 이미 부트스트랩에서 그 클래스이름을 사용중인지 확인하는 일이 필요하다. 아니면 이런일을 방지하고자 부트스트랩에서 사용되는 명명규칙 [부트스트랩 에서는 단어-단어]과 다른 명명규칙을 사용하도록 하는것도 좋다.

- 적용 예시 (HTML에 부트스트랩 CDN을 추가해준다.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Components</title>
    <!-- Bootstrap CDN (css) -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
      crossorigin="anonymous"
    />

    <!-- Bootstrap CDN (js) -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
      crossorigin="anonymous"
    ></script>

    <!-- 내가 작성한 css도 참조 -->
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <h1>Components</h1>
  </body>
</html>

4. 부트스트랩의 그리드 시스템

뷰포트 크기에 따라 12열을 적절하게 조정하는 반응형 시스템. 그리드 시스템은 콘텐츠를 보관할 행과 열 시리즈를 통해 페이지 레이아웃들 만드는데 사용됩니다.

* CSS 그리드, 부트스트랩의 그리드시스템은 다르다.

CSS 그리드 - https://developer.mozilla.org/ko/docs/Web/CSS/CSS_grid_layout

부트스트랩 그리드 시스템 - https://getbootstrap.kr/docs/5.0/layout/grid/

4-1. 중단점(Breakpoints)

Breakpoints는 반응형 디자인의 구성 요소입니다.
Breakpoints를 사용하여 레이아웃을 특정 뷰포트 크기 또는 기기에서 조정할 수 있는 시기를 제어합니다.

부트스트랩에 정의된 중단점들은 미디어쿼리의 동작규칙들을 사용해 구현되었습니다.

/* 중단점 sm 과 같은 576px 이상 범위를 미디어쿼리로 표현 */
@media (min-width: 576px) { ... }

/* 중단점 md 과 같은 768px 이상 범위를 미디어쿼리로 표현 */
@media (min-width: 768px) { ... }

...

결과적으로 그리드를 사용해서 정적인 레이아웃도 만들 수 있고, 뷰포트 사이즈에 따른 반응형 레이아웃도 만들 수 있습니다.

4-2. 부트스트랩 그리드 실습

작성방법 : col-중단점-(x of 12)

case) col / col / col > 무조건 셋이한줄인데 넓이를 동등하게 나눠가짐

case) col-3 / col-3 / col-6 > 무조건 셋이 한줄인데 넓이를 설정값에 맞게 나눠가짐 ( 3:3:6)

case) col-sm-1 / col / col >

- 중단점 이후에서 : col-1 / col / col

- 중단점 이전에서 : col-12 / col / col (12를 다차지해서 행바뀜 > 2행)

case) col / col-sm-1 / col >

- 중단점 이후에서 : col / col-1 / col

- 중단점 이전에서 : col / col-12 / col (12를 다차지해서 행바뀜 > 3행)

case) col / col-sm-auto / col >

- 중단점 이후에서 : col / col-auto / col (col-auto 컨텐츠 사이즈에의해 자동조절)

- 중단점 이전에서 : col / col-12 / col (12를 다차지해서 행바뀜 > 3행)

참고. width: 100% 는 .container-fluid 로 구현

Equal-width

container 안에 row로 묶은 col 들을 넣어주면 됌

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

한열의 너비를 다르게 설정

위에 row는 한줄중에 중간 col이 그리드6개를 차지함. 나머지들은 남은 6개의 그리드를 나눠가짐

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

한줄의 넓이가 변하도록 (뷰포트에 따른 반응형)

- col-{breakpoint}-{x of 12}

- col-{breakpoint}-auto

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">  <!-- 중단점이 lg 일때(width lg기준보다크면 > col-2 가 적용), 다를땐 그냥 col이 적용(작을때겠지) -->
      1 of 3
    </div>
    <div class="col-md-auto">  <!-- md < x < lg . x에서 col 자동으로 -->
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div> <!-- md 보다 작아지면 행이 여러개로 나뉘어짐 -->

  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

중단점이 있는 경우이면 중단점 이하에서는 행이 분리됨

<div class="container-fluid text-center">
      <div class="row">
        <div class="col">
          1 of 3
        </div>
        <div class="col-md-auto"> <!-- md 중단점 기준으로 알아서 col이 적용되는데 사이즈는 넓이는 내부 컨텐츠 기준-->
          Variable width content
        </div>
        <div class="col">
          3 of 3
        </div>
      </div>
    </div>

어쨋든 중단점이 하나라도 들어가면 중단점 이하에서 행이바뀐다

이렇게 첫번째 col에 중단점이 들어가면 중단점이하에서 첫번째 div만 줄바꿈이 일어남 (2줄됨)

<div class="container-fluid text-center">
      <div class="row">
        <div class="col-md-auto">
          Variable width content
        </div>
        <div class="col">
          1 of 3
        </div>
        <div class="col">
          3 of 3
        </div>
      </div>
    </div>

중단점 사용해서 수평으로 div를 쌓기

sm 중단점인 576px 이상에서는 col이 적용되고,

그 이하 width 에서는 div가 3줄로 쌓입니다. col-12 라고 생각하면 될듯

  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>

중단점 + 그리드중 몇개를 할당할지 까지 같이 사용

sm 중단점 이후부터는 8:4 로 그리드를 할당한다

  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>

이러면 sm 중단점 이후에도 총량 12가 넘쳐서 두번째 div는 아랫줄에 나옵니다.

첫범째 div에 남은공간은 그냥여백으로 남음

<div class="row">
    <div class="col-sm-10">col-sm-10</div>
    <div class="col-sm-5">col-sm-5</div>
</div>

거터를 사용해서 한 행의 열끼리 사이 여백을 만들 수 있음

gx-5 가 거터 설정입니다. p-3 는 열 하나하나의 크기 키우려고 패딩 설정

<div class="row gx-5">
  <div class="col-9 p-3">
    <div>얍</div>
  </div>
  <div class="col-3 p-3">
    <div>얍</div>
  </div>
</div>

'SeSAC' 카테고리의 다른 글

[SeSAC] 웹 풀스택 과정_JavaScript DOM(2) (0)	2023.08.07
[SeSAC] 웹 풀스택 과정_JQuery (0)	2023.08.04
[SeSAC] 웹 풀스택 과정_JavaScript DOM(1) (0)	2023.07.31
[SeSAC] 웹 풀스택 과정_JavaScript 함수와 메서드 (0)	2023.07.31
[SeSAC] 웹 풀스택 과정_CSS/JavaScript (0)	2023.07.26

tgkim's blog

[SeSAC] 웹 풀스택 과정_CSS/Bootstrap

1. 뷰포트

2. CSS 미디어 쿼리

2-1. 미디어 쿼리 구문

2-2. media-type

2-3. media-feature-rule

2-3-1. Orientation

2-3-2. Hover

2-4. 논리연산 media-feature-rules

실습. 브라우저의 너비에 따라 직사각형을 가로 - 세로로 배치하기

3. 부트스트랩

3-1. 부트스트랩 적용방법

4. 부트스트랩의 그리드 시스템

4-1. 중단점(Breakpoints)

4-2. 부트스트랩 그리드 실습

'SeSAC' 카테고리의 다른 글

티스토리툴바

[SeSAC] 웹 풀스택 과정_CSS/Bootstrap

1. 뷰포트

2. CSS 미디어 쿼리

2-1. 미디어 쿼리 구문

2-2. media-type

2-3. media-feature-rule

2-3-1. Orientation

2-3-2. Hover

2-4. 논리연산 media-feature-rules

실습. 브라우저의 너비에 따라 직사각형을 가로 - 세로로 배치하기

3. 부트스트랩

3-1. 부트스트랩 적용방법

4. 부트스트랩의 그리드 시스템

4-1. 중단점(Breakpoints)

4-2. 부트스트랩 그리드 실습

'SeSAC' 카테고리의 다른 글

관련글

티스토리툴바