CSS 기본 지식

CSS

CSS(Cascading Style Sheet)는 문서의 디자인을 담당하는 언어이다. 다음과 같이 사용되어진다.

선택자 { 속성: 속성값; }

CSS 선택자

CSS 선택자는 CSS 디자인을 적용할 태그를 선택하는 것을 말한다. type, id, class 선택자가 있으며 그 외에도 자식 선택자, 자손 선택자 등 여러 선택자들로 태그를 선택할 수 있다.

• type 선택자

h1 { color: red; }

모든 h1 태그에 디자인을 적용한다.

 

• id 선택자

#bg { background-color: yellow; }

태그의 id 속성 값이 bg인 태그에 디자인을 적용한다. id 속성값은 문서 내에서 유일해야된다.

 

• class 선택자

.bg { background-color: yellow; }

태그의 class 속성 값이 bg인 태그에 디자인을 적용한다. class 속성값은 문서 내에서 중복되어도 된다.

CSS 상속

CSS 사용 편의를 위해 부모의 일부 css 속성은 자식에게로 상속되어진다. 만약 상속되지 않는다면 자식들에게도 매번 속성을 적용해야 되지만 상속으로 인해 이러한 번거러움이 해결된다.

• 상속되는 속성 : font, color, line-height, text-align, visibility, white-space 등
• 상속되지 않는 속성 : width/height, margin, padding, border, display, top/right/bottom/left, z-index, overflow, float 등

CSS 우선순위, 캐스캐이딩

캐스캐이딩은 같은 태그에 여러 디자인을 적용했을 때 우선 순위가 높은 디자인이 적용되는 것을 뜻한다. 대략 다음 세가지가 우선순위에 영향을 미친다.

• CSS 속성 적용 순서
• 선택자의 범위
• type, id, class 선택자

나중에 적용된 CSS 속성의 우선 순위가 높으며 선택자의 범위가 구체적일수록 우선 순위가 높고 id, class, type 선택자 순으로 우선순위가 높다.    

CSS 주요 속성

• width, height 속성
  태그의 content 영역의 너비와 높이를 뜻한다. 
• font 속성
  글자 크기, 글꼴 종류, 글자 모양, 글자 굵기 등 폰트와 관련된 디자인을 설정한다.
• backgroud 속성
  배경색을 지정하거나 배경 이미지를 삽입할 수 있다.

이 외에도 무수히 많은 속성이 있다.