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

  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개 첨부 됨 ( / )


The ultimate CSS tools for web designers.


CSSmatic 홈페이지로 이동

 

웹페이지에 사용할 수 있는 재미있는 CSS 효과 4가지를 자동으로 생성해 주는 도구를 제공합니다. 

이 사이트에서 몇번의 버튼 클릭만으로 멋진 CSS 효과를 만들 수 있습니다. 

 

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

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

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

0개 첨부 됨 ( / )


CSS 로 오목한 모양과 볼록한 모양을 표현하는 방법입니다.

 

<div style="
  border:1px solid #222;
  box-shadow: 0 1px 1px #424440 inset, 0 -1px 0px #777 inset;
  padding: 2px 2px;
">
</div>

Arrow Down

이렇게 보여요

 

<div style="
  border:1px solid #222;
  box-shadow: 0 3px 3px #424440 inset, 0 -1px 0px #777 inset;
  padding: 2px 2px;
">
</div>

Arrow Down

이렇게 보여요

 

<div style="
  background:#ffb27d;
  border:1px solid #222;
  box-shadow: 0 3px 3px #424440 inset, 0 -1px 0px #555 inset;
  padding: 2px 2px;
">
<p>...</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 1px 1px #999 inset;
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 2em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 3px 3px #999 inset;
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 2em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 5px 5px #999 inset, 0 -5px 5px #444 inset; 
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 1em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 8px 8px #999 inset, 0 -8px 8px #444 inset; 
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 1em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

 

<div style="
  box-shadow: 0 8px 8px #c8ebfa inset, 0 -10px 0px #065d82 inset;
  background: #007aae;
  border-radius: 15px;
  border: 1px solid #0e4d68;
  padding: 3px 3px;
  min-height: 1em;
  width:200px;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

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

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

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

0개 첨부 됨 ( / )


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