CSS - 속성 정리 (1) / 타입 선택자 css

CSS - 속성 정리(1)

 

background-color : 배경색

 

background-image : 배경 이미지를 정의

 

background-repeat : 배경 이비지의 반복 여부를 지정

(repeat-x; => 수평방향 x축으로 반복 / repeat-y;  => 수직방향 y축으로 반복)

 

background-attachment : 배경 이미지가 고정 or 스크롤인지 지정

 

background-position : 배경 이미지 위치를 설정

 

background-size : 배경 이미지 크기를 지정

 

border:2px solid red; => 2 , solid , red 테두리 두께를 2픽셀, 실선,  테두리 선색을 빨강

(+border-top, border-bottom, border-left, border-right으로 각각 지정할 수 있다.)

 

border-collapse: collapse; => 표 테이블 테두리 선을 분리하지 않고 한줄로 그린다.

 

border-style : 경계선 스타일 / border-width : 경계선 폭 / border-color : 경계선 색상

 

border-radius : css3에서 새롭게 추가된 속성으로 테두리를 둥글게 처리

 

color:red; => 글자색을 빨강

 

text-align:center; => 글자를 수평 중앙정렬

 

vertical-align : 수직 방향의 정렬

 

display : none; => 해당부분을 웹브라우저 화면에 안보이게 한다. 화면에서 자리도 차지하지 않고 완전히 제외된다.

 

letter-spacing : 문자와 문자 사이의 간격. 즉 글자 간 간격 지정

 

line-height : 수직간의 문장 사이의 줄 간격. 텍스트 줄의 높이를 지정

 

text-indent : 들여쓰기

 

text-decoration : underline(밑줄선), overline(윗줄선), line-through(취소선), none (장식 없앰)

 

text-transform : capitalize(첫글자를 영문 대문자), uppercase(영문 대문자), lowercase(영문 소문자)

 

text-shadow : css3에서 새롭게 추가된 속성으로 텍스트에 그림자 효과를 줌.

 

box-shadow : css3에서 새롭게 추가된 속성으로 div 박스 모델에 그림자 효과를 줌.

 

word-wrap : break-word; => 단어가 길 때, 적절하게 자동으로 줄 바꿈을 한다.

 

font-family : 글꼴 / font-size : 글자 크기 / font-style : 글자 스타일

 

padding : 안여백 설정 ( padding: 5px 6px 7px 8px; 순서대로 상 우 하 좌 )

 

margin : 바깥 여백 설정 ( margin: 5px 6px 7px 8px; 순서대로 상 우 하 좌 )

(margin-left(or margin-right) : auto; => div, h1, h2, p 등과 같은 가로줄 전체를 차지하는 블록수준 태그에 일정한 width 즉 너비를 지정한 후 수평 좌우 중앙 정렬할 때 사용)

 

list-style : none; => ul li로 메뉴 구성할 때 생성된 목록 앞 점을 사라지게 한다.

 

list-style-image : url("그림파일경로"); => 목록의 글머리 기호에 이미지 사용. 리스트 항목 마커를 이미지로 지정

 

list-style-position : 글머리 기호 위치 지정. 리스트 마커의 위치를 안쪽인지 바깥쪽인지를 지정

 

min-width, min-height : 요소의 최소 너비와 높이

max-width, max-height : 요소의 최대 너비와 높이

 

---

타입 선택자 css

a:link => 방문하지 않은 하이퍼링크 된 곳 css 효과

 

a:visited => 한번이라도 방문, 클릭된 하이퍼링크 된 곳 css 효과 

 

a:hover => 하이퍼링크 된 곳 마우스 오버시 css효과. 링크 스타일을 지정할 때 반드시 지켜야하는 규칙이 있는데, a:hover는 a:link와 a:visited 다음에 위치해야하며, a:active는 a:hover다음에 와야 한다.

 

a:active => 하이퍼링크를 클릭하는 순간 (클릭하는 동안의) css효과

 

<style>
#login a:hover{/*하이퍼링크 마우스 오버시 css효과*/
	color:#F90;/*#FF9900을 줄여서 표현*/
}
</style>