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

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

작성일 20-12-01 19:41

페이지 정보

작성자디벨로드 조회 556회 댓글 0건

본문

요즘은 반응형으로 사이트 제작을 많이 하는데요
반응형 사이트를 제작할 때 아주 애먹는 부분이 있죠.... 바로 사이즈를 어떻게 잡느냐입니다.
보통 가변 사이즈로 설정해야 해서 %나 em, rem으로 사이즈를 지정해 주지만 특정 영역만 고정 사이즈로 해줘야 할 때가 있습니다.
그럴 땐 정말 머리가 지끈.....

무슨 말인지 이해가 안 되시는 분들을 위해 샘플 코드와 이미지로 준비했습니다.

<style> div.test { float:left; border:1px solid #ddd; margin-left:20px; } div.img_area { float:left; width:30%; } div.content_area { float:left; width:70%; height:88px; background:#eee; text-align:center; } #size_400 { width:400px; } #size_300 { width:300px; } img { width:90px; } </style> <div id="size_400" class="test"> <div class="img_area"> <img src="img.png"> </div> <div class="content_area"> <br/>컨텐츠 영역 </div> </div> <div id="size_300" class="test"> <div class="img_area"> <img src="img.png"> </div> <div class="content_area"> <br/>컨텐츠 영역 </div> </div>

이미지 사이즈를 퍼센터(%)로 설정해 사이즈 고정 불가한 예 이미지 사이즈를 퍼센터(%)로 설정해 사이즈 고정 불가

이렇게 왼쪽에 이미지 사이즈를 고정으로 해주고 싶을 때 %로 사이즈를 줬을 때 Width 사이즈에 따라 왼쪽 이미지 영역에 여백이 생겼다 없어졌다 하는 걸 보실 수 있습니다.
그래서 이미지 영역은 px로 고정을 해줘야 하는데 그럼 콘텐츠 영역에 % 사이즈를 주기가 애매해져요~

저는 이러한 경우에 원래 padding을 주고 width를 %로 사용했습니다.
그럼 이미지를 postion:absolute로 띄워야 하고.... 꽤나 복잡한 작업을 합니다.

<style> div.test { float:left; border:1px solid #ddd; margin-left:20px; padding-left:90px; position:relative; box-sizing: border-box } div.img_area { float:left; width:90px; position:absolute; top:0;left:0; } div.content_area { float:left; width:100%; height:88px; background:#eee; text-align:center; } /* 편의상 #size_400, #size_300, img CSS를 생략했습니다. */ </style>

이미지 사이즈를 고정가능하시만 CSS가 복잡한 예 이미지 사이즈를 고정가능하시만 CSS가 복잡한 예

CSS를 위와 같이 변경을 했을 경우 전체 영역의 사이즈가 변경되어도 이미지 영역의 사이즈가 고정되는 것을 보실 수 있습니다.
다만... padding-left 설정하고 position 설정하고 box-sizing은 반드시 border-box로 설정해주고 꽤나 복잡합니다.
CSS의 box-sizing은 설명이 꽤나 길어질 수 있어 다음에 포스팅하겠습니다.^^
아무튼 padding을 줘서 맞춰주면 가능은 하겠지만 코드가 복잡해지는 단점이 있습니다.

자 그럼 CSS의 calc()로 계산해서 해보겠습니다.

div { width : calc(100% - 90px); }

위 코드는 기본적인 사용방법입니다.
이걸 적용해서 다시 해보겠습니다.

<style> div.test { float:left; border:1px solid #ddd; margin-left:20px; } div.img_area { float:left; width:90px; } div.content_area { float:left; width:calc(100% - 90px); height:88px; background:#eee; text-align:center; } /* 편의상 #size_400, #size_300, img CSS를 생략했습니다. */ </style>

이미지 사이즈를 calc()로 설정한 예 이미지 사이즈를 calc()로 설정한 예

결과는 동일하지만 CSS가 5줄 정도 줄어들었습니다.
사실 코딩은 꼭 어떻게 해야 한다는 정답은 없습니다. 결과물만 제대로 나오면 되는 거니까요.
하지만 코드를 짧게 쓰면서 같은 결과를 보여줄 수 있다면 코딩 작업 속도가 줄어들고 웹페이지 문서 사이즈를 줄일 수 있습니다.
padding을 줘서 하는 방식과 calc()로 width를 계산해서 하는 방식 둘 다 연습해보세요.
calc()가 훨씬 편하다는 것을 몸소 느끼실 수 있을 거예요~~


추천0

댓글목록

등록된 댓글이 없습니다.

Road to Deveropment
Road to Deveropment
상단으로