[반응형] 가변(반응형) 공식

CSS의 grid와 flex를 사용하면 크게 사용하지 않는 편인 것 같다.

하지만 크로스브라우징을 해야할 수도 있으니까... 알아두는 것도 좋을 것 같다.

(flex와 grid를 사용못할 수 있기 때문에... 거의 그 경우는 없지만 ㅎㅎ, can I use 에서 확인해보면됨! )

근데 주로 사파리, 사파리 mobile, 갤럭시 브라우저에서 말썽이 많이 나는 듯

(아마 내 기억에 사파리 ios14?인가에서 flex gap을 못사용했다. 근데 grid gap은 또 사용가능 ㅎㅎ)

---

🍎 가변 그리드 공식

(박스의 가로 너비) ➗ (박스를 감싸고 있는 부모박스의 너비) ✖️ 100 = 가변크기의 % 값

 

작업 할 때 부모 박스를 잘 사용해야하는 것 같다. (부모 박스를 적재적소에 잘 사용하는 눈은 경력 차인듯...ㅎ)

 

최상위의 박스는 너비값을 주로 잘 지정하는 편이다. (가변그리드를 사용할 수 없기 때문에) 

최상위 박스는 주로 "이 정도 크기로 보였으면 좋겠다"의 기준이 되는 박스이다. (각 홈페이지 특성에 따라 다 다름)

 

부모박스는 주로 wrap, wrapper, container, box 등의 class 이름으로 지정해주는 편인 것 같다. (내 기준!)

📌 wrapper VS container 클래스 네이밍의 차이는? (내 기준)
참고 사이트
container는 하나 이상의 요소를 포함하고 있을 때 (.container > div + div + section)
wrapper는 하나의 요소를 포함하고 있을 때 (.table-wrapper > table)

---

🍎 가변 마진 & 가변 패딩

(박스의 마진/패딩 값) ➗ (박스를 감싸고 있는 부모박스의 너비) ✖️ 100 = 가변마진/패딩의 % 값

📌 마진과 패딩의 차이
마진 : 여백, 간격, 빈 공간, 박스와 박스 사이의 간격, 떨어진 정도
패딩 : 두께, 속, 충전재

박스와 박스를 떨어뜨리고 싶을 땐 마진
박스 내부의 내용과 박스wrapper와의 가독성을 위해 간격을 주고 싶을 땐 패딩

가변마진과 가변 패딩은 브라우저의 비율에 따라 마진 패딩도 줄어듬

고정 마진과 패딩을 위해서는 calc 함수를 사용해야함. CSS 기능이다.

.item {
	width: calc(100% - 100px);
	margin: 50px;
}

---

🍎 가변 폰트

반응형 웹에서 가변폰트가 젤 핵심인 것 같다. 

가변 그리드는 flex와 grid로 대체가능하고, 가변 마진은 calc함수, flex와 grid의 gap으로 거의 대체 가능하다.

패딩은 가변 패딩을 쓰는 경우는 거의 없었던 것 같다.

(가변 폰트를 적용할 글자 크깃값) ➗ (적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트값

rem & em

기본 브라우저의 폰트 사이즈는 16px이다.

em과 rem의 차이는 어디부터 상속을 하는가의 차이다.

rem은 최상위, 즉 html의 font-size를 상속(상속문제가 발생하지 않음)한다.

하지만 em은 바로 나의 위 부모의 font-size를 1em으로 잡는다.

em은 거의 사용 안하는 것 같다.

위에 간단하게 설명을 해봤는데 직접 계산하지 말고 그냥 변환기 쓰자 ㅎㅎ (참고사이트)

 

rem의 경우도 html에 font-size: 62.5% 부여해서 주로 사용한다.

62.5%를 폰트사이즈로 정할 경우 기준이 10px이 된다. 

html {
	/* 16px * 0.625 = 10px */
	font-size: 62.5%;
}

body {
	font-size: 1rem;
}

 

왜 font-size에 간단하게 10px을 적용하지 않는 이유는?

크롬 설정에 모양에서 글꼴 크기를 바꿔봤을 때 확인할 수 있다. 

여기서 확대 /축소가 아니다. 모양에서 수정해봐야지 확인 가능하다!!!

 

하지만 rem을 써보면 글자가 브라우저의 비율에 따라 줄어들거나 늘어나지는 않는 것을 볼 수 있음

브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드려면 CSS3의 새 가변단위인

vw, vh, vmin, vmax를 사용해야한다

 

vw(viewport width) 단위

: 웹 브라우저의 너비를 100 기준으로 하여 크기를 결정하는 단위 (100vw를 많이 사용함)

(vw 단위를 적용할 글자 크깃값 ✖️ 브라우저의 너비값) ➗ 100 = 크깃값

vw를 폰트사이즈로 정할 때는 모바일 반응형에서 주로 사용한다. 

왜냐하면 최근에 갤럭시 폴더 때문에 너비로 최소 320px까지 대응해야하는데 반응형을 320px도 잡고 360px도 잡아서 CSS의 미디어쿼리를 적용할 수 없기 때문이다.

해당 사이트에서 계산을 하면된다.

내가 이미지에 표시한 부분만 값을 넣어서 계산하기 버튼을 클릭하면 가변 vw폰트가 나온다. 

html을 62.5%로 부여하면 기본 폰트 사이즈가 10px이라서 10px을 넣었다.

360px이하 부터 너비 비율에 따라 rem 폰트사이즈도 같이 줄어든다.

@media (min-width: 0px) and (max-width:359px) {
    html {
        font-size:2.7777777778vw
    }
}

 

vh(viewport height) 단위

: 웹 브라우저의 높이를 100을 기준으로 하여 크기를 결정하는 단위 (100vh를 주로 사용함)

100vh를 풀페이지를 만들 때 주로 사용하는데 100vh를 사용해도 스크롤이 생기는 이슈가 있다.

 

height 100vh인데 왜 스크롤이 생기는거지?

모바일 상하단의 주소창도 있고, 각 OS의 Nav바도 있다 그것 때문에 여백이 생겨 스크롤이 생기는 것이다.

그 외 해결방법은 구글링~~!! GO!

 

vmin 단위

: 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기를 결정하는 단위

 

vmax 단위

: 웹 브라우저의 너비와 높이 중 큰 쪽을 기준으로 하여 크기를 결정하는 단위