[HTML&CSS] CSS의 특징과 규칙
- Language & Solution/HTML&CSS
- 2017. 5. 20. 14:17
CSS는 검색 및 그를 통한 무언가를 대체할 수 있는 도구라고 생각해도 됩니다. 왜냐하면 CSS는 HTML문서의 요소를 식별함으로써 그 요소에 개발자가 원하는 스타일과 포맷을 설정할 수 있기 때문이죠.
CSS는 다음과 같은 특징이 있습니다.
기능 확장성
HTML 대부분의 요소들에 다양한 기능을 추가할 수 있어 웹개발자는 CSS를 통해 독특한 문서형식을 설계할 수 있습니다.
다양한 폰트 사이즈와 줄간격도 지원하죠.
양식의 모듈화
스타일 시트를 HTML에 부가적으로 활용할 수 있습니다. 일정 양식을 CSS로 작성한 후 HTML에 적용하면 전체 문서가 같은 양식으로 통일감 있게 구성될 수 있습니다. 또한, 스타일에 변경 사항이 생겨도 CSS 파일만 수정하면 되므로 유지보수에도 편합니다.
그리고 CSS는 다음과 같은 규칙이 존재합니다.
CSS에서 어떤 요소에 스타일을 적용하면 그 요소에만 적용되는 것이 아니라 DOM구조에서 그 요소의 자식 노드들에게도 스타일이 적용되는 규칙이 존재합니다.
만일 위의 구조에서 <head> 부분에 특정 CSS스타일을 적용하면 head 뿐만 아니라 그 밑 title까지 스타일이 적용되게 됩니다. 말그대로 Cascading이죠! 하지만 만일 title에서 다른 CSS스타일이 적용되면 그 스타일이 부모 노드에서 온 스타일을 물리치고(!) 자신의 CSS스타일을 적용하게 됩니다.
교육 사이트에서 나온 reference를 인용하면 다음과 같습니다.
"Cascading" means that rules are applied not only to the elements they directly match, but also to all of those elements' child elements. However, if a child element has multiple, overlapping rules defined for it, the more specific rule takes effect.
참고자료 : https://classroom.udacity.com/courses/ud304/lessons/2617868617/concepts/27713785680923
'Language & Solution > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] HTML 템플릿 작성하기, <div> 의 쓰임새 및 <a href="#content"> (0) | 2018.11.27 |
|---|---|
| [HTML&CSS] html meta요소 알아보기 (0) | 2018.11.25 |
| [HTML&CSS] 문서형 선언, 언어 지정, 문자 코드 셋 지정하기 (0) | 2018.11.25 |
| [HTML&CSS] DOCTYPE, p 태그<p>, input 태그 <input>, table 태그 요소 <table>, <tr>, <td> (0) | 2018.11.25 |
| [HTML&CSS] HTML 태그 정리 (0) | 2018.11.01 |
