안녕하세요^^ 정말 오랜간만에 강좌를 쓰는 Angel Wing입니다....
음.......그러고보니.......이건 강좌라기보다는 팁에 매우 가까운 게시글이네요^^;;;;
일단 이렇게 썰렁한 홈페이지를 색다르게 꾸며볼까 합니다^^;;;
이런 오피 기본 스킨을 간단한 CSS편집으로
이런식으로 바꾸어볼까합니다...
-기본적인 CSS의 구성입니다-
일단 오피 마법사에서 디자인관리에서 CSS로 들어갑니다^^
우리가 고쳐야할것이...
현재 구성요소 CSS입니다^^;;;
그러니 구성요소 CSS로 들어가야겠지요?
여기에보면 구성요소 이름과 밑에는 알수없는 암호문들이 잔뜩 있습니다;;
어렵게 생각하지마세요-_-;;
알고보면 정말 쉽답니다^^
/* op element style - elrnk
***************************************************/
.elrnk {
clear: both;
float: left;
width: 100%;
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_tr_bg.gif) no-repeat right top;
margin-bottom: 5px;
}
*html .elrnk {
float: none;
}
.elrnk h2.elrnk-h {
float: left;
width: 140px;
height: 0;
padding: 34px 0 0 0;
overflow: hidden;
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_tl_bg.gif) no-repeat left top;
line-height: 300px;
}
.elrnk .elrnk-content {
float: left;
width: 100%;
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_br_bg.gif) no-repeat right bottom;
}
.elrnk ol {
padding: 1px 0 11px 17px;
float: left;
min-width: 100px;/*bg ul영역까지 나오므로 필수 */
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_bl_bg.gif) no-repeat left bottom;
}
.elrnk li{
list-style: none;
font: normal 90% 돋움, sans-serif;
padding: 3px 0 2px 17px;
line-height: 1.3em;
height: 14px;/*ie6 bg 영역 나오게 하기 위해 필수 */
color: #454545;
}
.elrnk li a {
text-decoration: none;
color: #454545;
}
/* elrnk li
=====================================*/
li.rnk01 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_01.gif) no-repeat 0 40%;
}
li.rnk02 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_02.gif) no-repeat 0 40%;
}
li.rnk03 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_03.gif) no-repeat 0 40%;
}
li.rnk04 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_04.gif) no-repeat 0 40%;
}
li.rnk05 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_05.gif) no-repeat 0 40%;
}
li.rnk06 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_06.gif) no-repeat 0 40%;
}
li.rnk07 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_07.gif) no-repeat 0 40%;
}
li.rnk08 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_08.gif) no-repeat 0 40%;
}
li.rnk09 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_09.gif) no-repeat 0 40%;
}
li.rnk10 {
background: url(http://img.ohpy.com/opimg/skin/aqua_blue/img/elrnk_n_10.gif) no-repeat 0 40%;
}
이것이 랭킹부분의 CSS문입니다.
여기서 주목해야할것이 http://로 시작해서 .gif로 끝나는부분이.......이미지파일주소입니다..
한번 이부분을 복사/붙여넣기 해보세요^^
그럼 해당부분의 이미지가 나오는데 이부분의 이미지를 수정해서 원래있던 주소를 지우고 새로 업로드한 이미지의 주소를 올려버리면 끝입니다...에..이게 끝입니다-_-;;
다른건 전혀 필요없습니다..
인터넷에서 이미지를 구하시던가...아니면 직접 포토샵등으로 꾸미시던가......이미지만 만들어서 올리면되는겁니다^^;;
단,주의해야할점은 원본 이미지랑 사이즈가 틀리게되면 보기 흉하게 깨지게되니 원본이미지랑 사이즈는 동일하게 맞추어줍니다.
1픽셀이라도 틀리면 정말 흉합니다-_-;;
다른부분도 이런식으로 바꾸어주면되구요^^
.elrnk li{
list-style: none;
font: normal 90% 돋움, sans-serif;
padding: 3px 0 2px 17px;
line-height: 1.3em;
height: 14px;/*ie6 bg 영역 나오게 하기 위해 필수 */
color: #454545;
}
이부분이 폰트관련부분입니다^^;;;
제가 아는데로 해석하면.............폰트는 노멀사이즈(??)로 정상적인 크기에서 90%정도이며....
폰트는 돋음으로 되어있습니다...뒷부분은 잘모르겠네요-_-;;;;
그리고 ;/*ie6 bg 영역 나오게 하기 위해 필수 */<-이부분은 말그대로 인터넷익스플로러6에서 (가장많은분들이 사용하고 있는 브라우저이지요^^;;;)백그라운드 영역 즉,배경이 나오게하기위해서 꼭 필요하다는 거지요^^
참고로 폰트를 수정하실때에는 원도우 내장 폰트가 아닌 오피 내장폰트라는것이 중요합니다..
오피 폰트가 뭐뭐 있을까 궁금하신분들은......오피의 게시판을 아무거나 하나 열어서 글자체를 열어서 보시길 바랍니다^^;;
음..중간에 페딩이란 부분은 저도 잘모르겠으니 패스..ㅠ.ㅠ 정말 죄송합니다;;;
line-height: 1.3em; 이 부분은 말그대로 글자 간격을 조절하는 부분입니다..적절히 조절해서 사용하시면되구요^^
height: 14px 이부분은 폰트의 사이즈입니다....14픽셀로 기본지정되어있네요^^;;
즉,결론적으로는 글자간격은 1.3em(em..이 뭘까나;;;)이며 폰트크기는 14 이 사이즈에서 90%정도 크기로 지정되어있다는 이야기이지요-_-;;
칼라부분은 말그대로 글자색을 말하는것입니다^^;;;
웹표준 색상표를 보시면서 수정하시면 될듯하네요^^;;;
그외 나머지부분도 이런식으로 수정하시면서 작업하면 간단한 방법으로 오피이면서도 오피가 아닌듯한...구성요소를 만들수 있을듯하군요^^
또 오피를 이용하다보면 오피관리하기라는 버튼이 보기 싫어서 수정하고 싶으신분들이 있습니다^^
이런식으로 한번없애볼까 합니다..
물론 이 강좌 본문은 서태민씨가 작성하신(http://www.ohpy.com/140722/170)를 참고해주시길 바랍니다^^
하지만 적용방법을 모르시는분들을 위해서^^;;;
물론 이걸 구성요소에서 꼬리말에 html부분에 직접 복사/붙여넣기 하셔도 되지만..CSS를 공부하는김에..한번 직접 수정해봅니다^^
구성요소CSS가장 아래에 있는 오피흥보라는 창을 봅니다...(그나저나 대놓고 오피흥보라니-_-;;;쩝;;;;;)
조금씩 내려가다보면...이런 부분이 있을껍니다^^;;
elprv-content {
float: right;
}
잘찾아보시길 바랍니다..이부분만을 찾아서 서태민씨가 작성한 강좌대로 수정하면 끝입니다..짜잔 하고 사라졌습니다^^
참고로 본 사이트(Angel Wing)은 강좌용 사이트랑 똑같은 스킨으로 제작되었습니다...
하지만 오피의 기본메뉴가 보이지않습니다...이걸 어떡해 한것일까요????
네..그렇습니다..정답은 CSS편집에 있습니다....물론 이전에도 가능했던 부분이지만요...
그저......html구성요소에서 타이틀부분 또는 html1~5번중에 아무곳에나 해당 태그를 삽입하면 간단한부분이지만...
CSS를 공부하는김에 이부분도 직접 수정해보도록 합니다^^
우리가 수정해야할 부분은......-상위메뉴-이부분입니다^^;;;
이부분만 수정해주도록합니다만....(정확한건지는 저도 잘모르겠네요;;;그냥 복사/붙여넣기가 더 편할수도 있겠네요;;)
아참 이 강좌는 MΩSIDER님이 작성해주셨습니다(http://www.ohpy.com/140722/190)
/* 상위메뉴 */
.elgnb ul.navi { list-style:none; height: 41px; background: url(http://img.ohpy.com/opimg/skin/elgnb/globalleader/img/elgnb_bg_right2.gif) no-repeat right 0; font: bold 12px 돋움, sans-serif; margin: 0; padding: 0 0 0 15px; }
.elgnb ul.navi li.menu { float: left; z-index: 11; display: inline; position: relative; background: url(http://img.ohpy.com/opimg/skin/elgnb/globalleader/img/elgnb_wall.gif) no-repeat right 2px; }
.elgnb ul.navi li.menu .item a { display: block; padding: 13px 20px 14px 20px; color: #fff; }
*html .elgnb ul.navi li.menu .item a { padding: 15px 20px 14px 20px; }
*:first-child+html .elgnb ul.navi li.menu .item a { padding: 14px 20px 15px 20px; }
.elgnb ul.navi li.menu .item a:link, .elgnb ul.navi li.menu .item a:visited { text-decoration: none; }
.elgnb ul.navi li.menu .item a:hover { }
이부분을 수정하셔야됩니다......저도 아직까지는 공부를 더해야겠군요...ㅠ.ㅠ
잘될련지는 모르겠지만...일단 한번 공부하는김에 해보는겁니다;;;
자세히보면 backgraound라고 적힌부분과 그 뒤에 오피 이미지파일 주소가 있습니다;;
간단합니다..이부분을 삭제하시면됩니다-_-;;;
그러니까 back...부터.......px까지 지워주시면됩니다..
예를 들면 이렇게요.
.elgnb ul.navi { list-style:none; height: 41px;}
이런식으로 수정하시면 되구요...어 근데 자신이 만든 html을 적용하니 윗부분이 하얗게 나옵니다-_-;;;
왜그런걸까요?
답은 height: 41px여기에 있습니다...41을 0으로 고쳐줍니다^^;;;
어...그런데 아직도 메뉴가 사라지지않았어요^^;;;;;
아직까지는 몇군대를 더 수정해줘야합니다..조금 귀찮더라도 공부하는셈치고...(니 실력이 부족한거자나!!!)
상위메뉴 부분에서 display: block라고 적힌 부분을 다 찾아서 display:none로 바꾸어줍니다..
하지만 아직까지도 사라지지않았습니다....;;;;;;
가장 윗부분의
/* op element style - elgnb
***************************************************/
.elgnb { clear: both; height: 41px; margin-top: 10px; background: url(http://img.ohpy.com/opimg/skin/elgnb/globalleader/img/elgnb_bg_left2.gif) no-repeat left 0; }
.elgnb h2.elgnb-h { display: none; }
이부분에서 위에랑 똑같이 주소부분을 깨긋하게 지운뒤에 역시 px앞부분의 숫자를 0으로 바꾸어줍니다^^
그럼 짜잔하고 사라졌지요^^;;;
아 참고로 홈페이지 내부의 스크롤바 색상을 변경하는 방법을 알려드릴까합니다^^;;
이것역시 CSS로 수정이 가능해보입니다^^;;;
이부분은 영역별 CSS로 들어가야하네요^^
가장 위에 있는 basis부분을 찬찬히 들여다봅니다^^
scrollbar-face-color: #e3e3e3;
scrollbar-shadow-color: #a5a5a5;
scrollbar-highlight-color: #e3e3e3;
scrollbar-3dlight-color: #f2f2f2;
scrollbar-darkshadow-color: #e9e9e9;
scrollbar-track-color: #f0f0f0;
scrollbar-arrow-color: #777777;
이런것이 보일껍니다......^^;;
이부분의 색상을 웹표준 코드표를 찾아보고 수정하시면됩니다^^
끝부분의 알수없는 영어와 문자 숫자조합부분을 수정하심되지요;;
#777777;
이부분 말이지요^^;;;
저는 웹표준색상표 찾아보기 귀찮으니 패스-_-;;하지만 잘될껍니다;;;;
그리고 새글이 올라왔을때 NEW표시가 뜨는것도 한번 수정을 해보겠습니다^^
물론 이것도 강좌가 올라와있지만 간편하게 CSS로 직접 수정해보겠습니다^^
사실 강좌에 나와있는대로 하면 메인에서만 적용됩니다;;;다른 게시판에는 전혀 적용이 되지않지요^^;;;;
그걸 다 적용시킬려면 각 게시판을 다 수정해야하는 불편함이 있지요..하지만 이 방법은...한방에..끝납니다..ㅎㅎㅎ
역시 basis부분의 가장 아래에 있는
.icon-intro-new { float:left; height:0; overflow:hidden; padding-top:9px; width:10px; background:url(http://img.ohpy.com/opimg/skinset/globalleader/img/icon-new.gif) no-repeat; }
이부분을 찾습니다....네..그렇습니다^^
이제 말안해도 알겠지요????
백그라운드(영어로 쓰기 귀찮군요;;;)부분의 url부분만 원하는 이미지로 수정하면간단합니다^^;;;
이것만 알아도.......충분히 남들과 다른 색다른 오피 홈페이지를 꾸밀수 있습니다^^;;;
알고보면 CSS이것도 간단한겁니다...(정말????)
일단 제가 아는부분은 여기까지입니다만..색다른걸 알게되면 또 강좌를 올리도록 하겠습니다^^;;;
저의 허접한 강좌를 끝까지 읽어주셔서 감사합니다^^;;;
저의 허접한 강좌가 조금이라도 도움이 되셨으면 좋겠습니다^^
