05 CSS 기초

05-1 스타일과 스타일 시트

스타일? 미리 약속한 스타일 속성을 입력해 웹을 디자인 하는 것.

다양한 기기에 맞게 바뀌는 문서 작성 가능
웹 문서의 내용과 상관 없이 디자인만 변경 가능

구성 요소

선택자 : 어디에 스타일 규칙을 적용할 것인지 나타냄
속성, 속성 값: 각 스타일의 속성. 중괄호 안에 속성: 값 형식으로 나타내며, 여러 개일 경우 세미콜론(;)으로 구분.
```
p {color: blue; font-size: 16px; }
```

스타일 시트

여러 개의 스타일 규칙을 한 군데에 묶어 둔 것.

내부 스타일 시트 : <head>안의 <style>태그 사이에 작성한다.
외부 스타일 시트 : 여러 웹페이지를 사용할 경우, .css 확장자의 스타일 시트를 저장. <link> 태그만 사용해 외부 스타일 시트 파일을 연결한다. ```html

- 인라인 스타일 시트 : 간단한 스타일은 html 태그 안에서 정의할 수 있다.
```html
<p styple="color:blue;">인라인 스타일을 적용할 수 있다.</p>

05-2 주요 선택자(selector)

전체 선택자

스타일을 모든 요소에 적용
* 기호 사용
문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화

태그 선택자

특정 태그가 쓰인 모든 요소에 스타일 적용

클래스 선택자

원하는 특정 부분에 스타일 적용
클래스명은 태그명과 겹쳐선 안되며, 클래스 이름 앞에 마침표 . 사용

클래스 선택자 앞에 태그를 쓰면 해당 태그에만 클래스 스타일 적용

  .bluetext {
      color:blue; /*.bluetext 클래스 글자색 변경*/
  }

  h2.bluetext {
      color:blue; /*<h2>태그에만 .bluetext 클래스 선택자 적용*/
  }

일부에만 클래스 선택자를 적용할땐 <span> 태그 사용하여 클래스명을 지정해준다.

id 선택자

원하느 특정 부분에 스타일 적용
클래스는 한 문서 안에서 여러 번 반복해 적용할 수 있지만, id 선택자는 문서 안에서 한 번만 적용할 수 있다.
중괄호 앞에 # 기호 사용

그룹 선택자

여러 선택자에 같은 스타일이 사용될 때, ,로 구분해 선택자를 나열한 후 스타일 적용

h1, h2 {
    color: blue;
}

05-3 캐스캐이딩 스타일 시트(CSS)

Cascading Style Sheet ‘위에서 아래로 흐르는 스타일 시트’

Cascading - 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼 지 결정한다.

여러 개의 스타일이 중복될 수 있기 때문에 정해진 원칙이 있다.

스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용
스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달.

스타일 우선 순위

중요도(Importance) 순으로 스타일을 선언하면 다음과 같다.

사용자 vs 제작자 - 저시력자, 색약자 등의 사용자 설정이 최우선
중요 스타일 vs 일반 스타일 - 스타일 뒤에 !important를 붙이면 다른 어느 스타일보다 최우선으로 적용해야 함을 뜻함
브라우저 스타일 - 기본 텍스트, 하이퍼링크 등의 브라우저 스타일

또한 명시도(Specificity)에 따라 얼마나 한정지을 수 있는 지 구분해서 스타일 우선순위를 적용할 수도 있다. 즉 광범위한 요소보다 정확히 필요한 요소에 높은 순위가 주어진다.

인라인 스타일 - 해당 태그 안에 속성 지정
id 스타일 - 한 문서 안에 한 번만 적용되는 특정 부분 지정
class 스타일 - 한 문서 안에서 여러번 사용할 수 있는 특정 부분 지정
tag 스타일 - 특정 태그에 모두 적용

스타일 시트에서 중요도와 명시도가 같다면 소스의 순서에 따라 결정된다. 나중에 쓴 소스 가 우선 적용된다.

스타일 상속

태그 간의 포함 관계에 따라 부모 요소, 자식 요소를 나눈다.

ex) <body> 태그 스타일을 지정할 경우, 그 안에 있는 <h1>이나 <ul> 태그도 그 스타일을 전달받는다. 이를 ‘상속’이라고 한다.

글자 색은 상속되지만 배경 이미지는 상속되지 않는 등 모든 요소가 상속되는 것은 아니다.

05-4 CSS3과 CSS모듈

CSS3 부터는 배경이나 글꼴, 박스 등 주제별로 규약을 만들었는데 이것을 ‘CSS 모듈’이라고 한다. 모듈이 여러 개이기 때문에 CSS3는 한번에 표준 규약이 정해지지 않는다.

접두사

표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 접두사를 붙여 브라우저별로 구분해야 한다.

-webkit- - 웹 키트 방식 브라우저 용 (사파리, 크롬)
-moz- - 게코 방식 브라우저 (모질라, 파이어폭스)
-o- - 오페라 브라우저
-ms- - 익스플로러 브라우저

브라우저 접두사를 자동으로 붙이려면 -prefix-free라는 자바스크립트 파일을 이용한다. 홈페이지에서 다운로드 후 script 태그로 적용한다.

<head>
    <script src="prefixfree.min.js"></script>
    <style> </style>
    ...
</head>

References

Do it! HTML5+CSS3

[CSS3] CSS 기초

Study Note