IT정리노트

블로그 이미지

Edward. K

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

13. UI 생성 [Step. 1 스타일 시트 ]

EkNote Project 2008. 7. 31. 14:26
반응형
 
13. UI 생성    [Step. 1 스타일 시트  ]
   
  스타일시트(Cascading Style Sheets )란?   웹 페이지의 '통일성'을 위한 파일이다.
                                                        - WIKI 백과 참고 -

 다음 스타일 시트를     ekNote(프로젝트폴더)/view/css/ 에 저장하도록 한다.   

/* 공통  -해당 태그에 자동으로 지정.*/
    body {  
      scrollbar-face-color:#FFFFFF;
      scrollbar-highlight-color: #999999;
      scrollbar-3dlight-color: #FFFFFF;
      scrollbar-shadow-color: #CCCCCC;
      scrollbar-darkshadow-color: #FFFFFF;
      scrollbar-track-color: #FFFFFF;
      scrollbar-arrow-color: #999999;
      font-family:Tahoma,굴림;
      font-size:9pt;
      color:#222222;
      margin-left: 0px;    margin-top: 0px;    margin-right: 0px;    margin-bottom: 0px;
    }
    td,select,div,form,textarea,center,option,pre,blockquote {font-size:12px; font-family:Tahoma,굴림; color:#555555; }
    img {border:0}    

    a:link { text-decoration:none; color:#555555; }
    a:visited { text-decoration:none; color:#555555; }
    a:active { text-decoration:none; color:#555555; }
    a:hover { text-decoration:underline; color:#333333}

/* font */
    .small {font-family:돋움; font-size:11px;}
    .bold {font-weight:bold;}
    .px {font-family:Verdana, tahoma; font-size:9px;}    
    .red {color:#ff0000;}
    .redsmall {font-family:돋움; font-size:11px; color:#FF0000;}
    .redbold {color:#FF0000;font-weight: bold;}
    .redboldsmall {font-family:돋움; font-size:11px; color:#FF0000; font-weight:bold}
    .blue {color:#0000FF;}
    .bluesmall {font-family:돋움; font-size:11px; color:#0000FF;}    
    .blueboldsmall {font-family:돋움; font-size:11px; color:#0000FF; font-weight:bold}
    .graybluebold {color:#353D87;font-weight:bold}        
    .orange {color:#FF6600;}
    .text_align_right {text-align:right;}    
    .darkpurple {color:#502A7C;}
    .gray777 {color:#777777;}

/* input 관련 */
  .search {border:solid 1;border-color:#C8C8C8; background-color:#f7f7f7; height:20px; cursor:hand; font-family:tahoma; color=#676767; font-size:7.5pt; font-weight:bold;}
    .input {border:solid 1; border-color:#C8C8C8; background-color:#FFFFFF; font-family:Tahoma,굴림;}
  .input_login {border:solid 1; border-color:#C8C8C8; background-color:#FFFFFF; width:85; height:18; font:tahoma; font-color::#777777; font-size:12px}
    .input_modify {border:solid 1; border-color:#C8C8C8; background-color:#F1F1F1; width:85; height:18; font:Tahoma,굴림; font-color::#777777; font-size:12px}
  .input_hidden{ height:17px; color: white; font-family:Tahoma,굴림; font-size:9pt; BORDER-RIGHT: white; BORDER-TOP:white; BORDER-LEFT: white; BORDER-BOTTOM: white }
    .textarea {font-family:돋움; color:#555555; border:1 solid; border-color:#C8C8C8; background-color:#ffffff; padding:5;}
    .select{ color: #222222; background-color:white; border:1 solid silver ; font-family:Tahoma,굴림; font-size:9pt}
    .submit {border:solid 1;font-family:굴림;font-size:9pt;color:white;background-color:black;height:19px}

/* table 관련 */
    .table_line {background-color:#e1e1e1; height:1;}
    .div_line {background-image:url(../images/board/div_line.gif); height:1;}
    .line_bar{background-image:url(../images/board/line_bar.gif); height:1;}

    .title_border {background-color:#B1D0D9; height:1;}
    .table_title {background-color:#EAF5F4; text-align:center; font-weight:bold;}
    .table_pd_left10 {padding-left:10;}
    .table_content {padding:10; line-height:18px;}
    .table_border {background-image:url(../images/customer/table_topline.gif); height:4;}
    .table_bar {background-image:url(../images/customer/table_bar.gif); width:2; height:36;}
    .table_num {text-align:center; padding:5;}
    .table_sub {padding-left:10; padding:5;}
    .table_cen {text-align:center;}


    .title_cenbold {text-align:center; font-weight:bold;}
    .title_bg {background-color:#E4F1F5;}        
    .table_pd_right10 {padding-right:10; text-align:right;}    
    .table_cpd_5 {padding:5;}    
    .table_lineh {line-height:18px;}
    .table_view {background-color:#F6FFFE; padding:5;}
    .table_notice {background-color:#F4FAFA; font-weight:bold; padding-left:10}


CSS 사용방법

  1. 직접
      <style>
           .title_cenbold {text-align:center; font-weight:bold;}
      </style>
  2.   Link
      <head>
           <link href="../../css/common.css" rel="stylesheet" type="text/css">
      </head>
  3.  css 적용
       tag에 직접 적용한 경우는 해당 태그에 자동으로 적용이 되며,
       사용자 지정 스타일 시트를 적용할 tag에 다음과 같이 추가한다.
        <td height="28" class="table_title">제목입니다</td>


CSS 적용 /미적용 비교

- 스타일 시트 적용전
[#M_[적용전 화면 보기]|[닫기]|

사용자 삽입 이미지


- 스타일 스트 적용후

사용자 삽입 이미지

_M#]
반응형
Posted by Edward. K
블로그 이미지

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

by Edward. K

공지사항

    최근...

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

태그

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

글 보관함

«   2025/07   »
일 월 화 수 목 금 토
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

티스토리툴바