Section 27 - 티스토리 반응형 스킨 만들기 - 반응형 CSS 적용

티스토리 기능에 대한 섹션은 모두 끝났기 때문에 이번 섹션부터는 레이아웃과 유저인터페이스쪽에 집중해서 Tistory One 티스토리 반응형 스킨 만들기를 마무리하도록 하겠습니다.

우리는 티스토리 스킨 관련 파일을 만들고 데스크탑 화면의 레이아웃을 만들고나서 티스토리 기능 및 블로그 기능들을 채워넣어서 지금까지의 결과물을 만들었습니다.
이제 이 결과물을 이용하여 브라우저나 디바이스(모바일, 태블릿 등)의 화면 크기에 따라 자동적으로 변환되는 레이아웃으로 수정하겠습니다.

반응형 웹으로 만들때 제일 많이 수정하기도 하며 간단한 스타일쉬트(style.css)를 위주로 수정하고 도저히 브라우저에서 지원이 불가능할것같은 것들만 javascript로 처리를 합니다만 티스토리 레이아웃은 간단하기에 스타일쉬트만 수정하여 만들어 보도록하겠습니다.

※ 지난 섹션으로 코드 작업을 했다면 아래순서대로 따라하시면 무난히 똑같은 결과물을 볼 수 있습니다.

 

미디어 쿼리 선행 학습(스타일 추가 전 미리 확인!!)

적용할 미디어쿼리 범위

1. 지난 섹션까지 작성했던 style.css의 모든 스타일은 모든 너비의 스타일에 적용했다고 생각하시면 됩니다!!
2. min-width: 576px 은 브라우저 너비가 576px 이상일때 적용되는 스타일을 넣는 곳입니다.
3. min-width: 768px 은 브라우저 너비가 768px 이상일때 적용되는 스타일을 넣는 곳입니다.
4. min-width: 992px 은 브라우저 너비가 992px 이상일때 적용되는 스타일을 넣는 곳입니다.
5. min-width: 1200px 은 브라우저 너비가 1200px 이상일때 적용되는 스타일을 넣는 곳입니다.
6. 위의 이미지를 보시면 아시겠지만 미디어 쿼리가 적용되지 않은 곳의 스타일은 모두다 적용되고 그 아래의 미디어 쿼리 적용 시점부터 해당 브라우저 크기 조건에 따라 스타일이 적용되는걸 확인하실 수 있습니다.
   (미디어 쿼리 브레이크 포인트를 표현하는 막대길이를 보시면 어느정도 이해가 가능하실겁니다. 안된다면...그냥 소스따라하기로 ㄱㄱㄱ)

 

 

 

STEP 1. style.css 전체 레이아웃 스타일 조정

• 기존의 /* layout */ 주석 아래에 있는 스타일을 아래와 같이 변한 후 style.css 파일 제일 아래쪽에 옮깁니다.
• 레이아웃 클래스들의 너비와 플로트 속성, 여백만을 제외한 스타일만 남깁니다.

/* layout */
#container {background:#f3f5f7}
#header {padding:10px; border-bottom:1px solid #ddd; background:#fff;}
#contentWrap {margin:10px auto;}
#contentWrap:after {display:block; clear:both; content:'';}
#content {}
#sidebar {}
#footer {padding:30px 0; border-top:1px solid #ddd; background:#fff;}

 

 

 

STEP 2. style.css 미디어 쿼리 추가

• 미디어 쿼리(stylesheet에서 쓰는 조건분기)를 추가합니다.
• 디바이스 브라우저 크기에 따라 조정하기 위함입니다.
• Responsive Breakpoints는 부트스트랩에서 참고했습니다.(가장 보편적인 브레이크포인트를 사용함)
• style.css 제일 하단부에 추가합니다. 

/* layout */
#container {background:#f3f5f7}
#header {padding:10px; border-bottom:1px solid #ddd; background:#fff;}
#contentWrap {margin:10px auto;}
#contentWrap:after {display:block; clear:both; content:'';}
#content {}
#sidebar {}
#footer {padding:30px 0; border-top:1px solid #ddd; background:#fff;}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width:1200px) {
    /* layout */
    #container {min-width:1200px}
    #contentWrap {width:1200px;}
    #content {width:910px; float:left;}
    #sidebar {width:280px; float:right;}
    #footer {padding:30px 0; border-top:1px solid #ddd; background:#fff;}
    .global-wrap {width:1200px;}
}

 

 

 

DESCRIPTION

1. 기본 레이아웃은 div요소로 레이아웃을 구성했기 때문에 너비는 100%입니다.
   • div는 block요소이기 때문에 너비를 지정하지 않으면 자동적으로 너비가 100%가 됩니다.
2. HTML구조는 header, content, sidebar, footer로 순차적으로 마크업을 했기 때문에 너비가 100%로 잡히면 위에서부터 아래로 블록처럼 쌓이는 레이아웃이 됩니다.
3. media queries는 min-width 위주로 작성을 했습니다.
   • min-width:576px 는 브라우저 너비가 576px 이상일때 적용되는 style입니다.
   • 우리는 가로 너비가 1200px을 기준으로 우측 사이드바 레이아웃을 만들었기 때문에 브라우저 너비가 1200px이상일때 컨텐츠가 좌측으로, 사이드바가 우측으로 정렬되도록 스타일을 작성했습니다.

 

 

 

STEP 3. 반응형 레이아웃 결과 확인

1200px 이하 레이아웃

 

1200px 이상 레이아웃

 

※ 전체적인 레이아웃은 위와 같이 결과가 나왔다면 끝입니다. 간단하죠? 간단하게 작업이 가능했던 이유는 px을 이용한 고정 너비값을 사용안하고 %를 이용한 요소들의 배치를 했기 때문입니다. 나중에 프론트엔드 작업을 많이 해보시면 느끼는 부분이기 때문에 자세한 설명은 패스합니다!!

 

 

 

STEP 4. 반응형 적용을 위한 스타일 수정

글 목록 스타일 수정

.article-list .article-item .thumb {display:block; width:150px; margin:6px auto 5px}

 

• /* Blog list */ 검색 후 위의 .thumb 클래스 스타일을 위와 같이 수정합니다.
• 글 목록에서 썸네일 크기가 가로세로 150px이기 때문에 좁은 화면에서 글 목록 제목이 좁게 나오기 때문에 썸네일 아래에 나오도록 수정합니다.

 

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    .article-list .article-item .thumb {float:left; width:150px; height:150px; margin:6px 30px 5px 0}
}

• 브라우저 너비가 576px 이상일 경우에는 제목과 썸네일이 나란히 나오도록 min-width:576px 미디어 쿼리 안에 썸네일 스타일을 추가합니다.

 

 

댓글 목록 스타일 수정

※ 브라우저 가로너비가 576px 미만일 경우에는 댓글 프로필 아이콘이 안나오도록 수정

.reply-list li .thumb {float:left; width:0; text-align:center; display:none}
.reply-list li .thumb img {border-radius: 50%;}
.reply-list li .reply-content {float:right; width:100%}

• /* Reply list */ 검색 후 .thumb와 .reply-content 클래스 스타일을 위와 수정합니다.
• .thumb 는 display:none으로 숨깁니다.
• .reply-content 는 가로 100%로 변경합니다.

 

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    /* Blog List */
    .article-list .article-item .thumb {float:left; width:150px; height:150px; margin:6px 30px 5px 0}
    /* Reply List */
    .reply-list li .thumb {width:10%; display:block}
    .reply-list li .reply-content {width:90%}
}

• 브라우저 너비가 576px 이상일 경우에는 사용자 아이콘이 노출 되도록 위와 같이 미디어 쿼리 스타일 추가

 

 

방명록 목록 스타일 수정

※ 브라우저 가로너비가 576px 미만일 경우에는 방명록 아이콘이 안나오도록 수정

.guestbook-list li .thumb {float:left; width:0; text-align:center; display:none}
.guestbook-list li .thumb img {border-radius: 50%;}
.guestbook-list li .guestbook-content {float:right; width:100%}

• /* Guestbook list */ 검색 후 .thumb와 .guestbook-content 클래스를 위와 같이 수정
• .thumb 는 display:none으로 숨깁니다.
• .guestbook-content 는 가로 100%로 변경합니다.

 

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    /* Blog List */
    .article-list .article-item .thumb {float:left; width:150px; height:150px; margin:6px 30px 5px 0}
    /* Reply List */
    .reply-list li .thumb {width:10%; display:block}
    .reply-list li .reply-content {width:90%}
    /* Guestbook list */
    .guestbook-list li .thumb {width:10%; display:block}
    .guestbook-list li .guestbook-content {width:90%}
}

• 브라우저 너비가 576px 이상일 경우에는 아이콘 노출이 되도록 미디어 쿼리 스타일 추가

 

 

 

STEP 5. 결과 확인

576px 이하 방명록 및 댓글 목록

 

576px 이상 방명록 및 댓글 목록

 

 

※ 위와같이 반응형 CSS를 추가해도 미흡한 부분이 많지만, 위의 적용예를 활용하여 나머진 각자 본인에 맞는 레이아웃으로 변경하시면 됩니다.
※ 작업 안된부분은 발결할때마다 수정해보겠습니다.

 

다음은 javascript를 활용한 "관리자" 바로가기 노출 컨트롤 섹션입니다.
참고로 다음이 마지막 섹션입니다. ㅡ/.,ㅡㅎㅎㅎ