세상의 모든 홈페이지-오피>팁/강좌

[고급용]CSS를 이용해서 오피를 꾸며보는 시간입니다.

Angel Wing — Tue, 01 Jul 2008 09:38:48 +0900

안녕하세요^^ 정말 오랜간만에 강좌를 쓰는 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
=====================================*/

이것이 랭킹부분의 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이것도 간단한겁니다...(정말????)

일단 제가 아는부분은 여기까지입니다만..색다른걸 알게되면 또 강좌를 올리도록 하겠습니다^^;;;

저의 허접한 강좌를 끝까지 읽어주셔서 감사합니다^^;;;

저의 허접한 강좌가 조금이라도 도움이 되셨으면 좋겠습니다^^

[고급용]메뉴 플래시 XML 연동으로 만들기

허브&보리 — Wed, 11 Jun 2008 19:23:52 +0900

플래시로 만드면 수정이 어렵죠......ㅠ

현제 만들고 있는 메뉴 입니다.

xml로 수정 쉽게 가능합니다 메모장으로 추가 시키면 ㅎ되죠 ㅎ

강의하는건 제가 엔츠 리뉴얼 시킨다음;;;;;;

우선 이걸ㅇㅅㅇ

아시는분만 ㅎㅎㅎ

플래시 하고 xml지식이 있으신분만 ㅎ

알고 계세요 ㅎ

시중에서는 소스를 8~20 만원까지 판다죠;;-;;ㄷㄷ

플래시소스 -------------------------

-----------------------------------

XML 소스

<?xml version="1.0" encoding="EUC-KR"?>
<xmlMenu>

<menu1 title="엔츠소개" link="" target="_top" mCount="0">
  <sub1 title="엔츠케스트" link="http://dlcast.ohpy.com/wpage/8" target="_top"/>
  <sub2 title="쟈키소개" link="http://dlcast.ohpy.com/wpage/6" target="_top"/>
  <sub3 title="방송시간표" link="http://dlcast.ohpy.com/wpage/5" target="_top"/>
</menu1>
<menu2 title="공지사항" link="" target="_top" mCount="0">
  <sub1 title="공지사항" link="http://dlcast.ohpy.com/152286/0" target="_top"/>
  <sub2 title="건의사항" link="http://dlcast.ohpy.com/362975/0" target="_top"/>
  <sub3 title="매니져일지" link="http://dlcast.ohpy.com/362976/0" target="_top"/>
</menu2>
<menu3 title="가족모집" link="" target="_top" mCount="0">
  <sub1 title="쟈키신청" link="http://dlcast.ohpy.com/152340/0" target="_top"/>
  <sub2 title="매니져신청" link="http://dlcast.ohpy.com/152348/0" target="_top"/>
  <sub3 title="홍보팀신청" link="http://dlcast.ohpy.com/231600/0" target="_top"/>
  <sub4 title="팸신청" link="http://dlcast.ohpy.com/152349/0" target="_top"/>
</menu3>
<menu4 title="커뮤니티" link="" target="_top" mCount="0">
  <sub1 title="가족사진" link="http://dlcast.ohpy.com/152791/0" target="_top"/>
  <sub2 title="오프라인모임" link="http://dlcast.ohpy.com/362978/0" target="_top"/>
  <sub3 title="순간스샷" link="http://dlcast.ohpy.com/154206/0" target="_top"/>
  <sub4 title="점수올리기" link="http://dlcast.ohpy.com/362979/0" target="_top"/>
  <sub4 title="등업신청" link="http://dlcast.ohpy.com/362982/0" target="_top"/>
  <sub5 title="출석체크" link="http://dlcast.ohpy.com/152676/0" target="_top"/>
</menu4>
<menu5 title="자료실" link="" target="_top" mCount="0">
  <sub1 title="방송관련자료" link="" target="_top"/>
  <sub2 title="일반 자료실" link="http://dlcast.ohpy.com/154284/0" target="_top"/>
  <sub3 title="정회원 자료실" link="http://dlcast.ohpy.com/362983/0" target="_top"/>
  <sub4 title="우수회원 자료실" link="http://dlcast.ohpy.com/362984/0" target="_top"/>
</menu5>
<menu6 title="사연과신청곡" link="http://dlcast.ohpy.com/342026/0" target="_top" mCount="0">
</menu6>
<option
xMenu="10"
yMenu="0"
mMenuSpace="30"
sMenuSpace="5"
mHeight="29"
sHeight="29"

mMenuXscale="95"
mMenuYscale="105"
sMenuXscale="95"
sMenuYscale="110"

mBorderView = "1"

menuOutColor="FFFFFF"
menuOverColor="FFFBD5"
subOutColor="E9A815"
subOverColor="C1781B"

subMargin = "25"

<!--
  option에 적혀있는 변수는 다음과 같이 쓰입니다.
  위의 변수값을 수정해 주시면 플래시 파일에 바로 적용됩니다.

xMenu = 메인메뉴가 시작되는 x좌표
yMenu = 메인메뉴가 시작되는 y좌표
mMenuSpace=메인메뉴간 간격
sMenuSpace=서브메뉴간 간격
mHeight=메인메뉴 버튼영역 높이
sHeight=메인메뉴 버튼영역(서브바) 높이

mMenuXscale=메인메뉴 텍스트 가로비율
mMenuYscale=메인메뉴 텍스트 세로비율
sMenuXscale=상위 선택된 메뉴텍스트 가로비율
sMenuYscale=상위 선택된 메뉴텍스트 세로비율

mBorderView=메인메뉴간 경계선 보임(1)/숨기기(0)

menuOutColor=대메뉴 평상시 색상
menuOverColor=대메뉴 선택되었을 때 색상
subOutColor=서브메뉴의 평상 컬러
subOverColor=서브메뉴 선택되었을 때 색상

subMargin=서브메뉴바의 좌우 여백

-->

</xmlMenu>

이상 엔츠 케스트 국장 천이후 ㅇㅅㅇ 아니다 허브&보리 였습니다.