<style type="text/css">
@charset "UTF-8";
button {
  overflow: hidden;
  position: relative;
  margin: 10px;
  padding: 10px 30px;
  border: 1px solid #F85F5F;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMDcwNDI4IiB5MT0iMC42MDA1ODIiIHgyPSItMC4wNzA0MjgiIHkyPSIwLjM5OTQxOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZWFlYSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZmI5YTlhIi8+PHN0b3Agb2Zmc2V0PSI4NSUiIHN0b3AtY29sb3I9IiNmODVmNWYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYjlkOWQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: linear-gradient(-80deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #feeaea), color-stop(25%, #fb9a9a), color-stop(85%, #f85f5f), color-stop(100%, #fb9d9d));
  background-image: -moz-linear-gradient(170deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), -moz-linear-gradient(#feeaea, #fb9a9a 25%, #f85f5f 85%, #fb9d9d);
  background-image: -webkit-linear-gradient(170deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), -webkit-linear-gradient(#feeaea, #fb9a9a 25%, #f85f5f 85%, #fb9d9d);
  background-image: linear-gradient(-80deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), linear-gradient(#feeaea, #fb9a9a 25%, #f85f5f 85%, #fb9d9d);
  background-repeat: repeat-x;
  font-family: "맑은 고딕";
  font-weight: bold;
  font-size: 13px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
}
button:active {
  background-color: #FA8181;
  background-image: none;
  -moz-box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.6);
}
</style>
 

 

 

<p>
<button type="button"> 버튼스타일 </button>
</p>

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


PREVIEW BUTTON

 

<style type="text/css">

.button_example{
border:1px solid #a8c1d5; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -2px -2px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #CEDCE7; background-image: -webkit-gradient(linear, left top, left bottom, from(#CEDCE7), to(#596a72));
 background-image: -webkit-linear-gradient(top, #CEDCE7, #596a72);
 background-image: -moz-linear-gradient(top, #CEDCE7, #596a72);
 background-image: -ms-linear-gradient(top, #CEDCE7, #596a72);
 background-image: -o-linear-gradient(top, #CEDCE7, #596a72);
 background-image: linear-gradient(to bottom, #CEDCE7, #596a72);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#CEDCE7, endColorstr=#596a72);
}

.button_example:hover{
 border:1px solid #8aabc5;
 background-color: #acc4d6; background-image: -webkit-gradient(linear, left top, left bottom, from(#acc4d6), to(#434f55));
 background-image: -webkit-linear-gradient(top, #acc4d6, #434f55);
 background-image: -moz-linear-gradient(top, #acc4d6, #434f55);
 background-image: -ms-linear-gradient(top, #acc4d6, #434f55);
 background-image: -o-linear-gradient(top, #acc4d6, #434f55);
 background-image: linear-gradient(to bottom, #acc4d6, #434f55);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#acc4d6, endColorstr=#434f55);
}
</style>

 

PREVIEW BUTTON

 

<p>
 <a class="button_example" href="#">BUTTON Style</a>
</p>

 

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


댓글 편집기를 필요할 때만 펼쳐서 사용할 수 있도록 접어두는 방법입니다. 

  1. CKEditor 플러그인 중 detail 플러그인을 설치합니다. 
  2. XE 사용자라면 이 detail 플러그인에서 정의한 CSS를 XE의 레이아웃의 CSS 등록하는 부분에 등록합니다. 
  3. 필요한 부분에 <details><summary> 제목에 해당하는 부분 </summary> 감추어 두려는 부분 </details> 처럼 넣어 주면 됩니다. 

 

<details><summary> <img src="/@PublicData/images/Bullet/00427.gif"> 댓글({$oDocument->getCommentcount()}) 남기기...</summary>
<div class="cmt_editor" style="margin-top:30px"|cond="$mi->cmt_wrt_position=='cmt_wrt_btm' && $oDocument->getCommentcount()">
...
...
...
<!--@end-->
</div>
</details><br />

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


게시판에 글을 쓰거나 홈페이지 작성시 표, 이미지 등을 삽입하는 경우 폭이 좁은 스마트폰 등에서 표나 이미지가 오른쪽 옆으로 삐죽 삐져나오는 경우가 발생합니다. 

웹페이지 자체는 가변형인데 추가적으로 작성되는 글에 삽입되는 내용이 가변형이 아니라서 정해진 크기대로 표현되는 경우입니다. 

 

물론 width 값은 100% 등 % 로 작성하면 되겠지만, 경우에 따라서는 % 를 사용할 수 없는 경우도 있겠죠? 예를 들면 가로가 600px을 넘기면 안되는 표 등... 

 

이런 경우 max-width 라는 css 속성이 준비되어 있었네요. 

아래는 max-width 를 이용해서 div 배경으로 이미지를 넣고 그 안에 다른 div 를 넣어 시화처럼 표현한 예시입니다. 

 

여기에 내용 입력

 

<div style="
   padding-top:60px;
   background-image:url('https://이미지URL/Animated-GIF-Photography14.gif');
   margin:auto;
   width:100%;
   max-width:610px;
   height:340px;
   border-radius:15px 15px 15px 15px;
">

<div style="
   background-color: #fff; 
   background-color: rgba( 255, 255, 255, 0.5 ); 
   margin: 40px ;
   border-radius:8px;
">
<p><span style="color:#000000;">여기에 내용 입력</span></p>
</div>

</div>

 

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


 

자전거에 대한 생각

아하 이렇게 배경이 흐릿
글씨는 선명하게 작성 됨.

 

 

<div style="
   background-color: #fff; 
   background-color: rgba( 255, 255, 255, 0.5 ); 
   margin: 40px ; 
   border-radius:8px;
">
<p>...</p>
</div>

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 29 Next
/ 29
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...