[CSS] 기본 개념 & 중요 선택자들 & 중요 속성

[구성]

선택자+선언으로 구성

.css { margin: 30px; color: black }

.css: 선택자 

margin:30px => 선언

속성     값

 

[주석]

/* 내용 */

 

[link]

<link rel="stylesheet" href="./css/clock.css" />

위와 같은 방식으로 html에서 불러와서 사용

 

[import]

@import를 사용하여 외부 스타일 시트를 적용할 수 있음

@import는 스타일 시트 중 최상단에 위치해야 함!

 

[내부 스타일 시트]

<style> tag 내부에 작성.

외부 스타일 시트보다 우선 적용.

*인라인 스타일 시트: 개별 element마다 스타일을 지정. 유지보수에 용이하지 않다.

*스타일 적용 우선순위 : 인라인>내부>외부

 

 

 

[선택자]

일반 선택자: 전체(*), 타입(h1), 클래스(.class), ID(#idname)

* 우선순위 : 전체<타입<클래스<ID

복합 선택자: 자식(e1>e2), 하위(e1), 인접 형제(e1+e2), 일반 형제(e1~e2)

 

[가상 클래스 선택자]

a:link { color: gray; text-decoration: none; }

방문하지 않은 링크

a:visited { color: red; text-decoration: none; }

방문한 링크

a:hover { color: green; text-decoration: underline; font-weight: bold; }

마우스를 올리는 경우

a:active { color: blue; text-decoration: none; }

마우스를 눌렀을 경우

 

[속성 선택자]

[padding]

값이 1개일때: 모든 면

'' 2개일때: right,left

'' 3개일때: top,right,left

'' 4개일때: top,right,bottom,left

 

[margin]

E{margin : 0 auto} (가운데 정렬 효과)

첫번째 값: 상,하 여백

두번째 값: 좌,우 여백

 

[float & clear]

float : 속성값을 left, right로 설정하여 박스를 어느 위치에 배치할 것인지 설정

clear : float 속성이 가지고 있는 값을 초기화 할 수 있다.

 

[visibility]

visible: 화면에 표시

hidden: 화면에 표시 X => 면적은 차지하고 있음

display: none => 화면에 표시X, 면적X

 

[font와 text]

font: 글꼴, 크기 등 글짜 꾸밈

text: 여백, 들여쓰기, 정렬 등 공간 설정 기능