CSS1. CSS 포맷과 스타일 형식

1. CSS 란 ? 

 

cascading Style Sheet = 계단식 스타일 시트 

이는 위에서 아래로 흐르는 물롸 같이 선택자에 적용된 많은 스타일 중에 어떤 스타을 나타낼지 결정하게 됩니다. 

HTML에 조금 더  아름다운 옷을 입혀주고 꾸며주는 역활을 하는 것이 CSS 입니다. 

 

1-1 스타일 우선순위

 

 * 스타일 우선순위 : 스타일 규칙의 중요도,적용 범위에 따라 우선순위 결정

 * 스타일 상속 : 태그들은 포함관계에 따라 부모요소의 스타일을 자식요소로 전달.

 * 중요도 (사용자 스타일 시트 >> 중요 스타일 >>기본브라우저 스타일

 

    A. 사용자 스타일 :  사용자 스타일 시트란  저시력자 색약자 특별조건이 필요한 사용자가 그들에게

맞게 구성한 시트. 모든 브라우저 사용자 스타일 시트를 지원하지 않지만 중요 스타일보다 우선될 수 있음을 알아야 한다.

   B. 중요 스타일 !Important : 제작자가 만든 일반 스타일보다 우선. 일반보다 우선순위 높음.

   C. 기본적인 브라우저 스타일 시트 : 스타일 지정되지 않는 브라우저 스타일

 

 

1-2 얼마나 한정할지 명시도(Specifictity)

 

: 스타일 충돌 시 적용범위 우선순위를 정할 수 있다. 정확히 필요한 요소에만 적용할 스타일일수록

우선순위가 높아짐.

 

 우선순위 :  인라인 > ID > 클래스 >  태그

 

 

---

CSS 사용하는 이유는 HTML의 기본 구조나 컨텐츠를 변경하지 않고 디자인을 변경할 때 이롭기 때문에

새로운 디자인 변경하여 색다른 느낌의 문서로 만들 수 있기 때문입니다. 

 

또한 PC나 태플릿,모바일의 다양한 환경에 해당 환경에 맞게 문서를 따로 만들어야 했습니다. 다른 환경에서도

CSS 변경으로 여러 기기에 적합한 환경으로 보여줄 수 있습니다. 

 

 

 

2. 스타일 표기방법 

 

: 스타일 규칙 세미콜론 ; 구분하고 중봘호 { } 안에 나열합니다. 

코딩하는 사용자에 따라 다양하게 작성하기도 합니다. 간단하다면 한줄로 공백을 최소화 시키거나 

간결하게 줄바꿈을 해서 각 속성별로 지정하기도 합니다.  가독성이 높도록 작업하시는 것이 중요합니다. 

 

한 눈에 자신의 코드를 확인할 수 있는 방식을 지향합니다.  

 

 

3. 주석 

 /*  */ 사이에 내용을 입력해 주시면 됩니다. 

 

 

주석을 삽입한 경우 입니다. 스타일 표기 속성 두개 들어가 있습니다. 하늘색이 속성 입니다.

4. 스타일 형식 

 

 위와  h3           { font-size :  20px; }

      (선택자 )   (스타일 속성)  (속성 값)  

 

그렇기 때문의 위의 스크린샷을 보시면  h3 태그의 선택자에 적용된 속성은 2개입니다. 

앞서 말한 것과 같이 세미콜론으로 스타일 규칙을 구분하는데 이것은   속성과 속성 값  하나의 페어를 이루어집니다. 

속성 : 속성값 ;   형식이 됩니다. 

 

이상입니다.  개념적으로 이해하시면 될 거 같습니다.