beomil ideas

To control multiple class names in css. input[readonly=’readonly’] { display:none; }; .views-field[class*=’views-field-view’] { display:block; }input[readonly=’readonly’] { display:none; }; .views-field[class*=’views-field-view’] { display:block; }

Sometimes float-left or float-right cannot make a center align and we can use a margin with Width but there is a simple way as below. #test { float: right; position: relative; left: -50%; }   #test li { float: left; position: relative; left: 50%; border: 1px solid red; }#test { float: right; position: relative; left: -50%; } #test li { float: left; position: relative; left: 50%; border: 1px solid red; } <ul id="test"> <li>red</li> <li>yellow</li> <li>white</li> <li>blue</li> <li>black</li> </ui><ul id="test"> <li>red</li> <li>yellow</li> <li>white</li> <li>blue</li> <li>black</li> </ui>

Case as below. <div class="non-floated-parent" style="background-color:#333; border:1px solid #900;"> <div class="floated-child" style="float:left; width:200px; height:200px; background-color:#000;"> This is a floated element as "float:left; width:200px; height:200px; background-color:#000;" </div> </div><div class="non-floated-parent" style="background-color:#333; border:1px solid #900;"> <div class="floated-child" style="float:left; width:200px; height:200px; background-color:#000;"> This is a floated element as "float:left; width:200px; height:200px; background-color:#000;" </div> </div> This is a floated element as “float:left; width:200px; height:200px; background-color:#000;” Solution 1. Use The clear fix <div class="non-floated-parent" style="background-color:#333; border:1px solid #900;"> <div class="floated-child" style=" float:left; width:200px; height:200px; background-color:#000;"> This is a floated element as "float:left; width:200px; height:200px; background-color:#000;" </div>   <div style="clear: both; "></div>   </div><div class="non-floated-parent" style="background-color:#333; border:1px solid #900;"> <div class="floated-child" style=" float:left; width:200px; height:200px; background-color:#000;"> This […]

ime-mode 속성은 IME(Input Method Editor)의 상태를 반환하거나 설정합니다. 로그인 폼에서 아이디와 비밀번호를 입력하는 경우나 우편번호를 찾기 위해서 동이름을 입력하는 경우 한글/영문을 기본으로 지정해 놓으면 상당히 편리한데 이런 경우 사용하는 속성이라고 할 수 있습니다. ime-mode 속성의 값은 아래와 같이 3가지로 지정할 수 있습니다. auto 기본값으로 ime-mode 값이 지정되지 않은 것과 같습니다. active 활성화 된 상태입니다. 값을 입력하면 기본적으로 한글이 입력됩니다. 우편번호를 찾기 위해서 동이름을 입력하는 경우 많이 사용됩니다. <input type=”text”style=”ime-mode:active;”><input type=”text”style=”ime-mode:active;”> inactive 비활성화 된 상태입니다. 값을 입력하면 기본적으로 영문이 입력됩니다. <input type=”text”style=”ime-mode:inactive;”><input type=”text”style=”ime-mode:inactive;”> disabled IME를 사용할 수 없는 경우입니다. 한영키를 눌러도 한글로 변환하지 않고 영문만 입력 가능합니다. 아이디와 비밀번호는 한글이 허용되지 않으므로 이런 경우 사용할 수 있습니다. <input type=”text” style=”ime-mode:disabled;”><input type=”text” […]

A. 배경이미지의 반복 (background-repeat 속성) • 속성 : background-repeat • 값 : repeat, repeat-x, repeat-y, no-repeat, inherit •기본값 : repeat • 적용대상 : 모든 요소 이 속성은 요소의 배경 이미지가 반복되는 방향을 지정한다. 이러한 반복의 시작은 background-position 값으로 정한다. 속성 값에 대한 의미는 다음과 같다. repeat : 수평과 수직으로 반복된다. repeat-x : 수평으로 반복된다. repeat-y : 수직으로 반복된다. no-repeat: 반복하지 않고 한 번만 표시한다. body { background-image:url(’paper.gif’); background-repeat:repeat-y; }body { background-image:url(‘paper.gif’); background-repeat:repeat-y; } B. 배경이미지의 이동, 고정 (background-attachment 속성) • 속성 : background-attachment • 값 : scroll, fixed, inherit • 기본값 : scroll • 적용대상 : 모든 요소 이 속성은 배경 이미지가 요소와 함께 스크롤될지 안될지 결정한다. 대부분 body에 적용한다. 속성 값에 대한 의미는 […]