레퀴엠의 IT와 일상다반사

Flatinum 스킨은 무료 스킨중에서 가장 쓸만한 스킨이라 생각을 합니다.

요즘 들어 좀 더 깔끔하고 유지보수까지 되는 유료스킨을 한번 구매해볼까 고민하게 되지만 스킨 한번 지정해놓은거 바꾸게 되면 잠시나마 서칭에 좀 문제도 생기기도 하고 무엇보다 제가 공들여서 이것저것 커스텀 한 것이 아까워서 바꾸고 있지는 않습니다.

그래서 이번에도 Flatinum 스킨에 관련된 글을 한번 작성해볼까 합니다.

Flatinum 스킨은 굉장히 좋은 스킨이긴 합니다만 개인적으로 생각하는 문제점이 있다면 본문영역과 그 외의 영역의 구분이 모호하다는 점입니다.

제 느낌 상으로는 이러한 것이 디자인적으로는 미려해 보일수는 있으나 뭔가 영역 구분이 안되어 있으나 본문에 집중이 안되고 내용이 뭔가 붕뜨는것 같았습니다.

이것이 모든 유저에게 그런것인지는 잘 모르겠으나 적어도 본문 영역만큼은 확실하게 경계를 지어 가독성을 높이고 싶다라는 것이 제 생각이었습니다.

그래서 이렇게 본문 영역에 경계선 즉 테두리를 둘러서 이 부분은 본문영역이라는 것을 확실하게 각인시키고 뭔가 가독성을 좀 높일만한 방법을 포스팅 해보겠습니다.

본문영역 테두리를 생성해보자

테두리를 생성하는 것은 매우 쉽습니다. 그러나 어디에 CSS 코드를 적용하느냐가 매우 난관인것이죠.

Flatinum 스킨은 무료스킨이기 때문에 사용자가 알아서 그 방법을 찾아야 합니다. 그렇기 때문에 우리는 찾아야 합니다.

티스토리 스킨편집에서 HTML 편집으로 들어가 CSS 코드 수정 쪽에 위의 부분을 검색해주시기 바랍니다.

.entry 라고 검색해주시면 되겠습니다.

이 .entry 부분이 본문 영역입니다. 이 곳에 코드를 넣어 간단하게 수정을 할 수 있습니다.

이 .entry 영역에 border : 2px solid #edeae4; 라고 넣습니다.

저 코드의 의미는 border(경계) 2px(굵기는 2픽셀) solid(그냥 실선) #edeae4(이 색깔로) 하겠다는 의미입니다.

각 의미를 이해하셨나요? 굵기는 원하시는대로 조절하시면 됩니다. 더 두껍게 하고 싶으면 3~10px 줘도 되구요.

실선이 싫고 점선으로 하고 싶으면 dotted 라고 넣으면 됩니다.

#edeae4 이게 제일 문제인데 이건 색상을 Hex 코드로 변환한것입니다.

구글에서 rgb to hex를 검색하면 바로 색상과 hex 코드를 매치시키는 웹 툴이 나오는데 그것을 통해 원하는 색을 고르시면 됩니다.

그럼 결과가 이렇게 나오는데 뭔가 좀 마음에 안듭니다.

테두리가 생성은 되서 본문영역을 구분시켜주기는 하는데 너무 딱 붙어있습니다.

여유공간이 없이 저렇게 딱 붙어있으니 오히려 저 테두리가 글을 읽는데 방해를 주는것 같습니다.

그렇기 때문에 저 테두리와 본문 사이에 약간의 여백을 주도록 하겠습니다.

그런 여백은 Padding 값을 주면 해결 됩니다.

위와 같이 추가로 값을 더 주시기 바랍니다. 저는 좌우상하 여백을 각각 다르게 좀 주고 싶어서 저렇게 설정을 했습니다.

대체로 10px 가량을 값으로 줬는데요. 이 정도 여백을 주면...

이렇게 여백이 생기면서 본문영역에도 뭔가 여유가 좀 생깁니다.

이게 끝입니다. 결론적으로 .entry가 본문영역 설정하는 곳이고 거기에 여백과 경계 속성만 주면 된다는 것입니다.

HTML과 CSS를 배워본적이 없어서 이런 간단한것도 하는데 굉장히 오래걸렸던것 같습니다.

어쨌거나 이런 방식을 통해 본문영역에 경계선을 줄 수 있으니 참고해주시기 바랍니다.

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

계속해서 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에 담을까 합니다. 이것으로 포스팅 마치겠습니다.