RSS 구독
이웃추가
이웃추가
요즘 반응형웹 디자인이 적용된 블로그를 둘러보면, 화면의 가로폭을 조정할 때, 사이드바의 크기는 변하지 않으면서 본문의 너비만 줄어드는 이른바 가변폭 이 설정된 블로그를 많이들 보셨을꺼예요. 저도 최근에 티스토리 반응형 스킨을 직접 만들면서 이부분에서 막히길래 많이 검색을 해보았습니다.
우선 해결방법이 적용되기 전의 문제점부터 살펴보죠.
문제점 1 : width 속성에 %로 폭설정
우선 가변폭 설정을 하지 않고 본문과 사이드바의 너비를 퍼센트(%)로 지정해 놓으면, 본문과 사이드바가 겹치지는 않지만, 웹브라우저의 너비에 따라 사이드바의 폭도 늘었다 줄었다 하죠. 하지만 사이드바의 특성상, 폭이 일정하게 고정되는 것이 우리의 목표입니다. 사이드바에는 일정한 크기를 갖는 모듈들이 들어가기 때문이죠.
문제점 2 : margin-right 설정
검색을 하다보니, 본문에 margin-right 속성을 설정하면 된다고 하더군요.
본문이 왼쪽, 사이드바가 오른쪽에 위치한 레이아웃을 기준으로 사이드바의 크기를 200px로 설정한다고 했을때, 사이드바의 width는 200px로 고정하고, 본문의 width를 100%로 설정합니다. 그리고 본문에 margin-right 속성을 넣고 값을 -200px로 설정해줍니다.
요약하면 아래 코드와 같겠죠.
ex1.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="ex1.css">
</head>
<body>
<div id="content">
<h1>content</h1>
</div>
<!-- content close -->
<div id="sidebar">
<h1>sidebar</h1>
</div>
<!-- sidebar close -->
</body>
</html>
ex1.css
@charset "UTF-8";
#content {
float: left;
width: 100%;
margin-right: -200px;
height:500px;
}
#sidebar {
float: left;
width: 200px;
height: 500px;
border: 1px solid;
}
일단 코드는 간략하게 핵심만 적었구요. 문제점을 보시기 편하게 조금 수정한 부분은 있습니다만, 아무튼 위의 설정대로 하면, 아래 화면과 같이 출력되게 됩니다.
보시는 바와 같이, 사이드바가 우측에 200px의 폭으로 배치되기는 하지만, 본문의 내용들이 sidebar 영역과 겹치고있죠. 물론 margin-right 속성을 이용해서 이 문제를 해결하는 다른 방법들도 있을 수 있습니다. 하지만, 제가 곧이어 설명드릴 CSS3의 calc 함수를 사용하면 너무 쉽게 적용할 수 있어요.
CSS3 - calc 함수 이용
저도 검색해 보기 전까진, CSS3 가 내장함수를 갖고 있는지 몰랐었습니다. calc 는 calculation의 약자로, calc 함수에 입력하는 내용을 계산해서 결과를 반환하는 함수예요.
자~ 적용 예제를 보실까요?
ex2.css
@charset "UTF-8";
#content {
float: left;
width: calc(100% - 200px);
height:500px;
}
#sidebar {
float: left;
width: 200px;
height: 500px;
border: 1px solid;
}
위 코드에서 강조한 4번째 줄 코드 보이시나요? 이렇게 calc를 적용해주면, 100%너비에서 200px만큼을 뺀 값을 width 속성에 반환(return)해줍니다.
그럼 웹페이지는 어떻게 변했을까요?
짜잔~ 완성입니다.
직접 코딩을 해보신 후에, 웹브라우저의 크기를 변경해 가면서, 웹페이지가 어떻게 바뀌는지 확인해보세요. 그럼 사이드바의 폭은 200px로 고정된 상태로 본문폭만 넓어졌다 좁아졌다 할꺼예요. ^^
CSS3 calc() 함수 지원 브라우저 목록
HTML5/CSS3 가 최신브라우저 위주로 지원되고 있는 것 처럼, calc() 함수도 최신 브라우저에서 지원하고 있는데요. 지원 브라우저 목록은 다음과 같습니다.
참고
- calc() 브라우저 지원현황 : http://caniuse.com/#feat=calc
- calc() 사용가능한 HTML 속성들 : http://meiert.com/en/indices/css-properties/
'작은설탕 IT > HTML5&CSS3' 카테고리의 다른 글
| [CSS3] box-shadow -박스 그림자 효과 넣기 (0) | 2016.08.01 |
|---|