꿀팁 저장소

Bootstrap은 css, javascript 프레임워크이다

쉽게 그리드 시스템을 이용해 화면을 통일성 있게 디자인할 수 있으며,

많이 쓰이는 모달, 팝업 등의 액션을 별개의 코드없이 만들 수 있다.

크게 css, js 파트로 나뉘는데

오늘 css 파트에 대해 정리해본다.

1. 그리드 옵션

부트스트랩은 12개의 조각으로 화면을 구성한다.

위와같이 8:4, 4:4:4, 6:4 등

다양한 비율로 컴포넌트를 배치할 수 있다.

위에 보이는 md는 viewport에 따른 브라우저 크기 구분을 의미한다.

아래의 5가지 옵션이 있다. (Breakpoints)

1. col- (< 576px, 모바일)

2. col-sm- (>= 576px, 모바일 + 태블릿)

3. col-md- (>= 768px, 태블릿)

4. col-lg- (>= 992px, 랩탑)

5. col-xl- (>= 1200px, PC)

하나의 컴포넌트에도

sm, md, lg 등의 클래스를 부여함으로써

모바일, 태블릿, pc 등 각각에 알맞는 그리드 스타일 처리를 할 수 있다.

각 컴포넌트를 동일 크기 비율로 설정하고싶으면

클래스 col을 부여하면 된다.

(flex: 1)

보면 볼수록

Bootstrap의 docs는 퀄리티가 미친것같다.

2. Container

화면 디자인을 하다보면

각 컴포넌트들을 감싸기위한

Container들을 수도없이 만들게 된다.

Bootstrap의 컨테이너를 사용하면

통일성 있는 디자인이 가능해진다.

위와같이 클래스에 container를 부여하면

각 화면 비율에 따라 컨테이너 크기를 변경할 수 있다.

(솔직히 숙련된 퍼블리셔가 아니라면 다 외워서하기는 어려움이 있을듯한...)

3. Column

container

- row

-- col

-- col

의 구조로 만들어지는 bootstrap 스타일.

이번에 col에 대해서 살펴본다.

클래스로 row를 주면

display가 flex로 설정된다.

따라서 row와 함께 align속성을 주면

그에 맞게 컴포넌트가 배치된다.

flex 그리드 디자인에 대해 알고있다면

위 내용이 무슨 말인지 이해될것이다.

예시를 살펴보자.

align-items: flex-start

align-items: center

align-items: flex-end

를 준것과 동일하게 디자인 된것을 확인할 수 있다.

(align-items는 한 row에 있는 컴포넌트들의 위아래[Vertical] 높이 배열에 대한 속성이다.)

각기 별도의 css를 주지않아도

통일성있는 디자인을 할수있다니

너무나도 편리한것 같다.

align-items뿐만 아니라

justify-content 옵션도 class를 통해 줄수있다.

위와 같은 엉터리 스타일링을 할일은 없지만

justify-content를 자유롭게 적용할 수 있음을

확인할 수 있다.

(justify-content는 한 row에 있는 컴포넌트들의 좌우[Horizontal] 넓이에 대한 속성이다.)

flex디자인을 하다보면

overflow되지 않은 상황에서도

row를 분리하고싶을때가 있다.

이럴때 원래라면 row를 분리해서 배치해야겠지만

bootstrap에서는

중간에 div에 w-100클래스를 부여하면

row를 분리(줄바꿈)를 해줄 수 있다.

보는것처럼 overflow상황이 아님에도

flex-wrap이 없음에도!!

row가 분리되어 나오는걸 볼 수 있다.

이쯤되면 눈치챘겠지만

bootstrap은 flex 그리드 스타일에 기본을 둔다.

따라서, order옵션도 부여할 수 있다.

order는 컴포넌트의 순서를 바꿀수 있는 옵션이다.

(작은 수가 앞으로 온다.)

그런가하면,

align-items속성이나 justify-content로 배치하는것 외에도

offset을 이용해 좌측 margin을 줄수도있다.

offset도 마찬가지로 12개의 그리드에 기반을 둔다.

위 이미지에서 보는것처럼

offset을 준 컴포넌트에 offset만큼 좌측 margin이 들어간다.

margin에 auto값을 주어

좌측 혹은 우측으로 최대한 떨어뜨리는 방법도 있다.

ms-auto(컴포넌트 기준 좌측 margin),

me-auto(컴포넌트 기준 우측 margin)

(이에 대해서는 하단에서 더 자세히 다룰예정)

화면 비율에 따라 적용하는

ms-md-auto,

me-md-auto 등도 가능하다.

row로 감싸지않고

col을 쓰면 각 col은 한 열에서

그 공간 만큼만 차지한다 (예: width: 25% 등)

4. Spacing

bootstrap을 이용하면

클래스만으로도 쉽게

margin, padding을 부여할 수 있다.

위 이미지에 나와있지만

m으로 시작하면 margin을

p로 시작하면 padding을 주는것이다

m이나 p 다음에 알파벳이 온다면

t, b(top, bottom) : 위/아래

s, e(start, end) : 좌/우

x, y(x axis, y axis) : 좌우 / 위아래

마지막으로 size를 살펴보자

0과 auto는 말그대로의 수치를 의미하지만,

1,2,3,4,5는 기준이 되는 spacer에 따른 수치이다.

(1rem은 html/body에 부여된 font-size를 말함)

즉, 1rem=16px로 설정되어있다면

m-1은 margin: 4px

m-5는 margin: 48px

이 되는것이다.

알아야할 내용은 많지만

알아두면 굉장히 강력한 Bootstrap

이직하는 회사에서 쓰고있는것으로 보여

미리 준비해보았다.

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에 적용되던 속성이 세로로 적용된다고 보면 정확하다.

jQuery를 쓸일이 거의 없지만

퍼블리싱된 파일을 검토하던중 이슈를 발견했다.

* 문제상황

easescroll을 적용한 상태에서

transition 효과가 있는 모달을 닫자마자 스크롤링을 하면

모달이 완전히 사라지기 전에 스크롤이 모달위에서 동작하면서

사용자 입장에서는 스크롤이 동작하지 않는것처럼 보인다.

하지만, 실제로 모달에 scroll 이벤트를 등록해서 모니터링해보면

모달을 닫자마자 스크롤 할 때, 모달에 스크롤 이벤트가 먹으며

모달이 사라지지 않는 버그가 발생한다.

* 해결방법

modal이 열릴때는 transition효과를 주되,

modal이 닫힐때는 transition효과를 제거하고

바로 닫히게 하는것이다.

easescroll이 페이지 전체의 분위기를 차지하는 반면

modal을 거의 쓰이지 않거나 가끔 쓰일것이다.

기능상의 중요성을 따져보면 easescroll이 우선이기 때문에

modal의 닫힘 기능에서 약간의 양보를 하는것이 맞아보인다.

아니면 easescroll을 대신 다른 라이브러리를 찾아보는것도 방법니다.

attribute중에 contenteditable을 사용하면

div를 input, textarea처럼 쓸수있다.

입력창을 커스텀해서쓸때 종종 쓰이곤한다.

방법은 간단하다.

html + css / html + scss 버전 두가지를 살펴보자

1. html + css

<div contenteditable placeholder='메시지를 입력해주세요'></div>

[placeholder]:empty:before {
  display: block;
  content: attr(placeholder);
  color: #a6a6a6;
}

2. html + scss

<div contenteditable placeholder='메시지를 입력해주세요'></div>

&[placeholder]:empty:before {
  display: block;
  content: attrs(placeholder);
  color: #a6a6a6;
}

transtion 효과를 쓰다보면 의도치 않게

주변 컴포넌트가 깜박이게되는 현상을 맞이할때가 있다.

transition을 먹여둔 컴포넌트에 아래의 css 한줄만 추가하면 이 문제를 해결할 수 있다.

-webkit-backface-visibility: hidden;

보통 "반응형", "모바일 사이트" 하면 나오는

키워드 두가지가 있다

Viewport와 Media 쿼리

둘 중 누구도 없어서는 안되면 필수적인 요소다.

media 쿼리는 웹 프론트를 만져본 사람이라면 기본적인 사용법은 익히들 알고있다.

물론 이것도 공부하려면 할것들이 제법 많지만

필요할때 구글링하면서 쓰면 될만한 내용이라

미리부터 공부할 필요는 없을것 같다

그런데 Viewport가 오늘 신선한 충격으로 다가왔다.

<meta name='viewport' content='width=device-width, initial-width=1.0' />

그냥 헤더에 이거 한 줄 넣는것.

이 이상으로 이것이 무슨 의미를 갖는지 정확히 어떤 역할을 하는지 관심갖지 못했었다.

그냥 넣으면 대부분 만사 오케이니까

더이상 건드릴 이유도 공부할 이유도 없었다. (몇가지 옵션 정도는 쓰고있지만..)

그런데 재밌는 부분이 있다.

내 데스크탑 기준의 css를 태블릿에서도 비율에 맞게 유지하려면 어떻게 하면좋을까?

media query로 일일히 퍼센트에 맞게 조정해준다?

물론 이거도 노력하면 비슷한 효과를 볼수있다.

지금 내가 말하려고 하는것은 물리적/논리적 해상도의 차이에 대해서다.

(지금부터, 아래의 내용은 다소 비 전문적이거나 부정확할 수 있습니다.)

물리적은 실제 디바이스의 너비이고

논리적은 제품사양에 명시된 스펙에 나온 해상도라고 생각하면 될것같다...

자, 먼저 Viewport를 제외하고 생각하면 media 쿼리는 물리적 해상도를 기준으로 

컴포넌트/태그 들의 크기를 일정하게 조정해 주는 역할을 한다고 보면 될것같다

그런데, Viewport를 잘 이용하면 특정 값을 기준으로 논리적 해상도를 기준으로 css를 적용할수있다. (내가 오늘 이해한 바로는)

간단히는 이렇게 볼수있다.

<meta name='viewport' content='width=1190' />

이렇게 설정해둔다면

디바이스의 크기에 상관없이 

css의 width: 100%를 1190px로 보게한다.

이미 작성해둔 css들은 걱정하지 않아도, 이를 기준으로해서 알맞게 조정한 크기를 보여주게된다.

viewport는 정말 어마무시한 친구다.

위의 설정을 누가 이용하는지 아는가?

바로, 우리가 매일 보고 사용하고 있는 "네이버"다

네이버를 데스크탑에서 열고 개발자 도구를 보면 viewport가 위와 같이 설정되어있다.

그런데, 화면의 크기를 모바일 사이즈정도로 작게하고

화면을 다시 로드하면 m.naver.com으로 리디렉션하며 

해당 페이지에서 개발자 도구를 보면 viewport는

<meta name='viewport' content='width=device-width, initial-width=1.0' />

과 같은 우리가 흔히 아는 내용으로 작성되어있다.

정말 놀라운 viewport의 세계다.

현재 내가 운영중인 서비스에서는 네이버처럼 m.을 분리하여 운영할 여력은 없어서

javascript를 이용해 디바이스 크기에 따라 로드 시점에 viewport를 다르게 주도록 설정해보았다.