IT정리노트

블로그 이미지

Edward. K

메멘토적 기억능력을 소유한 개발자 노트.

'Programming/CSS'에 해당되는 글 5건

제목 날짜
  • CSS 이미지 불투명 속성 적용 2020.09.23
  • input ime-mode 옵션 2009.03.26
  • 스타일 시트로 textarea 영역 자동늘리기 2009.03.13
  • textarea 길이 자동증가 Style 2008.12.03
  • 라운드 박스 만들기 2008.07.31

CSS 이미지 불투명 속성 적용

Programming/CSS 2020. 9. 23. 17:23
반응형

아래와 같은 코드에서 배경에 불투명이미지를 삽입하고자 한다.

  <div class="main_container">
        <div class="small_container">
            <div class="main_box2">                  
                <div> 
                     <h4>About</h4>
                    <p >11111</p>
                    <a href="/1.html"><img src="/ico_next.png" alt=""></a>
                </div>
            </div>
            <div class="main_box3">
                <div>
                    <h4>About</h4>
                    <p>22222</p>
                    <a href="/2.html"><img src="/ico_next.png" alt=""></a>
                </div>
            </div>
            <div class="main_box4">
                <div>
                     <h4>33333</h4>
                     <a href="/3.html"><img src="/ico_next.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>

opacity 를 사용하게 되면 자식까지 영향을 받게 되므로..linear-gradient 를 사용하면된다.

.small_container>div.main_box3 {  
    /*  하위 단까지  opacity  영향을 받음
     background: url(/web/upload/free_design/bn_bg02.jpg);  
     background-size: cover;   
     background-position: center; 
     opacity:0.5; 
    */
    /* 이미지만 영향 받기 위해 */
    background: linear-gradient( rgba(239,239,239,.5), rgba(239,239,239,.5) )
              , url('/web/upload/free_design/bn_bg02.jpg'); 
    background-size: cover;    
    background-position: center;
}
.small_container>div.main_box3>div>p{color:#484848; font-weight:bold;} 
  

반응형
Posted by Edward. K

input ime-mode 옵션

Programming/CSS 2009. 3. 26. 17:45
반응형

인풋 박스 입력되는 언어 설정을 할때 사용..

<input type="text" style="ime-mode:active;">

[ime-mode의 옵션]
  auto : 한/영 변환이 자유로움.
  active : 한글 기본, 한/영 변환이 자유로움
  inactive : 영문 기본, 한/영 변환이 자유로움
  disabled : 영문 기본, 한/영 변환이 안됨, 영문/숫자만 입력 가능


반응형
저작자표시 비영리 변경금지 (새창열림)
Posted by Edward. K

스타일 시트로 textarea 영역 자동늘리기

Programming/CSS 2009. 3. 13. 10:18
반응형
<textarea name="memo" style="width:100%;height:100;border:1 solid #333333;overflow:visible;text-overflow:ellipsis;">
</textarea>

반응형
저작자표시 비영리 변경금지 (새창열림)
Posted by Edward. K

textarea 길이 자동증가 Style

Programming/CSS 2008. 12. 3. 17:26
반응형

<textarea name="comment" class="input" style="width:99%;height:50;overflow-y:visible;"></textarea>
반응형
Posted by Edward. K

라운드 박스 만들기

Programming/CSS 2008. 7. 31. 13:11
반응형
1. 이미지 없이
   http://www.spiffycorners.com/
    실행화면: 

         

 <style type="text/css">
    .spiffy{display:block}
    .spiffy *{  display:block;  height:1px;  overflow:hidden;  font-size:.01em;  background:#A8F385}
    .spiffy1{  margin-left:3px;  margin-right:3px;  padding-left:1px;  padding-right:1px; 
                 border-left:1px solid #cfe8b8;  border-right:1px solid #cfe8b8;  background:#b9ee9b}
    .spiffy2{  margin-left:1px;  margin-right:1px;  padding-right:1px;  padding-left:1px;
                 border-left:1px solid #e7e1d6;  border-right:1px solid #e7e1d6;  background:#b5ef96}
    .spiffy3{  margin-left:1px;  margin-right:1px;  border-left:1px solid #b5ef96;  border-right:1px solid #b5ef96;}
    .spiffy4{  border-left:1px solid #cfe8b8;  border-right:1px solid #cfe8b8}
    .spiffy5{  border-left:1px solid #b9ee9b;  border-right:1px solid #b9ee9b}
    .spiffyfg{  background:#A8F385; height:30px; }
</style>

<table height='50' width='300' bgcolor='black'>
    <tr>
        <td>
            <div>
              <b class="spiffy">
              <b class="spiffy1"><b></b></b>
              <b class="spiffy2"><b></b></b>
              <b class="spiffy3"></b>
              <b class="spiffy4"></b>
              <b class="spiffy5"></b></b>
              <div class="spiffyfg">    간단하게 만들어 지네요.  </div>
              <b class="spiffy">
              <b class="spiffy5"></b>
              <b class="spiffy4"></b>
              <b class="spiffy3"></b>
              <b class="spiffy2"><b></b></b>
              <b class="spiffy1"><b></b></b></b>
            </div>
        </td>
    </tr>
</table>









2. 이미지 적용
   http://spiffybox.com/
  실행 화면 :
   

  [#M_[필요한 이미지]|[Close]|

사용자 삽입 이미지


<style type="text/css">
/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{ background: transparent url(demobox.png) no-repeat bottom right}
.cssbox{
            width:335px !important;/* intended total box width - padding-right(next) */
            width: 320px; /* IE Win = width - padding */
            padding-right:15px; /* the gap on the right edge of the image (not content padding) */            
            margin:20px auto/* use to position the box */
            }
           
.cssbox_head{
            background-position:top right; /* set the top-right image */
            margin-right:-15px; /* pull the right image over on top of border */
            padding-right:40px/* right-image-gap + right-inside padding */
            }

.cssbox_head h2{
            background-position:top left; margin:0; /* set the top-left image */
            border:0; /* reset main site styles*/
            padding:25px 0 15px 40px; height:auto !important; height:1%/* padding-left = image gap + interior padding ... no padding-right */
            }
.cssbox_body{
            background-position:bottom left; margin-right:25px; /* set the lower-left corner image */
            padding:15px 0 15px 40px/* interior-padding right */
            }
</style>

<div class="cssbox"> 
    <div class="cssbox_head"> 
        <h2>This is a header</h2> 
    </div> 
    <div class="cssbox_body"> 
        <p>This is for your content.</p> 
    </div> 
</div> 
_M#]
직접 해보세용...오오...조쿠나아~~



반응형
Posted by Edward. K
이전페이지 다음페이지
블로그 이미지

메멘토적 기억능력을 소유한 개발자 노트.

by Edward. K

공지사항

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • 더 보기

태그

  • EditPlus
  • toad
  • 컴퓨터 관리
  • 이클립스
  • Eclipse
  • 개한민국
  • sqlgate
  • 미네르바
  • netbeans
  • tomcat
  • ERwin
  • egov
  • flex
  • 캡쳐툴
  • android
  • Jboss
  • 전자정부프레임워크
  • Graphic
  • iBATIS
  • 가상화폐무료
  • Flash Player
  • 플래시 게임
  • 이미지 편집
  • 중독성게임
  • 사업 이야기
  • EkNote
  • rocketdock
  • eclipse plugin
  • 색상코드표
  • STS

글 보관함

«   2025/10   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

링크

카테고리

분류 전체보기 (792)
행운이와함께 (1)
EkNote Project (18)
ARIS (0)
Android (2)
LINK (39)
UML (9)
Programming (154)
Cobol (0)
ASP (0)
CSS (5)
C_C++ (2)
IBatis (2)
JSP (3)
JAVA (76)
JavaScript (44)
PHP (2)
Utility (76)
Protable (3)
MobileProgram (4)
SKT (0)
KTF (0)
LGT (0)
자료들 (4)
DB (82)
mongoDB (0)
MySQL (8)
Oracle (61)
MSSQL (4)
Graphic (8)
Flash (3)
PhotoShop (3)
SourceFactory (4)
Collection (73)
작가의기막힌상상력 (14)
미소를찾아보는공간 (44)
내심장은작동중일까 (6)
멀더와스컬리의노트 (3)
이건어디에사용할까 (6)
Edward (275)
나만 알기엔 아까워 (100)
기억하기 위한 기록 (123)
시선이 머무는 공간 (50)
숨기고 싶은 이야기 (2)

카운터

Total
Today
Yesterday
방명록 : 관리자 : 글쓰기
Edward. K's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

IT정리노트

메멘토적 기억능력을 소유한 개발자 노트.

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • 분류 전체보기 (792)
    • 행운이와함께 (1)
    • EkNote Project (18)
    • ARIS (0)
    • Android (2)
    • LINK (39)
    • UML (9)
    • Programming (154)
      • Cobol (0)
      • ASP (0)
      • CSS (5)
      • C_C++ (2)
      • IBatis (2)
      • JSP (3)
      • JAVA (76)
      • JavaScript (44)
      • PHP (2)
    • Utility (76)
      • Protable (3)
    • MobileProgram (4)
      • SKT (0)
      • KTF (0)
      • LGT (0)
      • 자료들 (4)
    • DB (82)
      • mongoDB (0)
      • MySQL (8)
      • Oracle (61)
      • MSSQL (4)
    • Graphic (8)
      • Flash (3)
      • PhotoShop (3)
    • SourceFactory (4)
    • Collection (73)
      • 작가의기막힌상상력 (14)
      • 미소를찾아보는공간 (44)
      • 내심장은작동중일까 (6)
      • 멀더와스컬리의노트 (3)
      • 이건어디에사용할까 (6)
    • Edward (275)
      • 나만 알기엔 아까워 (100)
      • 기억하기 위한 기록 (123)
      • 시선이 머무는 공간 (50)
      • 숨기고 싶은 이야기 (2)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바