티스토리 CSS로 반응형 스킨 만들기

티스토리 CSS로 반응형 스킨 만들기

2017/11/15 - [기초] 티스토리 CSS 수정하기, 스킨 수정

CSS로 간단하게 반응형 스킨을 제작하는 법을 알아보도록 하겠습니다.

기본적으로 반응형 스킨에 대해서 알아야 겠죠? 간단합니다. 데스크탑에서 해당 웹페이지에 접속할 때와 모바일에서 해당 웹페이지에 접속할 때 같은 페이지에서 각 플랫폼에 맞는 디자인을 제공해주는게 반응형 디자인이죠.

그럼 css에서 반응형 페이지를 위해 할게 무엇이냐? 현재 사용자가 사용하는 플랫폼이 데스크탑인지, 아니면 모바일인지 플랫폼만 구분해주면 된다는 말입니다. 그걸 어떻게 구분하느냐? 신기하게도! 브라우저의 너비로 구분합니다!

CSS는 브라우저의 너비를 조건으로 코드를 실행해주는 미디어 쿼리 (media query / @media)가 있습니다. 예제를 보겠습니다.

@media screen and (min-width:600px)
{
	#MyId{
		padding:30px;
	}
}

이렇게 입력하면 브라우저의 너비가 600이상일 때(최소 600일때) MyId라는 속성을가진 element의 스타일을 적용하겠다 라는 말입니다.

물론 height속성도 적용할 수 있습니다. 600이하라는 조건을 적용하려면 min 대신 max를 써줘야합니다. 두 조건사이에 and를 사용하세 조건을 동시에 적용할 수 있습니다.

@media screen and (min-width:600px) and (max-width:1000px) 
{
	#MyId{
		position:fixed;
		padding:30px;
	}
}

이렇게 입력하면 너비가 600이상 1000이하일 때 스타일을 적용한다는 말입니다. 

즉, 두 가지 조건을 모두 만족해야 한다는 뜻입니다.

또 쉼표( , )로도 조건을 동시에 적용할 수 있습니다.

@media screen and (min-width:600px), (min-height:600px) 
{
	#MyId{
		position:fixed;
		padding:30px;
	}
}

이렇게 입력하면 너비가 600을 이상이거나 높이가 600 이상이면 스타일을 적용합니다. 둘중 한가지 조건만 만족하면 스타일을 적용합니다.

그말인 즉슨 쉼표(,)의 의미는 OR과 같다고 보시면 됩니다. 

이제 반응형 스킨에 대해 감이 좀 오시나요? 예제를 한번 보여드리겠습니다.

<div id="MyId">
</div>
<style>
#MyId {
	width:100px;
	height:100px;
}
@media screen and (min-width:1000px)
{
	#MyId{
		background-color: #000000;
	}
}
@media screen and (max-width:1000px)
{
	#MyId{
		background-color: #555555;
	}
}
</style>

이런 코드를 적용해 보도록 하겠습니다.

이제 브라우저의 크기를 늘렸다 줄였다 해보세요. 정확히 1000px을 기준으로 div의 색이 바뀌는것을 확인 할 수 있습니다. 이런 미디어 쿼리의 기능을 기반으로 반응형 스킨을 제작 하는 것입니다. 여기서 조금만 응용해서 diplay등의 속성을 활용해서 충분히 반응형 스킨을 제작할 수 있습니다.

너비가 640이하일때는 모바일의 스타일을 적용한다던지 하면 됩니다. 너무 건성했나요..? 하지만 css를 어느정도 다룰 줄 안다면 미디어 쿼리를 이용해서 반응형 스킨을 제작할 수 있습니다. 지난 포스팅에서 언급했듯이 css자료는 이 포스팅을 포함해 무궁무진하니까요..!! 저도 유용한 자료 많이 포스팅 하도록하겠습니다! 감사합니다.^^