Category: Html

form 태그 사용시 action 속성 추가
액션 없이 자바스크립트로 우회적으로 submit 하는 경우라도

<form action="">

과 같이 빈값으로 속성을 넣어주세요.

단독 태그의 닫는 태그 사용
단독 태그의 경우

<input id="" name="" type="hidden" />
<img />

과 같이 ‘/’ 로 닫아주세요.
input, br, img 태그가 해당됩니다. 개발쪽에선 주로 input 태그나, 동적으로 써주는 img,br태그 확인해주시면 되겠습니다.

속성의 소문자 처리
doctype xhtml에서는 엘리먼트의 모든 속성값이 소문자입니다.
개발파트에서는 주로 onclick 같은 이벤트 핸들러가 해당사항이 되겠습니다. onClick, onChage -> onclick, onchange
disable, readonly, checked 등 어트리뷰트는 속성=”값” 형태로 작성되어야 합니다.

ex) <input readonly="readonly" type="text" />
      <input readonly="readonly" type="text" />

textarea의 cols, rows 속성 추가
이 부분은 퍼블리싱단계에서 일부 누락이 있던듯 합니다. 차후 검수시 추가할 예정입니다.
작업시 발견하실 경우 아래와 같이 속성 추가 부탁드립니다. 빈 값으로 추가하시면 됩니다.

ex) <textarea cols="" rows=""></textarea>

html,jsp페이지 내의 자바스크립트 선언시 올바른 타입 선언 및 cdata 처리
페이지 내에서 인라인으로 자바스크립트 선언시 아래와 같이 타입을 선언하고 cdata로 감싸주세요.

<script type="text/javascript">
// <![CDATA[

// ]]>
</script>

추가적으로 anchor 태그(<a>)에 onclick 이벤트를 직접 걸 경우 hash값이 url에 들어가지 않게 하기 위해 false를 리턴해주시기 바랍니다.

ex) <a href="#">링크</a>

한줄 글자수 제한

.text {
    width:100px; /* %도 가능함 */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

– Block레벨 테그에서만 적용이 됩니다.
– overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함
– text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함
– white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능)

여러줄 글자수 제한

.text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: box;
      margin-top:1px;
      max-height:80px;
      overflow:hidden;
      vertical-align:top;
      text-overflow: ellipsis;
      word-break:break-all;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3
  }

.cont_wrap {display:flex; display:-webkit-flex; display:-webkit-box; display:-ms-flexbox;}
.cont_wrap .input {display:block; flex:1; -webkit-flex:1; -webkit-box-flex:1; -ms-flex:1;}
.cont_wrap .txt {width:50px;}
.cont_wrap .btn {}
.cont_wrap .tel {display:block; flex:1; -webkit-flex:1; -webkit-box-flex:1; -ms-flex:1;}
.cont_wrap .dash {width:10px;}


<div class="cont_wrap">
      <span class="input">
         <input type="text" />
      </span>
      <span class="txt">원</span>
      <a class="btn" href="#">쿠폰적용</a>
</div>
&nbsp;
<div class="cont_wrap">
     <input class="tel" type="text" />
     <span class="dash">-</span>
     <input class="tel" type="text" />
     <span class="dash">-</span>&lt;
     <input class="tel" type="text" />
</div>

화면 사이즈에 따라 input 유동적으로 사이즈 변경된다.

ie 11 이상부터 지원되며,
webkit 추가 해야함.
익스에서 사용시 -ms- 추가하면 ie 10부터 적용됨.

* flex:1; 넣은 요소에 display:block; 을 꼭 넣어줘야함.(안드로이드 하위버전을 위해…(화웨이))