29. CSS - CSS란?

1. CSS(Cascading Style Sheet)

1. CSS란?

1. CSS는 HTML과 함께 웹 표준의 기본 개념
2. HTML이 웹 문서의 구조와 뼈대를 담당하고 CSS 웹 문서의 디자인 요소를 담당
3. CSS를 정의하는 방식
   • head 태그 안에 stlye 태그를 사용하여 정의하는 방식(내부 스타일 시트)
   • body 안의 태그들에 style 속성으로 정의하는 방식(인라인 스타일 시트)
   • 외부 CSS파일을 작성해서 링크를 걸어주는 방식(외부 스타일 시트)
4. 스타일을 정의하는 방식은 태그들을 선택할 수 있는 선택자들을 이용해서 스타일을 정의할 수 있다. 선택자의 종류로는 태그 선택자, 아이디 선택자, 클래스 선택자 등등이 있다.

2. 스타일과 스타일 시트

1. 스타일은 HTML 웹 문서에 글꼴이나 색상, 배경색, 각 태그의 배치방법 등의 문서의 디자인적 요소를 정의하는 것.
2. 스타일 시트는 위에서 정의한 스타일들을 관리하게 편하게 한 곳에 모아서 관리하는 것을 말한다.
3. 스타일을 사용하는 이유
   • 웹 문서 내용과 관계없이 외관적인 모습을 변경할 수 있다.
   • 반응형 웹 사이트를 구성할 수 있어 다양한 기기에서 호환되는 웹 페이지도 구성할 수 있다.
4. 스타일 형식
   • 선택자 {
     스타일속성1: 스타일 속성 값1;
     스타일속성2: 스타일 속성 값2;
     ....
     }
5. 스타일에서의 주석
   • /**/ 사이에 주석이 될 내용을 추가한다.
   • 한 줄 또는 여러줄 입력 가능
6. 외부 스타일 시트
   • 선택자1 {
     스타일속성1: 스타일 속성 값1;
     스타일속성2: 스타일 속성 값2;
     ....
     }
   • 선택자2 {
     스타일속성1: 스타일 속성 값1;
     스타일속성2: 스타일 속성 값2;
     ....
     }
     ........
     .css 확장자로 저장
   • head 태그 안에 link 태그로 연결해준다.
   • <link rel="stylesheet" href="외부 스타일 시트 파일">
7. 스타일 시트 적용순서
   • 외부스타일 시트, 내부스타일 시트, 인라인 스타일 시트 모두 존재할 때 인라인 스타일 시트가 최우선적으로 적용, 내부스타일 시트, 외부스타일 시트 순으로 적용.
     인라인 > 내부 > 외부
   • !important라는 속성값이 있는 스타일은 최우선적으로 적용

3. Cascading

1. Cascading는 위에서 아래로 흐른다라는 뜻을 가지고 있다.
2. 위에서 아래로 흐르는 첫 번째 속성은 상속을 의미. 부모태그에 적용된 스타일들이 자식태그에 동일하게 적용되는 속성을 말한다.
3. 위에서 아래로 흐르는 두 번째 속성은 위에 정의된 스타일 먼저 적용된 후 아래에 있는 스타일이 덮어씌워진다는 의미. 같은 태그에 대한 스타일이 여러개가 존재하면 마지막에 정의된 스타일이 적용된다. 그래서 외부 스타일 시트를 링크할 때도 순서를 항상 주의해서 정해야 한다. -> 스타일 우선순위
4. 특정 태그에 대한 스타일이 중복될 때 스타일간의 충돌을 방지하기 위해 Cascading 방식이 채택됨.
5. 상속이 되는 스타일 속성에는 visibility, opacity, font, color, line-height, text-align ...이 있다. 내용의 스타일 관련 속성
6. 상속이 되지 않는 스타일 속성에는 width, height, margin, border, padding, display, position ...이 있다. 위치나 구조관련 속성
7. 스타일 우선순위는 중요도, 명시도 개념에 따라서 결정이 된다.
8. 중요도 : 스타일이 어디서 선언되었는가에 따라 달라진다. 시스템에서 선언되었는지, 브라우저에서 선언되었는지, 소스에서 선언되었는지에 대한 내용. 시스템에서 지정한 스타일 > 개발자가 작성한 스타일 > 브라우저에서 작성한 스타일
9. 명시도 : 스타일 시트의 위치(외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 시트)

4. 브라우저별로 지원하는 CSS

1. CSS3가 계속해서 표준을 만들고 있는데 아직까지 표준으로 지정되지 않아 브라우저별로 다르게 적용되는 스타일들이 있다.
2. 표준으로 지정되지 않은 CSS에대한 브라우저별 동일한 스타일을 적용시키기 위해 접두사를 제공한다.
   • -webkit- : 크롬, 사파리 브라우저에서 적용
   • -moz- : 모질라, 파이어폭스 브라우저에서 적용
   • -o- : 오페라 브라우저에서 적용
   • -ms- : 마이크로소프트 인터넷 익스플로러, 엣지 브라우저