레퀴엠의 IT와 일상다반사

계속해서 Flatinum 스킨 관련 포스팅을 진행하고자 합니다. 요즘 Flatinum 스킨을 제 입맛대로 제 색깔대로 꾸민다고 HTML 자료를 많이 찾다보니 점점 HTML에 대한 지식이 느는것 같아 좋은것 같습니다.

앞으로 Flatinum 스킨을 뛰어넘을 2단형 스킨이 나오지 않는이상 쭉 사용할 계획입니다.

혹시 Flatinum 스킨을 사용하시는 분들 중에 에디터 때문에 당황하신적 있으십니까? 전 엄청 당황했습니다. 이게 Flatinum 스킨을 적용하는 분들 모두 그런지 아니면 저만 그랬는지 모르겠지만 글 입력 공간이 너무 좁았습니다.

▲ 지금이야 상당히 넓어졌지만 제가 처음 Flatinum 스킨을 적용하고 글을 쓰려 했을때 최대 가로 넓이가 저것의 반 밖에 되지 않았습니다. 실제 블로그에 올라가는 글 영역은 1000px 가까이 되는데 에디터상에서는 반밖에 되지 않으니 조절하기가 불편함은 물론이고 글 쓸때에도 불편했습니다.

처음 이 문제를 겪을때는 CSS 안에 들어있나 싶어 처음부터 끝까지 코드를 읽어가며 뒤졌지만 전혀 그런부분은 찾을수가 없었습니다. Flatinum 스킨은 부트스트랩 기반이니까 부트스트랩 코드를 보면 되지 않을까? 싶어서 찾아봤지만 거의 대부분 영어 사이트라... 진이 빠져 포기했었습니다.

그런데 생각보다 너무 쉬운 곳에 존재하다보니 해결방법을 알고 맥이 풀릴정도였습니다. 여러분 이래서 공부해야 하는겁니다..... 머리가 나쁘면 몸이 고생합니다 

에디터 영역 조절방법은 다음과 같습니다.

먼저 블로그 관리 -> 스킨을 눌러주세요.

▲ 그럼 위와 같은 화면이 뜨는데요. 스킨 다운로드 버튼을 눌러서 다운로드 받아주세요. 그럼 압축파일 하나가 받아집니다.

▲ 압축을 풀면 위와 같은 파일들이 나오게 되는데요. 중요한건 XML 문서라 되어있는 index 입니다. index.xml 파일을 수정해야 합니다.

▲ 하지만 그냥 열게 되면 웹사이트 형식으로 열리게 되는데 이렇게 되면 수정을 할수가 없습니다. 수정을 할수 있는 에디터 프로그램이 필요합니다. 무료인 Notepad++ 프로그램을 다운받아서 설치해서 Notepad++을 실행시키세요.

다음 Notepad++을 통해 index.xml 파일을 열어줘야 합니다. 당연하겠지만 Notepad++에서 열기 버튼을 누른다음 index.xml을 더블클릭하면 됩니다.

▲ 그럼 위와 같이 수정을 할수 있습니다. 코드는 그대로 유지가 된채로 말입니다. 여기서 이제 값을 바꾸게 되면 에디터 영역을 조절할수 있게 됩니다. 

▲ 아래로 쭉 내립니다. 그럼 contentWidth 라는 부분을 발견할수 있습니다. 저는 800으로 이미 수정을 했는데요. 아마 보통은 500으로 되어 있을 것입니다. 그럼 에디터 가로 넓이가 겨우 500px 밖에 안된다는 말이 됩니다. 아이폰 가로 영역도 700이 넘는데 500px은 확실히 너무 작습니다. 이 값을 바꿔주면 됩니다. 더 큰숫자로 바꿔주세요.

저는 800으로 했지만 앞으로 블로그 글 영역인 980px과 똑같이 맞추기 위해 980으로 수정할 계획입니다. 값을 수정하고 저장하세요.

▲ 이제 index.xml을 업로드 시켜서 적용을 해야 합니다. HTML/CSS 편집에 들어가서 파일업로드로 간다음 추가버튼을 누르시고 index.xml을 업로드 시킵니다. 

그러면 업로드는 됐다고 뜨는데 어딜 찾아봐도 index.xml은 보이지가 않습니다. 

하지만 이것은 당연한거니 안심하셔도 됩니다. 숨겨져 있는 것이기 때문입니다. 이제 저장 버튼을 누르시고 마지막 단계만 남았습니다.

▲ 지금부터는 에디터 영역이 정상적으로 수정되었다면 할필요가 없습니다. 만약 index.xml을 넣고 저장까지 했는데 에디터 영역이 바뀌지 않았다면 해야 하는 과정입니다.

지금까지 수정한 스킨을 저장해야 합니다. 스킨저장 버튼을 눌러서 스킨을 저장해주시구요.

▲ 다음 PC보관함으로 가서 적용버튼을 누르셔서 스킨을 재적용하시면 모든 과정이 끝이나게 됩니다. 이렇게 하면 에디터 영역을 자유롭게 수정하실수 있습니다.

다른 스킨은 해보지 않아서 어떻게 수정하는지 모르겠습니다만 Flatinum 스킨 같은 경우 index.xml을 밖으로 꺼내와서 contentWidth 영역의 값만 수정한다음 다시 재업로드 하면 아주 간단하게 에디터 영역이 조절됩니다.

Flatinum 스킨을 쓰는 블로거 분들에게 도움이 됐기를 바라며 이것으로 포스팅 마치겠습니다.

안녕하세요. 이번에도 역시 Flatinum 스킨에 관해 다루겠습니다.

Flatinum 스킨은 기타 다른 스킨들과는 조금 다르게 부트스트랩을 이용하여 스킨을 만들었습니다. 부트스트랩이 솔직히 뭔지는 모르겠고... 그냥 HTML/CSS를 활용하여 더 효과적으로 좋은 것을 만들때 쓰이는 툴이라고 생각하고 있습니다.

어쨌든 특이하게 부트스트랩을 사용하다보니 다른 스킨과는 방식이 좀 다릅니다. 솔직히 말하자면 좀 많이 다르더라구요. 그렇기 때문에 글 넓이 조절하는것도 사실 좀 힘들었는데요. 부트스트랩의 코드 규칙만 안다면 생각보다 아주 간단하게 수정을 할수 있습니다.

무엇보다 부트스트랩은 반응형 웹사이트 제작에 지향하는 툴이다보니... 여러모로 기능도 많다고 하더라구요.

Flatinum 스킨은 기본적으로 블로그 전체 영역이 생각보다 좁은편입니다. 때문에 사진을 크게 넣으시거나 하실때는 수정이 필요합니다. 그 방법은 다음과 같습니다.

먼저 블로그 관리 -> HTML/CSS 편집 -> CSS로 가줍니다. 대부분의 스킨 변경은 CSS에서 해결할수 있습니다.

스크롤을 내려서 가장 아랫부분으로 가시기 바랍니다. 그럼 @media로 시작하는 코드들이 있는데 이것이 바로 블로그 영역을 조절하는 부분입니다. 

이해를 돕도록 간단히 설명을 하자면 첫번째는 사용자 컴퓨터의 가로 픽셀이 최소 768px에서 최대 991px 일경우입니다.

두번째는 최소 992px에서 최대 1199px일경우이며 마지막은 1200px를 넘을경우입니다.

1200px이라 하니까 엄청 큰것 같지만 전혀 크지 않습니다. 왜냐하면 요즘 기본 모니터들도 풀HD를 지원하기 때문에 모니터의 가로픽셀이 기본 1920px 입니다.(해상도가 1920*1080 이므로...) 

심지어 해상도가 상당히 낮은 제 노트북도 가로픽셀은 1366px 입니다.

따라서 대부분의 사용자는 1200px 이상에 해당한다는 것입니다. 그 아래의 해당하려면 옛날 커다란 CRT 모니터 쓸때나 정도에 해당합니다.

모바일의 경우 모바일 웹을 쓰면 아예 다른 스킨으로 굴러가기 때문에 전혀 해당사항이 없습니다. 

따라서 마지막인 min-width: 1200px 안에서만 설정을 해줘도 되지만 혹시모르니 모두 설정정도는 해두시는게 좋습니다.

.container

#jbContentColumn

#jbSidebarColumn

이 세가지가 있는데 이것은 아래와 같습니다.

각 영역입니다. 즉 .container = #jbContentColumn + #jbSidebarColumn 입니다.

저 같은 경우 블로그 전체 영역 가로 넓이를 1250px를 주었고 글 영역 부분 980px, 사이드바 영역을 270px 주었습니다.

이렇게 조절하시면 Flatinum 스킨에서 원하는 크기대로 조절하실수 있습니다.

이것으로 포스팅 마치겠습니다.

안녕하세요. 최근에 스킨을 바꿨는데요. Flatinum이라는 이름의 스킨으로 변경을 했습니다.

Flatinum 스킨은 전형적인 2단형 스킨으로써 사이드바가 1개 존재하기 때문에 사이드바를 활용하여 다양한 기능들을 넣을수 있다는 점이 매우 큰 장점입니다. 디자인도 상당히 깔끔하고 기본 폰트도 깔끔하여 그냥 써도 전혀 무리 없을 만큼 뛰어납니다만 그래도 초기상태로만 보았을때 이것저것 뜯어고치고 싶다라는 생각을 하는 블로거 분들이 많을것입니다.

저 또한 그렇기 때문에 HTML 초보이지만 이래저래 뜯어고치면서 바꾸었는데요. 첫번째는 네비게이션 바에 대해서 다루어볼까 합니다.

▲ 처음 네비게이션 바를 보았을때 크기가 좀 크다... 라는 생각을 하였는데요. 특히나 저는 노트북으로 포스팅을 하고 있는데 해상도가 1366 *768 밖에 안되다 보니 한 화면안에 많은 글이 들어오지 않습니다. 

때문에 저 네비게이션바가 더욱더 크게 다가왔는데요. 이것을 최대한 줄여서 적당한 크기로 만들어볼까 합니다.

▲ 블로그 관리 -> HTML/CSS 편집 -> CSS 에 들어가셔서 "nav.navbar-inverse.shrink" 검색을 해주세요.

그럼 위와 같은 코드가 나오게 됩니다. padding 값이 설정되어 있을텐데요. 이 값만 바꾸게 되면 네비게이션바 크기를 자유자재로 조절하실수가 있습니다.

▲ padding의 첫번째 값을 각각 바꾸어 주면 됩니다. 저 같은 경우는 28px -> 15px, 35px -> 10px로 바꾸어줬습니다.

이 정도로 값을 줄여주니 딱 로고 사이즈 만큼만 네비게이션 높이가 줄어들어 글을 덜 가리게 되어서 이렇게 했습니다. 값은 자유자재로 주시면 됩니다. 더 늘리셔도 되고 더 줄이셔도 됩니다.

▲ 수정하고 난 결과입니다. 네비게이션 바가 눈에 띄게 상당히 줄었죠? 이제 글을 덜 가리게 되어 가독성도 좋아지는 결과를 가져왔다고 생각합니다.

현재도 Flatinum 스킨을 수정중에 있습니다.(제작자 분이 재수정 및 저작권 남긴다는 조건하에 재배포도 허락하셨습니다.) HTML 초보라서 많이 부족하지만 좀더 Flatinum 스킨을 다듬어서 저만의 스킨으로 만들어보며 그 흔적들을 모두 Tistory에 담을까 합니다. 이것으로 포스팅 마치겠습니다.