이글루스 스킨을 대충 건드려보자 이글루스 스킨을 다뤄봅시다

듀크입니다. 아직 2012년이 아니니까 이 인장 마저 쓰겠습니다 ~_~ㅋ

뭐 다른건 아니고 이웃분들중 스킨 관련해서 힘들어하시는분들이 몇분 계시기에 부족하지만 제가 아는 범위 내에서 이것저것 건드린것들을 소개해보려 합니다.

본문에 들어가기전에 앞서 한가지 미리 말하자면 새로만드는 스킨들은 저장만 하지 않으면, 혹은 미리보기만 할 경우 지금의 스킨에 아무런 영향을 미치지 않음으로 걱정하지 말고 이것저것 시도해 보시면 되겠습니다. 만일 불안하시면 지금스킨은 따로 저장해두고 새 스킨 만들기로 새로 하나 만드신후에 이것저것 시도해보셔도 됩니다.


0. 스킨 에디터를 찾자.

일단 스킨을 건드리려면 스킨을 건드릴수 있는곳으로 가야겠죠?

이글루스 우측 상단에 보면 매뉴바가 있을겁니다. 바로가기 바로 아래의 3개는 아마도 모두 같을텐데요, 그중에서 붉게 하이라이트 된 '스킨 에디터' 를 눌러줍니다. 누르면 스킨 에디터로 넘어가게 됩니다. 이렇게 가는경우 지금 쓰는 스킨위에 덧쓰게 됩니다.
 
만일 지금쓰는스킨을 고치는게 아닌 지금쓰는 스킨은 따로 놔두고 새로운 스킨을 만들겠다! 라고 한다면 이글루 관리 - 디자인탭의 내 저장스킨 매뉴에서 새 스킨 만들기를 눌러주시면 되겠습니다.



1. 새 스킨의 틀을 잡아보자.

누르고나면 뭔가 복잡해 보입니다. 일단 새로나온 매뉴바 좌측의 디자인 선택쪽으로 넘어갑니다.

다들 아시겠지만 일단 설명하자면...

-공유센터 스킨에서는 이글루에서 자체 제작한 스킨, 혹은 다른사람들이 만든후 공개해놓은 스킨등을 사용할수 있습니다. 이미 완성된 스킨들이라 원클릭으로 끝납니다.

-내 저장스킨은 과거 만들었던 스킨이 있다면 이곳에 저장되어 언제든 자유로히 바꿀수 있습니다. 또 공개하지 않았다면 공개용으로 바꿀수도 있습니다

-새 스킨만들기는 새로운 스킨을 만들때 틀을 잡기위해 씁니다.

새로운 스킨을 만든다는 전제하에 글을 적고 있는거니 새 스킨 만들기로 넘어갑니다. 이곳에서 일단 자신의 마음에 드는, 혹은 자신의 이글루에 어울리는 배치를 선택해 줍니다. 총 6페이지에 걸쳐서 있으나 전체1페이지 말고는 꽤 난잡한 느낌도 드니 어떤 목적이 있는게 아니라면 1페이지 내에서 선택하는게 좋기도 합니다. 제가 쓰고있는것은 1페이지 좌측에서 두번째 틀 입니다.

틀을 잡았으면 디자인 선택 옆의 탬플릿 변경으로 갑니다.


2. 테마를 잡고 이것저것 달아보자

탬플릿 변경은 별거 없습니다. 중요한건 메인테마 정도려나요. 이곳에서 테마를 정하면 그 테마에 따라 이글루에서 작성한 글들이 보여지는 형식이 바뀌게 됩니다. 전부 한번씩 눌러보신후 자신에게 맞는 테마를 사용하시면 됩니다. 제가 이용하는건 '블로그 테마' 입니다. 그외 포스트영역이나 사이드바 영역은 직접 둘러보시고 필요하다싶은것들을 이것저것 넣으면 되겠습니다.

위젯에 관해서는 따로 언급하진 않겠습니다만, 만드는곳은 이글루 관리 - 디자인 - 내 저장위젯 - 위젯 만들기를 누르시면 됩니다. 타인이 이미 만들어놓은 위젯의 소스만을 가져오거나자신이 만든 위젯을 html만으로 간단하게 만들수 있는 곳입니다.

템플릿을 마쳤으면 전문가용 편집으로 가봅니다.


3. 전문가는 아니지만 전문가용 편집을 써보자. 그리고 몰라도 대충 따라해보자.


전문가용이라고 해서 매우 어려울듯 하지만 그... 뭐라더라. 주먹구구식으로 때려박으면 간단합니다(?)

일단 이곳에 들어오면 배경이미지 변경, html/css 편집, 이미지 업로드 칸이있습니다. 셋다 중요하기에 하이라이트를 해놨습니다.

만일 나는 이것저것 수정하기 귀찮고 이미지만 박아넣어서 완성시키면 그만이다- 라고 하시는분들은 배경이미지 변경에서 적절한 이미지들을 삽입해주신후, 혹은 배경컬러 옆의 대각선이 그어진 흰 내모를 눌러서 색을 지정한 후에 미리보기를 눌러서 약간 더 변경을 하시거나 마음에 드실경우 바로적용을눌러 스킨을 적용해주면 끝납니다.

하지만 난 좀더 꾸며보고 싶다- 하면 이미지 업로드와 html/css 편집을 사용하셔야만 합니다. 제가 실질적으로 쓰는것은 css 뿐임으로 css만을 설명하겠습니다. 일단 html/css 를 눌러봅시다.

뭔가 친근하지 않은 언어가 줄줄히 나옵니다. 한시바삐 뒤로가기를 누르고싶으신분은 일단 참아주시기 바랍니다.

혹시 이걸보면서 하시는분들은 저와 조금 다를수도 있지만 저는 그런거 모르고 아는것만 설명할겁니다. 불친절해도 어쩔수 없습니다. 저도 아는것만 알고있거든요...[...] 그럼 제가 쓰는 css 용어들을 적겠습니다. 본문에 적힌곳을 찾아서 한두개만 바꾸면 그대로 적용됩니다.


==================================================

-- 적고싶은말 --

이것은 아무 의미 없습니다. 하지만 그러기에 중요합니다. 이것은 해당하는 줄의 명령어가 무엇을뜻하는지 쉽게 알수있도록 해주는 일종의 메모입니다. 거의 아무대나 넣는것이 가능합니다. ----- 헤드밑의 줄 하나----- 처럼 이 명령어가 어떤 명령어인지 알기쉽게 구분해놓을수 있고 나중에 수정하기 쉽게 만들어줍니다. ---- 이것은 보기 쉽게 하기 위해서 해놓은것뿐입니다. 안하셔도 무방합니다.

=========================================================

------------  영역별 배경색 & 배경이미지  ------------

라고 적힌곳 아래의

.header {
 background:#667d78;
 border-bottom:7px solid #a395a4;
 }

라고 적힌곳을 찾아봅시다.

아참, 말하지 않았는데 #667d78 나 그외 비슷하게 적힌것은 같은것은 색상의 고유번호입니다. 흰색의 경우 #ffffff 이고 검은색의 경우 #000000 입니다. 앞의 샾(#)은 꼭 들어가야 합니다. 인터넷 검색하시거나 집에 박혀있는 포토샵의 색 버튼을 누르시면 다양한 색상과 그 색의 고유번호들이 나옵니다. 여기서 푸른색으로 되어있는 라인은 아래 붉게 칠한 검은 줄을 바꿉니다.

헤더와 본문을 나누어주는 줄입니다. 만일 방해된다고 생각되면 스포이트등으로 배경색을 집어낸후 그 색의 고유번호를 보라색 바탕으로 덮은곳에 넣어주시면 되겠습니다.

녹색 바탕으로 되어있는곳은 이 헤더의 사이즈를 결정합니다. 숫자만 건드려 주시면 되겠습니다.

============================================================

*---------- 영역별 글자크기/글자색/링크색 & 세부설정 ------------
이라고 적힌곳 바로 아래를 보면

.body {
 font:normal 13px/1.6em sans-serif;
 color:#333;
 margin:0 auto;
 padding:0;
 text-align:center;
 }

...라고 되어있을겁니다. 붉은색바탕으로 된곳은 이글루 전체의 글자 크기를 바꿔줍니다. 전체적으로 글자크기를 조금 바꾸고 싶다고 한다면 13이라는 숫자를 오르락내리락 하시면 되겠습니다.

===============================================================

----- 헤더 영역 -----
이라고 적힌곳 바로 아래를 보면 이렇게 되있습니다.

.header {
 color:#fff;
 margin:0 auto 30px auto;
 padding:200px 25px 5px 25px;
 text-align:left;
 }


이렇게 되있는곳을 바꿔주는 곳입니다. 이곳이 헤더 입니다. 녹색바탕으로 되있는곳은 이곳의 전체적인 색상을 의미합니다. 저처럼 이미지를 넣지 않았다면 이곳에 색상이 있을텐데 흰색일경우 #fff, 그외의 색일경우 다른 고유번호가 뜨게 됩니다. 이미지를 사용하지 않는다면 바꿔주시면 됩니다.

붉은바탕으로 되있는곳은 여백을 의미합니다. 0 라고 되있는곳은 헤더 위에서부터의 여백을 조정하는곳입니다. 보통 0으로 해놓으면 됩니다. 바꾸면 어찌되나 궁금하신분들은 한 100정도 넣어보세요. 결과를 보신후에 다시 0으로 바꾸면 그만이니 부담없이 해보시길 바랍니다. 30px 라고 되있는곳은 헤더와 본문간의 여백을 넓혀줍니다. 마찬가지로 적당히 숫자를 넣어보시면서 조절해 보세요.

파란바탕으로 되있는곳은 헤더의 사이즈를 변경시켜주는곳입니다. 200px 25px 5px 25px; 라고 되어있는데 관심을 가져주시면 되는곳은 200px 라고 되있는곳입니다. 헤더의 높이를 변경시키는곳이니 이곳역시 적당히 숫자를 넣어보면서 조절해주시면 되겠습니다.

=======================================================

----- 헤더 영역 -----
아래쪽으로 조금 더 내려가보면

.header a:link,.header a:visited {color:#000000;text-decoration:none;}
.header a:hover,.header a:active {color:#ff0000;text-decoration:underline;}
.header h1 {
 font-size:20px;
 margin:0;
 padding:1px 0;
 }

라고 적혀있습니다.

푸르게 하이라이트 된곳의 색상과 글자 크기를 바꿔줍니다.

붉은바탕으로 된곳은 저것을 누르기 전, 즉 하이퍼 링크 되기 전의 색상을 말합니다. 저의 경우는 검은색입니다.
푸른바탕으로 된곳은 저것을 누르거나 마우스를 올린 후, 즉 하이퍼링크 된 후의 색상을 말합니다. 저의경우는 붉은색 입니다. 궁금하시면 지금 스크롤바를 올려서 저곳에 마우스를 가져다 대보시길 바랍니다.
녹색바탕으로 된곳은 글자의 크기를 변경하는곳입니다. 숫자를 적절히 늘였다가 줄였다가 해주시면 되겠습니다. 다만 위의 사진을 예로 들자면 [듀크의 약간 소심한 공간] 이라고 적힌 글자의 크기만 변합니다. 아래 주소는 아까 위에서 언급한 이글루 전제 폰트 크기를 변경해야만 바뀌더군요.

===================================================================================

----- 푸터 영역 -----
이란곳을 찾습니다. 아마 가장 밑에 있을겁니다.
여기서부터는 지금부터 적을 문장들을 그대로 ----- 푸터 영역 ----- 이라고 적힌곳 아래에 복붙 하시면 적용됩니다. 물론 위에서 한것처럼 약간씩 바꾸셔도 됩니다. 참고로 비로그인들은 복붙이 안될테니 직접 적으세요...[...]

=============================================================

.post_comment .comment_write textarea.comment_field  {
height:250px;
}

덧글창의 높이를 바꿔주는 문장입니다. 붉게 된곳을 바꾸면높이가 달라집니다.

================================================================

.body {background-attachment:fixed;}

배경이미지를 고정시켜줍니다. 지금 쓰고있는 스킨 왼쪽에 보면 카구야 이미지가 있는데 이 명령을 사용해서 고정시킨것 입니다.

=================================================================


대충 이정도 입니다. 간단하게 쓰려고 했는데 길게 써버렸군요...[...] 이웃분들중 혹시나 막연하게 어떻게 해야될지 모르겠는분들이 계신다면 이 글이 도움이 됬으면 합니다.


하고나서 드는생각: 내가 왜 이 글을 시작했을까...[...]

벨리보내려 했지만 어디다가 보내야 할지 햇갈림으로 안보낼랍니다.
이글루스 벨리가 있었네요. 이글루스 벨리쪽으로 갑니다.

1


최재영치과

통계 위젯 (블랙)

00
4
127306