(Do it! HTML5 + CSS3) 05. CSS 기초

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

  1. 스타일 주석: /* */

  2. 스타일과 스타일 시트
    웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많다. 이런 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것을 '스타일 시트'라고 한다.
    스타일 시트는 문서 안에서 사용할 스타일 규칙들을 정의한 '내부 스타일 시트'와 별도의 스타일 파일을 만들어 연결해 사용하는 '외부 스타일 시트'로 나뉜다.

2-1. 내부스타일 시트
<head>태그 안의 <style>태그 내부에 작성한다.

2-2. 외부스타일 시트
<head>태그 안에<link rel="stylesheet" href="외부 스타일 파일 경로">를 사용해 외부 스타일 시트 파일을 연결 한다.

2-3. 인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.

05-2 주요 선택자

  1. 전체 선택자- 모든 요소에 스타일 적용하기
    * { margin:0; padding:0;}

  2. 태그 선택자- 특정 태그를 사용한 요소에 스타일 적용하기

p {
   font-size: 12px;
   font-family: 돋움;
   }

  1. 클래스 선택자- 특정 부분에 스타일 적용하기

    .bluetext { color: blue; }

  2. id 선택자- 특정 부분에 스타일 적용하기

    #container { width: 600px; padding: 15px; }

  3. 그룹 선택자- 둘 이상 요소에 같은 스타일 적용하기 

    이름1, 이름2{ 속성: 속성 값 }

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

    1.캐스케이딩(Cacading)의 의미:
    '위에서 아래로 흐르는 스타일 시트'라는 뜻이다.
    선택자에 적용된 많은 스타일 중에서 어떤 스타일을 나타낼지 결정함을 뜻한다.
    스타일 간의 충돌을 막기 위한 방법이 '위에서 아래로 흐르며 적요오디는 방법'이다.

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

1-1. 스타일 우선순위

얼마나 중요한가?

이때 우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말한다.
중요한 순서대로 차례로 나열한 것이다.
(1) 사용자 스타일 시트의 중요 스타일
(2) 제작자 스타일 시트의 중요 스타일
(3) 제작자 스타일 시트의 일반 스타일
(4) 기본적인 브라우저 시트

(1)사용자 스타일 시트가 최우선!
사용자 스타일 시트란 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트를 말한다. 이 스타일 시트는 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수는 없다.

(2)제작자가 만든 스타일 중 !important가 붙은 스타일
제작자 스타일 시트는 사이트를 제작하면서 만든 스타일 시트를 말한다. 제작자는 스타일을 정의할 때 다른 어느 스타일보다 최우선으로 적용해야 할 스타일에는 !important를 붙일 수 있다.

(3) 제작자가 만든 일반 스타일
사이트를 제작하면서 만든 스타일들이다. 적용범위에 따라 달라진다.

(4) 기본적인 브라우저 스타일 시트
브라우저의 스타일 시트란 브라우저들마다 기본적으로 지정하고 있는 스타일이다. 예를 들어 스타일 시트에서 글자 색을 따로 지정하지 않으면 검은색으로 표시된다.

적용 범위가 어디까지 인가?

하나의 요소에 여러 스타일이 적용될 경우 스타일이 충돌한다면 스타일 적용 범위에 따라 우선순위를 정할 수 있다. 스타일 적용 범위가 좁을 수록 순위가 높아진다. 가장 중요한 것 부터 나열한 것이다.

(1) 인라인 스타일
(2) id 스타일
(3) 클래스 스타일
(4) 태그 스타일

소스에서의 순서
스타일 시트에서 중요도와 적용 범위가 같다면 스타일 우선순위를 정하는 것은 소스의 순서이다.
소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

1-2. 스타일 상속
태그들은 서로 포함관계가 있는데 포함하는 태그를 부모요소, 포함된 태그를 자식요소라고 한다. 부모태그의 스타일이 그대로 자식 태그들에게도 적용된다.

이렇게 상속을 이용하면 스타일 시트를 효과적으로 만들 수 있다.
다만, 스타일 상속에서 주의 할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니라는 점이다.
글자 색은 자식 요소로 상속되지만 부모 요소에 배경 이미지나 배경색이 있었다면 자식 요소에 상속되지 않는다.

05-4 CSS3와 CSS 모듈

1.css3 란?

css3는 이전 css2나 css1보다 정교하고 화려한 화면을 구성할 수 있고 애니메이션ㄲ지 지원한다.
css2 규약 안에는 스타일과 관련된 것들이 한꺼번에 담겨 있기 때문에 덩치가 크고 복잡해 한 번에 업데이트하기 쉽지 않다는 단점이 있었다.
그래서 css3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들었다.
이것을 css 모듈이라고 한다.

모듈별로 진행 속도도 다르고 필요에 따라 새로운 모듈이 생기기 때문에 css3는 한번에 표준 규약이 결정되지 않는다. css3는 css3 표준이라고 하나로 묶어 말할 수 없고 계속 새로운 css 모듈이 등장할 수 있다.

W3C 문서를 보면 그 문서가 표준화 단계 중 어디까지 와 있는지 표시되어 있다.
w3c 표준화 단계

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

표준 규약이 만들어졌더라도 이전 버전의 모던 브라우저 사용자를 고려해 계속 브라우저 접두사를 붙여 사용하기도 한다.

주로 사용하는 브라우저 접두사는 다음과 같다.

접두사설명
-webkit웹키트 방식 브라우저용(사파리, 크롬 등)
-moz-게코 방식 브라우저용(모질라, 파이어폭스 등)
-o-오페라 브라우저
-ms-마이크로소프트 인터넷 익스플로러

브라우저 접두사를 붙여 사용할 때는 각 브라우저 접두사를 붙인 속성을 먼저 쓰고 표준이 정해진 후 사용할 속성을 맨 마지막에 사용한다.
이렇게 하면 나중에 표준 속성이 결정된 후 앞에 썼던 브라우저 접두사가 붙은 속성들만 지우면 된다.

ex) 화면을 3단으로 편집할 때 사용하는 column-count라는 속성은 아직 브라우저마다 지원하는 방법이 다르기 때문에 다음과 같이 사용해야 한다.

-webkit-column-count:3;/*사파리와 크롬 브라우저용 속성*/
-moz-column-count:3/*파이어폭스 브라우저용 속성*/
column-count:3;/*표준이 정해진 후 사용할 속성*/
  1. 브라우저 접두사 자동으로 붙이기
    '-prefix-free'라는 자바스크립트 파일을 이용하면 매번 브라우저 접두사를 붙이지 않고도 편리하게 css3 속성을 사용할 수 있다. http://leaverou.github.io/prefixfree/ 사이트에 접속한 후 화면 왼쪽 위에 있는 [Only 2KB gzipped] 부분을 클릭해 js 파일을 다운로드 받는다.
팀프로젝트 2주차
[JavaScript] 모던 JS 기본 동작 원리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage