반응형 작업 돌아보기 (+ flex)

css를 수년간 써왔지만

처음 공부할때를 제외하고는

실무 사용과 관련해 정리해보지 못했다.

 

너무 일상적으로 사용해

체득되어 "당연하다"라고 생각하고 썼기때문.

 

분명히 이러한 사용법은

훗날 문제를 야기할것이라는 생각이들어

반응형 작업과 Flex에 대해 정리해본다.

 

1. Viewport

반응형의 시작은 Viewport이다.

Viewport는 웹페이지에서 사용자에게 보여지는 영역에 대한 속성을 말한다.

<meta name='viewport' content='width=device-width; initial-scale=1'>

웹개발을 했다면 누구나 봤을 위 코드.

vscode에서 기본 자동 생성 될만큼 핵심적인 meta 속성이라고 볼 수 있다.

 

Viewport의 요소들을 짚어보자

1. width: 브라우저 스크린의 기본 넓이를 말함

2. device-width: 디바이스의 가로 넓이를 말함

3. initial-scale: 페이지 접속시 보여질 화면 배율을 말함

4. maximum-scale: Viewport 최대 배율을 말함

5. minimum-scale: Viewport 최소 배율을 말함

 

2. media query

다음은 media query이다.

media query는 css 반응형 코드를 작성할 때, 기준을 잡는 역할을 한다.

미디어 유형 / 논리 연산자 / 특성
@media (max-width: 768px) & (min-width: 1024px) {
}

@media only screen (max-width: 768px) and (min-width: 1024px) {
}

@media only screen (max-width: 768px) and (min-width: 1024px) and (orientation: landscape) {
}

위와 같은 방식으로 쓸 수 있다.

그런데 보통 가장 위에 형태로 많이 쓰인다.

 

모바일에 작업의 중점을 둘것이냐

데스크탑에 작업의 중점을 둘것이냐에 따라

min-width, max-width 둘 중 하나만 사용하는게 일반적이다.

 

<-- 데스크탑 베이스 -->

// 랩탑 이상 (기본)
.content {
}

// 랩탑
@media (max-width: 1024px) {
  .content {
  }
}

// 태블릿
@meida (max-width: 768px) {
  .content {
  }
}

// 모바일
@media (max-width: 430px) {
  .content {
  }
}

<-- 모바일 베이스 -->

// 태블릿
@media (min-width: 431px) {
  .content {
  }
}

// 랩탑
@media (min-width: 769px) {
  .content {
  }
}

// 랩탑 이상
@media (min-width: 1025px) {
  .content {
  }
}

// 모바일 (기본)
.content {
}

 

차이점을 분명 알수있을것이다.

max-width: 화면 크기가 이것보다 작으면 적용하라

min-width: 화면 크기가 이것보다 크면 적용하라

 

이정도면 실무에 별 문제가 없지만

그래도 각 구성요소에 대해 알아본다.

 

* 미디어 유형

screen: 화면을 대상

all: 모든 디바이스를 대상

print: 인쇄 결과물, 인쇄 미리보기 문서를 대상

 

* 논리 연산자

and: 모든 쿼리가 참이면 적용

not: 모든 쿼리가 거짓이면 적용

,: 어느 한 쿼리라도 참이면 적용 (or)

only: 미디어 쿼리를 지원하는 대상만 적용

 

* 특성 (상태)
width: 너비

height: 높이

aspect-ratio: 가로/세로 비율

orientation: Viewport 방향

 

 

3. flex style

마지막으로,

최근 작업에서는 컴포넌트 배치 관련된 css는

항상 flex로 적용하고 있다. 그 만큼 편리하고 강력하다.

각 속성에 대해서 정확히 짚어놓고 가자.

display: flex;

 

display 속성중 하나인 flex.

flex를 적용하면 해당 태그는 방향에 대한 특성을 갖게 된다.

웹에서 flex의 기본 방향성은 가로축이다.

display: flex;
flex-direction: row; // 가로 배치에 대한 특성을 갖음
flex-direction: column; // 세로 배치에 대한 특성을 갖음

즉, 웹에서 flex의 기본 direction은 row라는 이야기이다.

 

 

그럼, 아래의 문제를 풀어보자.

1,2,3은 어떻게 배치될까?

<div>
  <ul style="display: flex;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

 

맞다

1 2 3

가로로 배치된다.

 

<div>
  <ul style="display: flex; flex-direction: column;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

이렇게 했다면

1
2
3

세로로 배치되었을 것이다.

 

 

여기까지 했으면

flex의 25%정도 이해했다고 보면된다.

지금까지 "방향성"이라는 특성에 대해 공부했다면

이번에는 내부 요소들을 "어떻게" 배치할 것인지에 대해 알아볼 차례이다.

 

내부 요소에 대한 배치 메인 특성으로는 2가지가 있다.

1. justify-content: flex-start / flex-end / center / space-between / space-evenly / space-around

2. align-items: flex-start / flex-end / center / stretch

 

justify-content부터 하나씩 알아보자.

먼저, 가로축 상태에서의 justify-content 참고

<div>
  <ul style="display: flex; justify-content: flex-start;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

* 예상 화면
[123       ]

<div>
  <ul style="display: flex; justify-content: flex-end;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

* 예상 화면
[       123]

<div>
  <ul style="display: flex; justify-content: center;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

* 예상 화면
[   123    ]

<div>
  <ul style="display: flex; justify-content: space-between;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

* 예상 화면
[1    2    3]

<div>
  <ul style="display: flex; justify-content: space-evenly;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

* 예상 화면 - 전체 여백이 균일하게
[  1  2  3  ]

<div>
  <ul style="display: flex; justify-content: space-around;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

* 예상 화면 - 요소간 여백이 균일하게
[ 1   2   3 ]

 

세로축 상태에서의 justify-content는

가로로 적용되던 속성이 세로로 적용된다고 보면 정확하다.

 

가로축 에서의 align-items도 알아보자

<div>
  <ul style="display: flex; justify-content: flex-start;">
    <li>1</li>
    <li style="height: 100px;">2</li>
    <li>3</li>
  </ul>
</div>

* 예상 화면 - 요소간 여백이 균일하게 (실제로는 2가 길게 세로 전체를 덮고 있다고 보면 되겠다)
|123       |
|          |
|          |

<div>
  <ul style="display: flex; justify-content: flex-end;">
    <li>1</li>
    <li style="height: 100px;">2</li>
    <li>3</li>
  </ul>
</div>

* 예상 화면 - 요소간 여백이 균일하게
|          |
|          |
|123       |

<div>
  <ul style="display: flex; justify-content: center;">
    <li>1</li>
    <li style="height: 100px;">2</li>
    <li>3</li>
  </ul>
</div>

* 예상 화면 - 요소간 여백이 균일하게
|          |
|123       |
|          |

 

세로축에서의 align-items는

가로축에서의 align-items에 적용되던 속성이 세로로 적용된다고 보면 정확하다.