Data Of MoonHouse

SketchBook5 게시판스킨 - 문하우스 수정버전 V3.0 - 2024.04.10

• 기존 스케치북 게시판 스킨에 덮어 쓰기 해도 잘 작동됩니다. (혹시 모르니 백업은 필수!!) - /modules/board/skins/sketchbook5 에 모든 파일을 덮어 쓰기 하면 됩니다. • XE 사용자의 경우 [ 본문 일반 설정 > 추천/비추천 기능 XE사용 ] 에서 XE사용을 선택하면 됩니다. [ V3.0 수정 ] 1. 폰트어썸 웹폰트와 문하우스 전용 버턴 기능을 에드온에 의존하지 않고 게시판 설정에서 직접 관리 전체설정 > 폰트어썸 사용형태 or Sexy Button 사용형태 2. 게시글 상단 네비에 목록과 쓰기 버턴 추가 3. 공지글 폴딩 형태로 출력 기능 추가 ...

More →

SketchBook5 게시판스...

MH Before V1.1 위젯

[ 특징 ] 1. Before이미지 와 After이미지를 비교하는 위젯 2. 지정 게시판에 Before 이미지를 처음 올리고 After 이미지를 두번째로 업로드 3. 대상 분류 srl값으로도 출력가능 4. 이미지의 사이즈는 첫이미지, 즉 Before이미지의 사이즈를 따라갑니다. 되도록이면 사이즈를 동일하게 만들면 됨 5. 중앙에 화살표를 좌우로 움직이면 Before / After 이미지로 출력 6. 하단문구 지정 가능 7. 게시글의 이미지 순서 지정 가능 [게시판 화면] [위젯 화면] [화살표를 좌로 움직인 화면]

More →

MH Before V1.1 위젯

Mh Make 위젯스타일

문하우스 대문페이지에 있는 위젯스타일입니다. [특징] 1. 테두리의 유무 2. 타이틀 색상, 타이틀 앞 언더바 색상 지정 가능 3. 더 보기 출력 4. V1.1 - 테두리 색상 지정 가능 [설정 화면]

More →

Mh Make 위젯스타일

Mh BigSlider V2.1 위젯 - 2024.04.13

[ V 2.1 특징 ] 1. 내용글 영역에 확장변수 출력가능 2. 확장영역 버턴 대신 내용 출력 3. D-day / 시작전 출력 4. 기간 출력 - https://moonhouse.co.kr/xetip/590008 [ V 2.0 특징 ] 1. 배경 이미지 제거 스킨 추가 2. 어떤 크기라도 가능 3. 슬라이드 내용 가로, 세로 정렬 [ V 1.1 특징 ] 1. Slide 설정에 자동 슬라이드쇼, 마우스 hover시 슬라이드 쇼 일시 중지, 랜덤 재생 추가 2. 마우스 hover시 썸네일 확대 [ 특징 ] 1. 깔금한 슬라이드 배경이미지 적용 2. 3개의 스킨 적용 - 1080px / 850px / 750px 레이아웃폭에 적당한 크기 ...

More →

Mh BigSlider V2.1 위...

Mh Justice Layout V 1.5 [ 2023. 02. 07 ] - Sale 제품(₩39,000)

Mh Justice Layout is a one page html5 bootstrap template. This template comes with smooth animations, pop-up video and many more… 1. OnePage로 출력되며 Bootstrap과 Animations를 적용하여 스크롤 되는 순간 각 Section영역 에니메이션이 작동 2. 거의 완벽한 반응형(모바일형)으로 츨력 3. 간단한 설정 한번으로 색상변경 완료 - 밝은 배경, 어두운 배경, 혼합배경을 선택후, 설정 옵션들에서 자신만의 칼라로 변경 가능 4. 상단 메뉴를 자유자재로 선택 가능 • 원페이지 메뉴 - 한페이지내에서 상하로 이동하는 메뉴 • 메인 메...

More →

Mh Justice Layout V 1...

Mh SmartBanner Widget V1.1 [2021.01.13] - Sale 제품(₩9,000)

카테고리지정 / 시작,종료설정 / 배경 블랙 / 좌로 이동 / 랜덤 / 네비가능 / 무한루프 / 클릭시 지정사이트로 이동 / 풍선도움말 - "대상 분류값"으로 배너 출력 가능 - "위젯 NO" 처리로 여러개의 배너를 다양한 형태로 생성 가능 - Slide의 다양한 옵션 - Auto기능과 타임지정 가능 - 좌우 네비와 하단에 도트 네비 출력 가능 - 슬라이딩의 방향을 좌우 / 상하로 선택 가능 - 슬라이딩의 모습를 4가지로 선택 가능 - 서서히, 착, 튕기기, Fade - 배너에 마우스 Hover시 풍선도움말 출력 - 게시판의 확장변수와 연동하여 배너 클릭시 지...

More →

Mh SmartBanner Widget...

Mh Brickfolio Widget V1.3 [2023.04.05] - Sale 제품(₩9,000)

[ V1.3 특징 ] [ SketchBook5_Mh 수정버전과 같이 연동 ] • 확장 변수가 자동으로 제목으로 대체되는 방법 https://moonhouse.co.kr/xetip/578453 • 확장변수를 이용해 진행버턴과 D-Day를 함께 출력 https://moonhouse.co.kr/xetip/577872 [ V1.2 특징 ] 1. 페이지기능을 탑재한 Box형 위젯 2. 통합게시판 위젯으로도 활용가능 3. 썸네일클릭시 게시판 바로가기, Rightbox 출력 및 Zoom기능도 지원 4. 완벽히 반응형으로 작동합니다.(레이아웃의 폭을 % 넓이로 지정할때) 5. Box를 총8가지의 에니메이션 효과로 출력 6. Box의 색상 / 테두...

More →

Mh Brickfolio Widget ...

Mh Portfolio V1.0

[ V1.0 특징 ] 1. 깔끔한 썸네일 위젯 2. 썸네일 Box에 마우스 Hover시 제목과 내용글이 다양한 효과와 색상으로 출력 -- 효과 15가지, 배경색상 13가지, 버턴색상 17가지 3. 카테고리별 출력도 가능 4. 페이지 기능 가능 -- ajax적용으로 화면 리프레쉬 없이 작동 5. 확장변수를 이용해 버턴출력 가능 6. 다수의 위젯생성도 가능 7. 반응형 지원

More →

Mh Portfolio V1.0

Mh Owl Slide V1.0

[ 특징 ] 1. 깔금한 배너 롤링 위젯입니다. 2. Auto Slide를 지원합니다. 3. 슬라이드에 타이틀 / 썸네일 / 네비를 지원합니다. 4. 배경색상외 여러 색상들을 지정할 수 있습니다. 5. 타이틀 / 내용 / 각종 옵션등을 지정 가능합니다. 6. 카테고리 출력도 가능합니다. 7. 원본 코드의 테마 색상이 Red에 맞추어져 있어서 기본 색상은 Red입니다. 8. 완벽한 반응형 지원과 모바일에서 스와프기능도 지원합니다. 9. 두종류의 스킨 지원 - Default Skin, All Pictures Skin All Pictures Skin은 게시물안의 모든 이미지들을 불러올 수 있으며 ...

More →

Mh Owl Slide V1.0

Mh Multi Widget V1.6 [2023.04.05] - Sale 제품(₩9,000)

메뉴얼 [ V 1.6 업데이트 내용 ] • 댓글 많은순으로 정렬. https://xetown.com/questions/1394764#comment_1395175 • 예약발행 모듈에 대응 https://xetown.com/download/1721679#comment_1722728 [ SketchBook5_Mh 수정버전과 같이 연동 ] • 확장 변수가 자동으로 제목으로 대체되는 방법 https://moonhouse.co.kr/xetip/578453 • 확장변수를 이용해 진행버턴과 D-Day를 함께 출력 https://moonhouse.co.kr/xetip/577872 [ V 1.5 업데이트 내용 ] •FirstThumb 스킨 추가 스케치북 게시판 스킨 V 2.1 에 추가된 "첫 게시글만 썸네일 출력 ...

More →

Mh Multi Widget V1.6 ...

Mh Author 위젯 V1.5 (2024.01.10)

V 1.5 수정내용(2024.01.13) 1. 베너스킨 바로가기 확장변수 미작성시 문제 해결 2. 유튜브스킨 추가 - 확장변수 사용자정의 (기본 : transfer) : 위젯상에서 유튜브 재생 가능 합니다만 사이트가 약간 느려집니다. V 1.4.1 수정내용(2021.08.28) - default스킨과 Book스킨을 동시에 출력시 제목글이 좌측으로 밀리는 문제해결 V 1.4 수정내용(2021.02.12) SketchBook5 게시판스킨 - 문하우스 수정버전 V1.8.1 북 갤러리 형태 게시판에 맞추어 "Book 갤러리"스킨 추가 - Book 갤러리형식 게시판의 확장변수를 그대로 가져옵니다 - new, bes...

More →

Mh Author 위젯 V1.5 (...

Mh Sideways Layout

[특징] •화면전환이 가로 방향으로 움직입니다. •홍보용 사이트 레이아웃에 적합합니다. •화면 좌우에 마우스 Hover시 자동으로 슬라이딩 됩니다. •좌측 삼선 햄버거 메뉴형식 / 페밀리 사이트 / 자체 로그인 지원합니다. •카카오 지도를 지원합니다 - 카카오톡 앱키 입력 필수 •본문 아래에 각 섹션 바로가기 아이콘을 지원합니다. •완벽한 반응형으로 작동합니다. •메세지 보내기(Contact Us)를 적용할려면 contactfree.zip 위젯을 설치하면 됩니다. •갤러리 섹션은 Lightbox 전용 Hover 위젯 을 사용했습니다.

More →

Mh Sideways Layout

Mh Gallery Layout & Mh Gallery Widget V2.2 [2022.05.22] - Sale 제품(₩19,000)

[ V2.2 특징 ] •Colorbox Skin 추가 - 첫화면에 박스출력 - Auto Slide 지원 •본문 메뉴(GNB)를 상단 가로 형태에서 좌측 삼선 햄버거 형태로 변경 •배경이미지 슬라이드 로딩 기능을 적용 Demo - https://moonhouse.co.kr/cb [ V2.0 LightBox Skin 특징 ] •LightBox Skin 추가 -- 지연님 요청 •Default Skin은 이미지를 전체화면 Fullscreen 으로 출력되는 반면 LightBox Skin은 이미지의 원본 크기로 출력됩니다. Demo - https://moonhouse.co.kr/lb [특징] •레이아웃과 위젯의 콜라보로 이루어진 전체화면 갤러리 스킨입니다. •레이아웃...

More →

Mh Gallery Layout &am...

Widgets Of MoonHouse

Data Of MoonHouse

Prev 68 69 70 71

Layouts Of MoonHouse

    • Mh Sideways Layout
    • [특징] •화면전환이 가로 방향으로 움직입니다. •홍보용 사이트 레이아웃에 적합합니다. •화면 좌...
    • 2022.05.16
    • 문하우스 Simple 레이아웃 V 1.4 (2020.12.13 Up)
    • V1.4 수정내용(2020.12.13) 1. 코드정리 2. 자체 로그인 탑재 V1.3.1 수정내용 1. 심플레이아웃과...
    • 2015.05.18
    • Mh Thomsander Layout V1.0
    • [특징] - 페이지안에서 부메뉴가 Box형식으로 열립니다. - 배경이미지를 슬라이드로 출력합니다. ...
    • 2019.09.12
    • Mh White Layout V1.1
    • [ V1.1 특징 ] 1. 본문 상단에 Accordions / TiltedContent 이미지박스 출력선택 - mwea.html 와 ...
    • 2019.04.04
    • Mh LeftMenu 레이아웃 V1.2
    • [특징] - Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다. - 최대한으로 코...
    • 2019.01.07
    • MH FullPage 레이아웃 V1.2
    • 마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다. [Tip] 페이지에 Youtube...
    • 2018.12.04
    • MH Pointy Slider 레이아웃
    • MH_Pointy-Slider 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정...
    • 2018.10.27
    • MH_Sliding 레이아웃
    • MH_Sliding 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정했습니...
    • 2018.10.20
    • 사이트선택 전용 레이아웃 V1.1
    • 홈페이지의 첫 화면에서 두곳의 사이트를 선택하고 싶을때 사용하시면 유용한 레이아웃입니다. [...
    • 2017.06.19
    • XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 2탄
    • XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 최후 버전 https:/...
    • 2016.12.26

XE Of MoonHouse

form 문에서 여백없애기 ################### 1 <form .....> 이런 문은 기본적인 여백이 있습니다. 그럴때마다 style="margin:0px;padding:0px;" 라고 쓰기는 상당히 귀찮은 일일겁니다. 항상 읽어 들이는 style.css 가 있다면 다음과같이 추가 합니다. form {padding:0px; margin:0px} 라고 추가 해 놓으면 어떠한 문장에서든지 form 문은 여백이 없어집니다. 셀렉트 박스에서 내용 우측정렬시키기 ################### 2 <SELECT style="direction:rtl;"> <OPTION>내용</OPTION> <OPTION>내용</OPTION> </SELECT> 간단히 링크점선 없애기 ################### 3 보통 링크의 점선을 없애기위해 자바스크립트를 이용하거나 onfocus=this.blur(); 이런식으로 처리를 하시죠? css 한 줄로 텍스트링크, 이미지링크 모두 처리가 가능합니다. a { selector-dummy : expression(this.hideFocus=true);} 셀렉트박스(풀다운)에 색깔 넣기 ################### 4 <select style="font-size:9pt;"> <option>select color <option style="background-color:000000;color:white" value="#000000">black 자주 사용하는 css 속성 ################### 5 글꼴장식 text-decoration : 장식 글꼴 장식을 지정한다.(none,underline,overline,line-through,blink) none : 장식 제거 underline : 밑줄 overline : 윗줄 line-through : 문자 중간에 선 첨가 blink : 문자 깜빡임 글씨굵기 font-weight : 굵기 글꼴의 굵기를 설정한다. normal : 보통 글씨 bold : 굵은 글씨 lighter : 한단계 가는 폰트 bolder : 한단계 굵은 폰트 수치 : 100 ~ 900 (normal : 400, bold : 700에 해당) font-style : (normal,italic,oblique) 글씨체 font-family : 글꼴 이름, 글꼴 이름, … 글꼴 종류를 지정할 때 사용한다. serif : 명조체 (예 : Times New Roman, 바탕체) sans-self : 고딕체 (예 : Helvetaca, Arial, 돋움체) cursive : 필기체 계열 (예 : Caflisch Script, Adobe Poetica) fantasy : 장식 글꼴 (예 : Critter, Cottonwood ) monospace : 고정 비례 폭 글꼴(예 : Courier New) 글꼴의 이름은 하나만 지정할 수도 있고 컴마(,)로 구분해서 여러 개를 한꺼번에 지정할 수도 있다. 여러 개를 지정할 경우는 지정되어 있는 글꼴 중 앞에서부터 시스템에 설치되어 있는 글꼴이 적용된다. 문자간격 Spacing letter-spacing : 문자간격 text-indent : 문자 들여쓰기 line-height : 줄과 줄사이의 간격을 지정하기 위해 사용 word-spacing : 단어간격 문자와 문자간의 간격이나 단어와 단어의 간격을 설정할 때 사용한다. normal : 표준 글자간격 설정 (Default) 실수값 + 단위 : 표준간격에서 늘어나거나 줄어들게 된다. text-align속성으로 양쪽 정렬(justify)로 설정하면 지정한 결과가 나오지 않는 경우도 있다. 링크걸기 A:link { 스타일 } 보통상태의 링크를 의미한다. A:visited { 스타일 } 이미 방문한 링크를 의미한다. A:active { 스타일 } 클릭했을 때의 링크를 의미한다. A:hover { 스타일 } 커서가 올라갔을 때의 링크를 의미한다. 자주사용되는 글씨... 한글 | "굴림체","돋움체","바탕체","궁서체" 영어 | "Arial","tahoma","verdana","Impact","times","sans-serif","geneva","courier" Filter FILTER: shadow(color=navy,direction=135); FILTER: glow(color=navy,direction=135); writing-mode:tb-rl 글씨를 세우는 역활을 하는것 입니다 문자열 자르기 ################### 6 <style="overflow:hidden; text-overflow:ellipsis;"><nobr> 가로크기가 지정되어 있는경우에 사용할 수 있다. 둥근모서리 구현 ################### 7 <style> .rtop, .rbottom{display:block; background: #FFFFFF;} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: #9BD1FA;} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px; height: 2px} </style> <div id="container" style="background: #9BD1FA" align=center> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> <p>대류커뮤니티 CSS로 둥근 모서리 구현하기</p> <b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div> CSS 만으로 구현하는 롤오버 이미지 ################### 8 <head> 와 </head> 사이에 아래의 구문을 삽입합니다. <style type="text/css"> a.rollover img { border-width:0px; display:inline; } a.rollover img.over { display:none; } a.rollover:hover { border:0px } a.rollover:hover img { display:none; } a.rollover:hover img.over { display:inline; } </style> 그리고 <body> 의 적당한 위치에 아래의 형식을 응용하여 이미지를 삽입하면 됩니다. <a href="주소" class="rollover"><img src="기본이미지"><img src="마우스 오버시 보여줄 이미지" class="over"></a> 일반적인 텍스트에 롤오버 적용하기 ################### 9 <span OnMouseOver="this.style.color='#blue'" OnMouseOut="this.style.color=''">내용</span> 스타일을 이용한 링크에 여러가지 효과 주기 ################### 10 <style type="text/css"> <!-- A:link {color:#666666; text-decoration:none} A:visited {color:#666666; text-decoration:none} A:active {color:#666666; text-decoration:none} A:hover {color:#blue; text-decoration:none} --> </style> 위와 같은 기본적인 스타일 소스에서 A:hover 를 잘 이용하면 다양한 링크효과를 줄 수 있습니다. 밑 줄 A:hover {color:#blue; text-decoration:underline} 굵 게 A:hover {color:#blue; text-decoration:none; font-weight:bold} 크 게 A:hover {color:#blue; text-decoration:none; font-size:11pt} 배경색 A:hover {color:#blue; text-decoration:none; background-color:#blue; padding:2 2 0} 테두리 A:hover {color:#blue; text-decoration:none; border:1 solid #blue; padding:2 3 0} 점선테두리 A:hover {color:#blue; text-decoration:none; border:1 dotted #blue; padding:2 3 0} 누르는효과 A:hover {color:#blue; text-decoration:none; position:relative; top:2; left:2} 스타일을 중복 적용하자 ################### 11 .daerew { color:black;} .daerew_bold { font-weight:bold; } 위의 스타일 두 개를 적용시킬 때 일반적으로 아래와 같이 사용합니다. <span class=daerew>내용</span></span></font> 이것을 보다 편하게 아래와 같이하면 여러개를 손 쉽게 적용할 수 있습니다. <span class='daerewdaerew_bold'>내용</span> 스타일시트를 이용한 글씨 세로로 쓰기 ################### 12 <center> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div style="writing-mode:tb-rl;"> 내용을 적어주세요^^ </div> </td> </tr> </table> </center> 가로 스크롤바만 없애기 ################### 13 <body> 에 아래의 구문을 추가해주면 됩니다. style="overflow-x:hidden;overflow-y:scroll" [ ------------------------------ 예문 ------------------------------ ] <body style="overflow-x:hidden;overflow-y:scroll"> ● 위의 소스가 적용이 안된다면 아래처럼해보세요 <body scroll=auto style="overflow-x:hidden"> 자동 줄바꿈을 통한 테이블 크기 고정 ################### 14 테이블 작업을 하다가 글의 내용이 길어지면 지정된 테이블의 크기가 늘어나는 현상이 있을 수 있습니다. 이럴 때 테이블의 크기를 고정시키고 자동으로 줄바꿈을 해주는 기능입니다. <table> 태그의 아래의 구문을 넣습니다. style="table-layout:fixed;" [ ------------------------------ 예문 ------------------------------ ] <table style="table-layout:fixed;"> ● 적용 시키고자 하는 셀에 아래의 구문을 넣습니다. style="word-break:break-all;" [ ------------------------------ 예문 ------------------------------ ] <td style="word-break:break-all;"> 점선 테이블 만들기 ################### 14 <fieldset style="line-height:15pt; padding:20; border-width:2; border-style:dotted; width:200; height:70; border-color: red;"> 내용 </fieldset> 2라는 숫자는 점선테이블의 두께를 정합니다. boder-style:dotted 는 선의 종류를 점선으로 하라는 명령이죠. 홈페이지 이중 링크 시키기 ################### 15 한 화면에서 두가지 형태의 링크를 주고 싶은경우가 있죠. 서로 색을 달리하거나 폰트크기도 달리한다든지.. CSS에서 링크하는 것들은 pseudo-classes 라고 합니다. pseudo-classes는 활용에 따라 다양하게 적용을 할 수 있습니다. 아래는 간단한 예제입니다. <html> <head> <style type="text/css"> A.blue:link {color: blue} A.red:link {color: red} A.foot:active {color: purple} A.foot:visited {color: blue} </style> </head> <body> <a href="http://startdesign.net" class="blue"> blue</a> <a href="http://startdesign.net" class="red"> red</a> </body> </html> 웹폰트 적용시키기 ################### 16 1. 웹폰트파일을 서버에 올린다. (웹폰트는 확장자가 *.eot파일이나 mwf 등이 있습니다) 2. 인클루드할 스타일 시트를 작성한다. ex) 작성예. 'daerew.css' 라는 파일이 있다고 가정하면 그 내용은 아래와 비슷할겁니다. @font-face { font-family:WEB정; src:url(웹정주소) } body, table, tr, td, select, input, div, form, textarea { background:#ffffff; color:#000000; font-size:9pt; font-family:WEB정; line-height:100% } 3. css를 적용할 html페이지의 head 사이에 다음의 소스를 적용합니다. <style type="text/css"> @import url(daerew.css); </style> 이렇게 소스가 적용이 되면 body, table, tr, td, select, input, div, form, textarea 가 들어가는 모든 부분의 텍스트가 웹정체로 나타나게 되는것이죠 .. ※ 일반적으로 폰트피아(http://www.fontpia.co.kr [새창에서 열기])의 웹정체를 많이 사용하지만 유료라는 단점이 있죠.... 무료 웹폰트도 많은데요 검색사이트에서 웹폰트 치면 많이 나온답니다. 무료 웹폰트 중에는 오늘과내일(http://ttcgi.com [새창에서 열기])의 티티체를 많이 사용하더군요. CSS Background The CSS background properties define the background effects of an element. 1. Set the background color (배경화면 색 조정) This example demonstrates how to set the background color for an element. <html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html> 2. Set an image as the background (배경화면 지정하기) This example demonstrates how to set an image as the background. <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg') } </style> </head> <body> </body> </html> 3. How to repeat a background image (배경화면 반복) This example demonstrates how to repeat a background image. <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat } </style> </head> <body> </body> </html> 4. How to repeat a background image only vertically (배경화면을 세로로 한 줄만 반복) This example demonstrates how to repeat a background image only vertically. <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat-y } </style> </head> <body> </body> </html> 5. How to repeat a background image only horizontally (배경화면을 가로로 한 줄만 반복) This example demonstrates how to repeat a background image only horizontally. <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat-x } </style> </head> <body> </body> </html> 6. How to display a background image only one time (배경화면 반복하지 않게)-<왼쪽 제일 윗 구석에 위치>) This example demonstrates how to display a background image only one time <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: no-repeat } </style> </head> <body> </body> </html> 7. How to place the background image (배경화면을 가운데에 고정) This example demonstrates how to place the image on the page. <html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-position: center; } </style> </head> <body> </body> </html> 8. How to position a background image using % (배경 그림 고정과 배경 그림 위치를 %로 조절) This example demonstrates how to position an image on the page using percent. <html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-position: 30% 20%; } </style> </head> <body> </body> </html> 9. How to position a background image using pixels (배경 그림 고정과 배경 그림 위치를 픽셀로 조절) This example demonstrates how to position an image on the page using pixels. <html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-position: 50px 100px; } </style> </head> <body> </body> </html> 10. How to set a fixed background image (배경화면을 왼쪽 제일 윗 구석에 고정) This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page. <html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> </head> <body> <p>내용</p> </body> </html> 11. All the background properties in one declaration (배경화면 색깔,배경화면 가운데에 고정) This example demonstrates how to use the shorthand property for setting all of the background properties in one declaration. <html> <head> <style type="text/css"> body { background: #00ff00 url('smiley.gif') no-repeat fixed center; } </style> </head> <body> <p>내용</p> </body> </html>
Prev 69 70 71

Xe Total

게시판 Category 제목 글쓴이 날짜 조회수 추천수
Tip moon house에 사용중인 소스들 설명(3/23)
팔공산 2007.12.16 5680
Xe 메뉴에 이미지버튼 사용하기
팔공산 2007.12.13 8462
Xe 1 권한없는 모듈을 만났을때 로그인 페이지 띄우기.. 팔공산 2007.12.11 18041
Xe 2 top 메뉴를 만들어보자 - layout에서 topmenu 항목만들기 팔공산 2007.12.11 14460
Tip 22 음악플레이기 3종세트 설치 방법 file
팔공산 2007.12.09 19125
1 BlooZ Skin Ver 1 팔공산 2007.12.09 3655
위젯 1 sound4u님의 최근게시물 변형 file 팔공산 2007.12.08 17220
2 애플 스타일(?) 최신글 스킨 - 자유롭게 가로폭 조정 가능 팔공산 2007.12.08 4463
Any Color 세로 롤오버 메뉴형
팔공산 2007.12.08 4097
최신글들 아이콘이미지
팔공산 2007.12.07 3034