[SW코딩] 핵심 HTML/CSS 기초 - 03. 웹사이트 디자인 (2)

01 Cascading : 우선순위를 결정하는 방법

 

• CSS의 우선순위를 결정하는 세 가지 요소

1. 순서

2. 디테일

3. 선택자

 

• 순서에 의한 캐스케이딩 : 코드는 위에서 아래로 실행되기 때문에 나중에 적용한 값을 따른다.

 

• 디테일에 의한 캐스케이딩 : 부모 자식 태그 간 더 자세하게 나와있는 선택자를 따른다.

 

• 선택자에 의한 캐스케이딩 : 구체적으로 명시된 태그순으로 강도가 높다.

 

---

 

02 CSS 주요 속성

 

• Width, Height

- width 속성 : 선택한 요소의 너비를 설정, 픽셀(px), 퍼센트(%), 픽셀은 고정적인 크기, 퍼센트는 유동적인 크기를 갖는다.

- height 속성 : 선택한 요소의 높이를 설정

 

• font

- font-family : 브라우저마다 지원하는 폰트가 다르다. 입력한 순서대로 우선순위를 적용하고, sans-serif는 마지막에 작성하는 디폴트 값이다.

- font-weight : 100~900 사이의 숫자를 입력하거나, 단어를 입력할 수 있다.

 

• border - 요소에 대한 경계선을 표현할 때 사용하는 속성

- border-style : solid(실선), dotted(점선), 주석과 같이 한 줄에 이어 쓸 수도 있다. 

 

• background

- background-repeat : 이미지가 들어간 경우 이미지가 요소보다 작을 때 설정하는 속성, repeat-x, repeat-y, no-repeat 등

- background-position : 공간 안에서 이미지의 좌표를 변경할 때 사용하는 속성, top, bottom, center, left, right 등