Trio 홈페이지 - CSS 매뉴얼 - 일반 사항

CSS 매뉴얼 일반 사항

CSS2 규격 번역문

CSS1 규격 번역문

HTML 규격 스타일쉬트

<STYLE class="css/text">....</STYLE> 사이에 내용을 명시한다.
Style 명령은 { .... }로 묶여야 한다(복수의 빈칸은 구별 하지 않는다).
지정 변수와 변수(수치) 사이는 콜론(:)으로 구분 한다.
여러 변수를 지정 할 때는 쎄미콜론(;)으로 구분 한다. 마지막에도 해 두는 것이 안전하다.
Style 명령은 대소 문자를 구별하지 않는다.

동시지정

Grouping:복수의 엘레멘트를 한번에 같은 스타일로 지정 할 수 있다.
H1, H2, H3, H5 {color: blue;} /* 해당 헤딩을 모두 청색으로 지정.*/

참고사항(Comments)

/* 참고사항으로 수행하지 않음 */

중요 표시

important:중요하다는 표시로 어떤 경우에나 이 것이 적용 된다.
H1 {color: blue ! important;}

표시(display):

CSS1 규격 표시(display) 설명

값은 block, inline, list-item, none

block : 앞뒤의 요소 Element에 대해 줄나누기를 한다.
div, table, h1, ...
inline : 앞뒤의 요소 Element에 대해 줄나누기를 하지 않는다.
span, img, ...
list-item: block과 동일한 기능에 목록 표시가 추가된다.
dt, ol, ul, ...
none : 감춘다.
.hide {display: none;}

스타일 지정 방식

스타일 지정
style:

스타일 지정는 다른 곳에 지정 해도 되는 경우가 많으나 <HEAD>...</HEAD>에서 하는 것이 원칙이고 안전 하다.
같은 스타일을 중복해서 지정 했을 때는 나중에 지정 한 것이 적용된다.
따라서 이곳의 예제에서는 Table을 많이 사용한다.

기본 지정:
      <STYLE type="text/css">
         P { background: yellow; color: black }
      </STYLE>

불러 쓸 때:
      <P>불러 쓸 때</P>

@import로 불러 올 때는

   먼저 설정 필요
      <STYLE type="text/css" MEDIA="screen, projection">
         @import url("http://trio.co.kr/pub/stexpub.css");
            /* 또는 @import url(../../pub/stexpub.css); */
         h4 { background: blue }
      </STYLE>
   불러 쓸 때:
      <P class=title> 불러 온 화일에 지정 된 스타일 별로 부름</P>
   LINK 로 다른 화일을 연결하여 사용 할 때

스타일 클래스로 지정:

CSS1 규격 클래스 설명
Class selectorID selector:
.

   타입을 지정 하기 위해
      점(.)으로 시작되는 스트링으로 Class selector를 정의 할 수 있다.
   이는 STYLE=attribute 기능을 수행하게 한다.
   점(.)은 STYLE 값에는 표시 되지 않는다.

   지정 할 때: .example {color: brown;}
   불러 쓸 때: <P class="example">스타일로 지정 한 예제 표현.</P>

   지정 할 때: B.big { font-size: 20px; color: blue }
   불러 쓸 때: <B class=big> big 글라스는 B에서 만 작용.</B>

스타일 ID로 지정:

ID selector : CSS1 규격 ID 설명

   타입을 지정 하기 위하여 샵(#)으로 시작되는 스트링으로
       ID selector를 정의 할 수 있다.
   이는 ID=attribute 기능을 수행하게 한다.
   샵(#)은 ID 값에 표시되지 않는다.

   지정 할 때: #sample {color: brown;}
   불러 쓸 때: <P ID="sample"> ID로 지정 한  예제.</P>

조합 엘레멘트에 지정:

복합 지정(Contextual selector) : CSS1 규격 복합 지정 설명


   지정 된 위치에서 작동한다.
   Parent 에서 지정 한 것이 Child에도 적용된다.

   지정 할 때: H4.EM {color: red;} 혹은 H4 EM {color: red;}
   불러 쓸 때: <H4>여기서는 <EM>적용되고</EM>.</H4>
         <P>여기서는 <EM>적용되지 않는다</EM>.</P>

직접 지정:

엘레멘트에 직접 지정한다.

   <div style="color:red;">여기는 적색으로 나타난다.</div>

URL, 외부 file 연결

이미지연결

CSS1 규격 URL 설명

URL: 공통으로 사용되는 화일 이미지 지정.
HTML document에는 적용되지 않는다.


   url(../../gif/ictrio.gif)
   url("http://trio.co.kr/gif/ictrio.gif")

외부 연결

LINK: 다른 화일로 된 CSS를 연결하여 사용 할 수 있다.
<LINK>는 HTML 문서의 <HEAD>와</HEAD>사이에 위치 하여야 한다.
HTML document에는 적용 되지 않는다.


   <LINK REL=STYLESHEET TYPE='text/css' 
	HREF='http://trio.co.kr/pub/stexpub.css'>

IMPORT 로 불러 사용 할 때

단위(Unit)

CSS1 규격 단위 설명

길이 단위 :

   공통으로 사용되는 절대 길이 지정.
   사용 가능한 단위는 em, px, in, cm, mm, pt, pc

   width: 50px;
   margin-left: 2em;

백분율 : CSS1 규격 백분율 설명

   공통으로 사용되는 백분율 지정.

   width: 80%;

색상 : CSS1 규격 색상 설명

   Color:  공통으로 사용되는 색상 지정(색상표)

   color: #FF00FF;
   color: #F0F;
   color: brown;
   color: rgb(100%,0%,100%)

일반

이문서(http://trio.co.kr/webrefer/css/cssgen.html)는
자유로이 연결 사용이 가능함.