Section 4 - 반응형 티스토리 스킨 만들기 - 레이아웃

작업 할 준비는 Section 3 - 반응형  티스토리 스킨 만들기 - 파일 준비에서 어느 정도 끝냈다.

이제는 내 블로그의 레이아웃을 먼저 잡도록 하겠습니다.

프론트엔드 개발 방법은 Desktop First Mobile First 방식으로 작업하겠습니다.

Mobile First는 초기 접속 시 CSS가 모바일 화면을 기본으로 보여주고 그 이상의 해상도를 사용하는 디바이스면 CSS media query가 동작하는 방식이다.
Desktop First는 반대로 초기 접속 시 큰 화면 -> 작은 화면으로 동작하는 방식이다.

Front-end 개발 시 예전에는 Mobile First 를 권장하였지만 (지금도 마찬가지 일 수도 있다.)
허나 IE6/7/8 에서는 오히려 media query 동작이 느려 구형 PC에서 하는 사람들이 반대로 버벅임을 경험하는 현상이 발생 되었다.
모바일에서는 오히려 최신버전의 브라우저와(물론 IE 브라우저 사용은 더더욱 없다.) IE6/7/8을 사용하는 오래 된 PC보다 사양도 좋기에 Desktop First로 작업하여 모바일에서는 스타일을 reset 시키거나 불필요한 요소는 숨기는 방향으로 작업하겠습니다.
※ 물론 작업의 편의성 때문에 그런 면도 없지 않다....궤변으로 볼 수도 있겠다..
※ 만들다보니 Mobile First로 작업하게 되었네요..(2017년 11월 21일)

 

Section 3 - 티스토리 반응형 스킨 만들기 - 파일 준비 편까지 잘 따라 했다면 생성된 파일 및 화면은 아래와 같을 것입니다.
( 혹 html과 css를 잘 모르시는 분들을 위해서 손수 포샵으로 그려드렸습니다 ㅎㅎㅎ ㅡ/,.ㅡ )

 

티스토리 반응형 스킨 만들기 - 변경 전 레이아웃

 

스타일쉬트(이하 CSS) 작업을 아직 하지 않았기에 container라는 ID가 header / content / sidebar / footer 의 div을 감싸고 그 안에서는 층층이 쌓이는 모습을 가지고 있는 상태입니다.

※ 잠깐!! HTML에서 id와 class란?
HTML 요소는 id와 class라는 이름을 지어 줄 수 있는데, 이 이름은 CSS에서 선택자 지정으로 사용하게 됩니다.
ID는 #, CLASS는 . 으로 CSS에서 사용합니다.
나중에 jquery selector 에서도 사용하기 때문에 꼭 알아 두셔야 하는 기본중에 기본입니다.
물론 CSS에서 더 필수 입니다.

 

이 상태에서 아래와 같은 레이아웃으로 바꾸는 작업을 이번 섹션에서 진행합니다.

티스토리 반응형 스킨 만들기 - 변경 할 레이아웃

 

STEP 1 - skin.html 수정

요즘 모니터가 fullHD 해상도를 지원하는게 많아지고 있어서 가로를 100%로 구성하면 content와 sidebar가 너무 멀어져서 가운데로 모으기 위하여 기존 skin.html에 #contentWrap 을 하나 추가합니다.( line 25, 60 )

01. 블로그 제목

02. 블로그 메뉴

11. 검색 결과 리스트

12. 검색 결과 댓글 리스트

13. 위치 로그

14. 태그 클라우드

15. 방명록

15-1. 방명록 글쓰기

15-2. 방명록 리스트

16. 공지사항 글

17. 보호 글

18. 글

18-1. 글 제목 | 카테고리 | 작성일 | 글 관리

18-2. 글

18-3. 글 관련 태그

18-4. 트랙백 | 댓글

18-5. 트랙백

18-6. 댓글

18-6-1. 댓글 리스트

18-6-2. 댓글 쓰기

19. 페이지

#sidebar

#footer

 

STEP 2 - style.css 수정

HTML을 구상했던 레이아웃 구조로 변경하기 위하여 아래와 같이 추가한다.

@charset "UTF-8";  @font-face {     font-family: 'Noto Sans';     src: url(//t1.daumcdn.net/tistory_admin/static/font/notokr-regular.woff2) format('woff2'),     url(//t1.daumcdn.net/tistory_admin/static/font/notokr-regular.woff) format('woff');     font-style: normal;     font-weight: normal; } @font-face {     font-family: 'Noto Sans';     src: url(//t1.daumcdn.net/tistory_admin/static/font/notokr-demilight.woff2) format('woff2'),     url(//t1.daumcdn.net/tistory_admin/static/font/notokr-demilight.woff) format('woff');     font-style: normal;     font-weight: 100; } @font-face {     font-family: 'Noto Sans';     src: url(//t1.daumcdn.net/tistory_admin/static/font/notokr-bold.woff2) format('woff2'),     url(//t1.daumcdn.net/tistory_admin/static/font/notokr-bold.woff) format('woff');     font-style: normal;     font-weight: bold; }  /* reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;outline:none} fieldset,img{border:0 none} dl,ul,ol,menu,li {list-style:none} blockquote, q {quotes: none} blockquote:before, blockquote:after,q:before, q:after {content:'';content:none} input,select,textarea,button {vertical-align:middle} input::-ms-clear {display:none} button {border:0 none;background-color:transparent;cursor:pointer} body {background:#fff} body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Noto Sans', sans-serif;color:#666} /* color값은 디자인가이드에 맞게사용 */ a {color:#333;text-decoration:none} a:active, a:hover {text-decoration:underline} a:active {background-color:transparent} address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}  #tistorytoolbarid { display:none }  /* layout */ #container {background:#f3f5f7;} #header {padding:10px; border-bottom:1px solid #ddd; background:#fff;} #contentWrap {width:1200px; margin:0 auto;} #contentWrap:after {display:block; clear:both; content:'';} #content {width:900px; float:left;} #sidebar {width:280px; float:right; background:#fff;} #footer {padding:20px; border-top:1px solid #ddd; background:#fff;} 

 

 

화면을 확인 해보자.

skin.html 파일을 브라우저에서 열어보면 아래와 같이 화면이 출력됩니다.

 

여기까지 했다면 이제 각 영역마다 디자인 요소 추가 및 치환자를 넣으면 블로그의 모습을 갖추게 됩니다.

다음은 대망의 header 영역 만들기입니다.