Lesson #1 CSS ( Cascading Style Sheet )
기본적인 특징과 적용방법, 적용 우선순위 알아보기.
이 포스트의 목차
1. CSS 기본 특징.
2. 적용(연결) 방법
3. 우선순위
CSS 기본 특징
CSS는 HTML 문서를 보기좋게 만드는, 디자인 코드라고 생각하시면 쉽습니다. CSS 이름에서 짐작해볼수 있듯이 Cascading의 의미는 폭포 같은, 계속되는, 연속적인 뜻을 가지고 있으며 가장 큰 특징입니다. 계단식 연결을 의미 한다고 생각하세요. 브라우저가 따라가는 계층 구조는 외부, 내부, 인라인 입니다. 특정 계층 구초를 따르기 때문에 상위 요소에서 지정한 속성이 하위 요소까지 연속적으로 적용된다는 의미라고 생각하시면 쉽습니다. 폭포가 위에서 아래로 떨어지는 듯한 느낌으로 적용되는 것을 뜻합니다. 그러나 모든 속성이 다 연속적으로 적용되지는 않습니다. 되는 속성'과 '되지 않는 속성'이 있습니다. 예를 들면 color를 상위 요소에서 지정하면 하위 자식 요소에도 동일하게 적용되지만, padding은 지정한 자신에게만 적용됩니다.
CSS 적용(연결)방법
1) 인라인 스타일 Inline Styles
2) 내부 스타일 Internal Styles
HTML이 head안에 style 태그를 선언하고 그 안쪽에 속성과 선언을 합니다.
<style>
.testClass{color:#666666;}
<style>
3) 외부 스타일 External Styles
별도의 CSS 파일을 만들고 HTML에 head안에 넣어줍니다. 연결하는 형태입니다.
style.css 라는 파일이라고 예를 들어 본다면,
<link rel="stylesheet type="text/css" href="style.css" >
href="경로"를 넣는 부분에 파일의 이름을 넣어 줍니다. ( html 파일과 같은 폴더 내에 있다면 파일명만 써주면 되고, 외부의 폴더에 있다면 css/style.css 이런형태로 넣어주면 되겠죠~ )
HTML 파일과 CSS파일을 분리하여 꼭 사용하는 습관을 들이도록 하세요~ 실무에서는 정말 예외적인 상황이 아닌이상 이렇게 외부 스타일로 사용합니다.
3. CSS 사용법
선택자(selector)와 선언부로 구분하며 선언부는 다시 속성(property)과 속성값(value)로 구분 합니다.
selector { property : value }
.testClass { background : #0000ff ; }
CSS의 적용 우선순위
외부 -> 내부 -> 인라인 입니다. 그리고 !important를 사용하고 있는 속성의 값이 강제적으로 적용됩니다.
.testClass { background : #0000ff !important ; }
.testClass { background : #000000 ; }
