Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

사이즈 계산 2

CSS의 Width사이즈 계산 방식을 달리 해보자~ | box-sizing

퍼블리싱하실 때 Div 나 li 등의 태그 사이즈 지정해 줄 때 어떻게 하시나요? 저는 box-sizing을 알기 전에는 상당히 복잡하게 했던거 같아요 디자이너가 넘겨준 전체 사이즈에서 border 사이즈 빼고 padding 넣어줄 사이즈 빼고 남은 사이즈를 width로 넣어줬는데요. 다들 그렇게 하셨나요? 물론 디자인 파일을 받아서 작업을 하다 보니 그렇게 계산해서 작업을 한 거고 content-box 방식의 나름 장점도 있겠죠^^ width영역의 사이즈를 고정해서 주고 싶다거나 할때 말이죠 자 여기서 잠깐!! 중간 중간 box-sizing, content-box 이런 말들이 나왔는데 이게 뭐죠? 이게 바로 오늘 알아볼 CSS의 box-sizing이고요~ content-box는 box-sizing의 속..

Web/CSS 2021.09.17

반응형 사이트 사이즈 계산에는 CSS의 calc()가 최고죠!!

요즘은 반응형으로 사이트 제작을 많이 하는데요 반응형 사이트를 제작할 때 아주 애먹는 부분이 있죠.... 바로 사이즈를 어떻게 잡느냐입니다. 보통 가변 사이즈로 설정해야 해서 % 나 em, rem으로 사이즈를 지정해 주지만 특정 영역만 고정 사이즈로 해줘야 할 때가 있습니다. 그럴 땐 정말 머리가 지끈..... 무슨 말인지 이해가 안 되시는 분들을 위해 샘플 코드와 이미지로 준비했습니다. 컨텐츠 영역 컨텐츠 영역 이렇게 왼쪽에 이미지 사이즈를 고정으로 해주고 싶을 때 %로 사이즈를 줬을 때 Width 사이즈에 따라 왼쪽 이미지 영역에 여백이 생겼다 없어졌다 하는 걸 보실 수 있습니다. 그래서 이미지 영역은 px로 고정을 해줘야 하는데 그럼 콘텐츠 영역에 % 사이즈를 주기가 애매해져요~ 저는 이러한 경우에..

Web/CSS 2021.08.24