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

공지사항

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • linux ls 날자 형식 변경 + 파일사이즈 형식 변경 1
  • linux 설치된 APACHE HTTPD, TOMCAT 버전 확⋯
  • 통신(포트) 상태 확인 > ping, telnet, echo ⋯
  • Referenced file contains errors (ht⋯
  • 이클립스에서 SVN 연결 해제.
  • 더 보기
  • # Local Network Messenger 'LanChat'⋯
    낸쳇 ㆍ 01.19
  • 너무 좋은 글입니다!
    More ㆍ 11.06
  • 참 별것도 아닌게 신경쓰였는데 신기하네요 그림판이 켜었었습니다.
    감사 ㆍ 10.12
  • 감사합니다! 기존에 그림판이 켜 있을 때 종료한 경우, 다음에 ⋯
    굴링굴링 ㆍ 10.11
  • 와 같은 증상이었는데 그림판이 범인이었습니다. 감사합니다!
    도시괴담 ㆍ 09.10

태그

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

글 보관함


  • 2021/12
    (3)

  • 2021/11
    (7)

  • 2021/09
    (1)
«   2023/01   »
일 월 화 수 목 금 토
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

링크

카테고리

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

카운터

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

IT정리노트

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

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

관리자 메뉴

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

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바