반응형 스킨 만들기

사는이야기 2017. 7. 9. 20:19
반응형

요즘은 반응형 스킨이 대세다. 왜일까? 티스토리에서는 모바일로 접속했을 때 보여주는 스킨을 따로 제공하고 있다. 하지만 모바일 스킨은 주소가 다르다. https://suhak.tistory.com이 주소라면 모바일은 https://suhak.tistory.command/m으로 주소가 다르다. 같은 글이지만 주소가 둘이라면 검색 엔진에서 노출될 가능성이 그만큼 줄어든다. 때문에 같은 주소로 검색이 되도록 하는 것이 중요하다. 

반응형 스킨이 아니라면 데스크 탑이나 모바일 둘 가운데 어느 하나에 최적화된 모습으로 보여지기 때문에 아무래도 보기 불편할 수도 있다. 처음에는 1단으로 스킨을 만들어서 약점을 보완했는데 한계가 있었다. 이를 극복하기 위해 모바일과 데스크탑에 따라 서로 다르게 보여주는 반응형 스킨을 만들었다. 이글은 공부하면서 알게 된 내용을 정리한 것이다.

먼저 내가 만든 스킨은 아래와 같은 틀을 가지고 있다. 헤더와 풋터를 100%로 보여주기 위해 안에 header_in과 footer_in을 따로 넣었다. content와 sidebar는 각각 section과 aside로 둘러싸고 middle 안에 넣었다. 이제 반응형을 위해서는 section과 aside를 조절해 주어야 한다. 먼저 모바일과 데스크탑 가운데 어떤 것을 기준으로 할 것인가 결정해야 한다. 나는 데스크탑을 기준으로 만들었다.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> 반응형 스킨 만들기::::수학과 사는 이야기 </title>

</head>

<body>

<div id="container">

<s_t3>

<div id="header">

<div class="header_in">

<div id=title>

<h1><a href="https://suhak.tistory.com/">  수학과 사는 이야기</a> </h1>

</div>

</div>

</div><!--header close-->

<div id=middle>

<section>

<div id="content">

<div class="entry">

<div class="article">

반응형

요즘은 반응형 스킨이 대세다. 왜일까? 티스토리에서는 모바일로 접속했을 때 보여주는 스킨을 따로 제공하고 있다. 하지만 모바일 스킨은 주소가 다르다. https://suhak.tistory.com이 주소라면 모바일은 https://suhak.tistory.command/m으로 주소가 다르다. 같은 글이지만 주소가 둘이라면 검색 엔진에서 노출될 가능성이 그만큼 줄어든다. 때문에 같은 주소로 검색이 되도록 하는 것이 중요하다. 

반응형 스킨이 아니라면 데스크 탑이나 모바일 둘 가운데 어느 하나에 최적화된 모습으로 보여지기 때문에 아무래도 보기 불편할 수도 있다. 처음에는 1단으로 스킨을 만들어서 약점을 보완했는데 한계가 있었다. 이를 극복하기 위해 모바일과 데스크탑에 따라 서로 다르게 보여주는 반응형 스킨을 만들었다. 이글은 공부하면서 알게 된 내용을 정리한 것이다.

먼저 내가 만든 스킨은 아래와 같은 틀을 가지고 있다. 헤더와 풋터를 100%로 보여주기 위해 안에 header_in과 footer_in을 따로 넣었다. content와 sidebar는 각각 section과 aside로 둘러싸고 middle 안에 넣었다. 이제 반응형을 위해서는 section과 aside를 조절해 주어야 한다. 먼저 모바일과 데스크탑 가운데 어떤 것을 기준으로 할 것인가 결정해야 한다. 나는 데스크탑을 기준으로 만들었다.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> 반응형 스킨 만들기::::수학과 사는 이야기 </title>

</head>

<body>

<div id="container">

<s_t3>

<div id="header">

<div class="header_in">

<div id=title>

<h1><a href="https://suhak.tistory.com/">  수학과 사는 이야기</a> </h1>

</div>

</div>

</div><!--header close-->

<div id=middle>

<section>

<div id="content">

<div class="entry">

<div class="article"> </div>

</div></hr>

</div>

</section>

<aside>

<div id="sidebar">

</div><!--sidebar close-->

</aside>

</div><!--middle close-->

<div id="footer">

<div class="footer_in">

</div>

</div><!-- footer close -->

</div><!-- container close -->

</s_t3>

</body>

</html>

CSS는 아래와 같이 구성하였다. 

/* ----------------------------------------------------- */

/* 블로그 레이아웃 */

/* ----------------------------------------------------- */

.top {

position: fixed;

width: 43px;

height: 200px;

top: 350px;

right: 50%;

margin-right: -600px;

}


.top a:hover img:hover{

opacity:1.0;

filter:alpha(opacity=100); /* For IE8 and earlier */

}

.top a img{

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

}

#container {

background:#fff;

margin : 0px auto;

width : 100%;

}

#header{

width : 100%;

background:#fafafa;

border-bottom:1px solid #ddd;

}

.header_in{

padding:40px 0px;

margin : 0px auto;

width : 1010px;

}

#middle{

margin : 0px auto;

padding: 30px 0px;

width : 1010px;

}


#footer{

margin-top:30px;

border-top:1px solid #ccc;

padding:40px 0px;

clear : both;

width:100%;

background:#333;

}

.footer_in{

text-align:right;

font-weight:bold;

margin : 5px auto;

width : 1010px;

color : #fff;

font : 1.0em Daum, malgon gothic, verdana;

}

section{float:right;

width:748px;

border-top:0px solid #999;

padding: 0px;

overflow : hidden;

margin-bottom:40px;

}


aside{

float:left;

width:180px;

text-align : left;

padding: 0px;

margin-bottom:40px;

}


/* ------------------------------------------------ */

/* 반응형 */

/* ------------------------------------------------ */

@media all and (max-width: 1050px) {

#middle{

width:800px;

margin:20px auto;

}

.header_in {

width:95%;

padding:20px;

 }

section {

    width: 100%;

margin:0px auto;

 }

#content {

    width: 95%;

    padding: 0;

  }

aside {

    width: 95%;

    padding: 0 20px;

    padding-bottom: 0;

    background-color: #fff;

    /* 색상 */

}

#sidebar {

    width: 100%;

background:#fff;

text-align:center;

    margin: 0;

padding: 0;

}


.footer_in{

  width:95%;

}

}


반응형 부분을 잘 이해하면 쉽게 반응형 스킨을 만들 수 있다.  @media all and (max-width: 1050px) {  } 최대 너비가 1050px가 되지 않는다면 { }에 있는 모양으로 보여준다. 모바일에서는 sidebar를 본문 아래에 가운데 정렬로 보여주도록 만든 것이다.  모바일 우선으로 구성하려면 max 대신에 min을 쓰면 된다.

반응형
</div>

</div></hr>

</div>

</section>

<aside>

<div id="sidebar">

</div><!--sidebar close-->

</aside>

</div><!--middle close-->

<div id="footer">

<div class="footer_in">

</div>

</div><!-- footer close -->

</div><!-- container close -->

</s_t3>

</body>

</html>

CSS는 아래와 같이 구성하였다. 

/* ----------------------------------------------------- */

/* 블로그 레이아웃 */

/* ----------------------------------------------------- */

.top {

position: fixed;

width: 43px;

height: 200px;

top: 350px;

right: 50%;

margin-right: -600px;

}


.top a:hover img:hover{

opacity:1.0;

filter:alpha(opacity=100); /* For IE8 and earlier */

}

.top a img{

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

}

#container {

background:#fff;

margin : 0px auto;

width : 100%;

}

#header{

width : 100%;

background:#fafafa;

border-bottom:1px solid #ddd;

}

.header_in{

padding:40px 0px;

margin : 0px auto;

width : 1010px;

}

#middle{

margin : 0px auto;

padding: 30px 0px;

width : 1010px;

}


#footer{

margin-top:30px;

border-top:1px solid #ccc;

padding:40px 0px;

clear : both;

width:100%;

background:#333;

}

.footer_in{

text-align:right;

font-weight:bold;

margin : 5px auto;

width : 1010px;

color : #fff;

font : 1.0em Daum, malgon gothic, verdana;

}

section{float:right;

width:748px;

border-top:0px solid #999;

padding: 0px;

overflow : hidden;

margin-bottom:40px;

}


aside{

float:left;

width:180px;

text-align : left;

padding: 0px;

margin-bottom:40px;

}


/* ------------------------------------------------ */

/* 반응형 */

/* ------------------------------------------------ */

@media all and (max-width: 1050px) {

#middle{

width:800px;

margin:20px auto;

}

.header_in {

width:95%;

padding:20px;

 }

section {

    width: 100%;

margin:0px auto;

 }

#content {

    width: 95%;

    padding: 0;

  }

aside {

    width: 95%;

    padding: 0 20px;

    padding-bottom: 0;

    background-color: #fff;

    /* 색상 */

}

#sidebar {

    width: 100%;

background:#fff;

text-align:center;

    margin: 0;

padding: 0;

}


.footer_in{

  width:95%;

}

}


반응형 부분을 잘 이해하면 쉽게 반응형 스킨을 만들 수 있다.  @media all and (max-width: 1050px) {  } 최대 너비가 1050px가 되지 않는다면 { }에 있는 모양으로 보여준다. 모바일에서는 sidebar를 본문 아래에 가운데 정렬로 보여주도록 만든 것이다.  모바일 우선으로 구성하려면 max 대신에 min을 쓰면 된다.

반응형
저작자표시 비영리 변경금지

꼬리표

'사는이야기' 더보기

티스토리툴바