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">