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

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

물론 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>

 

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

 

The ultimate CSS tools for web designers.

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

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

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

이렇게 보여요

XE 댓글을 보면 가장 최근에 작성한 글이 가장 아래로 내려갑니다. 

이렇게 되면 최신 글을 보기위해 항상 아래쪽으로 스크롤을 해야 하겠죠. 

그래서 댓글을 가장 최신 글이 맨 위쪽에 위치하도록 설정하면 어떨까 생각해 봤습니다. 

 ...xe/modules/comment/queries/getCommentPageList.xml

<query id="getCommentPageList" action="select">
    <tables>
        <table name="comments" alias="comments" />
        <table name="comments_list" alias="comments_list" />
    </tables>
    <columns>
        <column name="comments.*" />
        <column name="comments_list.depth" alias="depth" />
    </columns>
    <conditions>
        <condition operation="more" column="comments.status" var="status" pipe="and" />
<condition operation="equal" column="comments_list.document_srl" var="document_srl" notnull="notnull" pipe="and" />
        <condition operation="equal" column="comments_list.comment_srl" var="comments.comment_srl" filter="number" pipe="and" />
        <condition operation="more" column="comments_list.head" default="0" pipe="and" />
        <condition operation="more" column="comments_list.arrange" default="0" pipe="and" />
    </conditions>
    <navigation>
        <index var="list_order" default="comments_list.head" order="desc" />
        <index var="list_order" default="comments_list.arrange" order="asc" />
        <list_count var="list_count" default="list_count" />
        <page_count var="page_count" default="10" />
        <page var="page" default="1" />
    </navigation>
</query>

18번째 줄의 order="asc" /> Arrow Right  order="desc" /> 로 수정합니다.