CSS. CSS 기본 속성

CSS 기본 속성

text

color : 텍스트 색상

letter/word-spacing : 문자/단어 사이의 간격 설정

text-indent : 단락의 첫 줄을 들여쓰기 여부 설정  ex) :30px;

text-align : 텍스트 정렬 설정   ex) :left/ right/ center;

text-decoration : 텍스트에 여러가지 효과 설정 혹은 제거    ex) :overline/ line-through/ underline/ none;

line-height : 텍스트의 줄 간격 설정    ex) :1.8;

text-shadow : 그림자 효과 설정   ex) : 2px 1px #3399CC;

 

 

 

font

font-weight : 텍스트를 얼마나 두껍게 표현할지를 설정

font-size : 텍스트 크기 설정

 

 

 

link (링크의 상태)

link : 링크의 기본 상태, 사용자가 아직 한 번도 링크를 방문하지 않은 상태

visited : 사용자가 한 번이라도 링크를 통해 방문한 상태

hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태

active : 사용자가 마우스로 링크를 클릭하고 있는 상태

focus : 키보드나 마우스의 이벤트 또는 다른 형태로 해당 요소가 포커스를 가지고 있는 상태

 

                  링크를 활용해 버튼 만들기

a:link, a:visited {
    background-color: #FFA500;
    color: maroon;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a:hover, a:active { background-color: #FF4500; }

 

 

 

list

list-style : 모든 list-style속성을 이용한 스타일을 한 줄에 설정 가능

                  ex) ul { list-style: square inside url("/examples/images/img_list_marker.png"); }

list-style-type : 리스트 요소의 마커를 설정

                  ex)

<style>
.circle { list-style-type: circle; }
.square { list-style-type: square; }
.upperAlpha { list-style-type: upper-alpha; }
.lowerRoman { list-style-type: lower-roman; }
</style>

list-style-image : 리스트 요소의 마커로 사용할 이미지 설정    ex) : url(“해당파일위치 및 파일명”);

list-style-position : 리스트 요소의 위치 설정   ex) :outside/ inside;

 

 

 

table

border : 모든 border속성을 이용한 스타일을 한 줄에 설정 가능

                  ex) table, th, td { border: 2px solid orange; }

border-collapse : 테이블의 테두리를 한 줄로 나타낼지를 설정   ex) :collapse;

border-spacing : 테이블 요소(th, td)간의 여백을 설정

                  ex) table, th, td { border: 1px solid black; }

                    table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px;

caption-side : 테이블의 캡션 설정

empty-cells : 테이블 내의 빈 셀들의 테두리 및 배경색을 표현 유무 설정

table-layout : 테이블에 사용되는 레이아웃 알고리즘 설정

 

 

 

cursor (필요한 것만 정리함)

<p style="cursor:auto">Auto</p>
<p style="cursor:default">Default</p>
<p style="cursor:pointer">Pointer</p>
<p style="cursor:move">Move</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:text">text</p>
<p style="cursor:wait">wait</p>
<p style="cursor:help">help</p>