2014.10.16 12:20

2-2 보강. 자주 사용하는 style(CSS) 속성

style은 태그에 여러 속성들을 부여하면서 다양한 형태로 정보를 표현 할 수 있도록 한다. 태그에 style을 적용하는 방법에는 3가지가 있다.

 

inline type : 태그와 함께 사용하며 style 속성에 문자열 형태의 값을 넣는다.

<div style="font-size:14px; font-weight:bold;">멀티미디어</div>

style="font-size:14px; font-weight:bold;" 처럼 태그 안에 직접 style을 사용하는 걸 inline type이라고 한다.

 

style 선언 : 주로 문서의 head 영역에 style을 미리 정의한다. style을 한 번 정의하고 문서 내에서 반복 사용 할 수 있다. 태그를 간결하게 정리 할 수 있다.

<style>

.fontstyle { font-size:14px; font-weight:bold; }

</style>

 

<div class="fontstyle">멀티미디어</div>

<style>~</style> 안에 여러 스타일 속성을 지정하고 태그를 사용 할 때 class="스타일 이름" 형태로 사용 한다. 여기서 주의 해야 할 것은 class 이름은 속성 이름 앞에 .을 붙인다.

 

외부 참조 : style sheet를 위부의 별도 파일로 만들어 사용하고자 하는 문서에서 import 할 수 있다.

/* style.css */

 

.fontstyle { font-size:14px; font-weight:bold; }

 

/* index.html */

<link href="style.css"  rel="stylesheet">

 

<div class="fontstyle">멀티미디어</div>

여기서 보면 style.css는 외부에 별도로 작성 된 style sheet 전용 파일이다. link 태그를 이용해 style.css 파일을 문서 내에 import 한다.

 

 

자주 사용하는 style 속성

 

font-style

font-style: normal;

font-style: italic;

font-style: oblique;

 

font-weight

font-weight: normal;

font-weight: bold;

font-weight: bolder;

font-weight: lighter;

font-weight: 100;

font-weight: 200";

 

font-size

font-size: 12pt;

font-size: 16px;

font-size: 0.86cm;

font-size: 8.6mm;

font-size: 0.34in;

font-size: 200%;

폰트 크기 단위로는 em을 사용하기도 한다. 실제 폰트 크기는 16 * 0.75em = 12px 이렇게 계산 할 수 있다.

 

font-variant

font-variant: normal;

font-variant: small-caps;" //-- 소문자를 대문자로 표현하는데 일반 대문자보다는 작다.

 

text-align

text-align: left; //-- center, right도 사용 할 수 있다.

text-align: justify;

 

text-indent

text-indent: 5px; //-- 문단의 시작을 5px 만큼 들여쓰기 한다.

text-indent: 3em;

text-indent: 5cm;

 

text-decoration

text-decoration: none;

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

text-decoration: line-through overline underline;

text-decoration: blink;

 

text-transform

text-transform: none;

text-transform: uppercase; //-- 소문자를 대문자로..

text-transform: lowercase; //-- 대문자를 소문자로..

text-transform: capitalize; //-- 첫 글자만 대문자로..

 

letter-spacing

letter-spacing: 1em; //-- 글자 간격을 조절한다. 1em만큼 글자 간격을 띄운다. -1px을 하게 되면 1px만큼 간격을 줄인다.

 

word-spacing

word-spacing: 1em; //-- 단어 사이를 띄운다.

 

color

color: navy;

color: #369369; //-- 글자 색은 16진수 값을 넣는 게 보통이다.

color: rgb(80%,80%,80%);

color: rgb(111,111,999);

 

background-color

background-color: gray;

background-color: #EEEEEE; //-- 배경색은 16진수 색상 값을 넣는 게 보통이다.

background-color: rgb(80%,80%,80%);

 

background-image

background-image: url('bg.gif'); //-- 배경 이미지를 넣는다.

 

background-repeat

background-repeat: repeat;  //-- 배경이미지는 가로, 세로 반복 출력 되는 것이 기본이다.

background-repeat: repeat-x; //-- 배경을 x 방향으로만 반복 한다.

background-repeat: repeat-y; //-- 배경을 y 방향으로만 반복 한다.

background-repeat: no-repeat; //-- 배경을 반복 출력하지 않고 한 번만 출력한다.

 

background-position

background-position: 10% 10%;

background-position: 1cm 1cm;

background-position: top;

background-position: center; //-- 배경 이미지를 가운데 정렬하는데 background-repeat와 함께 사용해야 의미가 있다.

background-position: right bottom;

 

background-attachment

background-attachment: scroll; //-- 배경 이미지를 스크롤 할 수 있게 한다.

background-attachment: fixed; //-- 배경 이미지를 고정한다. 기본값.

 

background

background: url('pg'.gif) yellow no-repeat top left; //-- 배경 이미지의 여러 옵션을 한 번에 사용한다. background:url(경로) 배경색 반복 위치; 순으로 사용 할 수 있다.

 

padding

padding: 0 0 0 0; //-- 안쪽 여백. padding:위 오른쪽 아래 왼쪽;순이다.

padding: 50px; //-- 상하좌우를 50px만큼 안쪽 여백을 준다.

 

margin

margin: 0; //-- 바깥쪽 여백을 주지 않겠다는 뜻

margin: 50px 50px 50px 50px; //-- 바깥쪽 여백 모두를 50px을 주겠다는 것. margin:50px;과 같은 의미.

margin: 0 0 0 -30px;

 

border-style

border-style: none; //-- 테두리 속성을 주지 않겠다는 의미

border-style: solid;

border-style: dotted;

border-style: dashed;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: inset;

border-style: outset;

border-style: solid dashed dotted outset;

 

border-width

border-width: 1px 1px 1px 1px;

border-width: 0 0 0 0; border-style: solid;

border-width: 1px 1px 1px 1px; border-style: solid;

border-width: 3px; border-style: solid;

border-width: 3mm; border-style: solid;

border-width: 1px 1cm 1mm 1in; border-style: solid;

border-width: thin; border-style: solid;

border-width: medium; border-style: solid;

border-width: thick; border-style: solid;

 

border

border: 1px;

border: #999999;

border: solid;

border: solid #999999;

border: 1px solid #999999; //-- 테두리 설정을 한 번에 해결 할 수 있다. 1px의 테두리를 실선으로 표현 한다는 의미다. border:두깨 종류 색상; 순으로 표현한다.

 

float

float: left; //-- 객체를 왼쪽 정렬한다. 주로 div를 정렬 할 때 사용한다.

 

visibility

visibility: visible;

visibility: hidden;

visibility: collapse;

 

list-style-type

list-style-type: default; //--주로 UL, OL과 함께 사용 되며 목록 스타일을 지정하지 않겠다는 의미.

list-style-type: disc; //-- 목록 구분을 포인트로 한다.

list-style-type: circle;

list-style-type: square;

list-style-type: decimal;

list-style-type: decimal-leading-zero;

list-style-type: lower-roman;

list-style-type: upper-roman;

list-style-type: lower-greek;

list-style-type: lower-alpha;

list-style-type: upper-latin;

list-style-type: none; //-- 목록 구분을 출력하지 않는다.

 

list-style-image

list-style-image: url(list1.gif)

list-style-image: url(list2.gif)

 

list-style-position

list-style-position: inside

list-style-position: outside

 

list-style

list-style: url(list1.gif) inside;

list-style: square outside;

list-style: url(list1.gif);

list-style: square;

list-style: inside;

 

cursor

cursor: auto; //-- 마우스 커서 모양을 상황에 따라 자동으로 변경한다.

cursor: crosshair;

cursor: default;

cursor: pointer; //-- 마우스 커서 모양을 손 모양으로 한다.

cursor: move;

cursor: e-resize;

cursor: ne-resize;

cursor: nw-resize;

cursor: n-resize;

cursor: se-resize;

cursor: sw-resize;

cursor: s-resize;

cursor: w-resize;

cursor: text;

cursor: wait;

cursor: help;

cursor: url('pointer.gif'); //-- 마우스 커서의 모양을 파일로 불러 올 수 있다.

 

ime-mode

input으로 문자를 입력 받을 때 영문, 숫자만 입력 받고 싶을 때 사용한다. 한글이나 특수 문자는 입력받지 못한다.

영문숫자만 입력받고자할때는 disabled 값으로 지정하면된다.

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

        

Trackback 0 Comment 0