CSS Basic

스타일과 스타일 시트

스타일은 HTML에서 자주 사용하는 글꼴, 색상, 정열 등등 문서의 겉모습을 결정짓는 내용들을 가리킨다.

왜 스타일을 사용할까?

웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.[CSS Zen Garden]
다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.

스타일 형식

스타일 표기법 + 주석

/*아래 3가지는 모두 같은 소스이다.*/
h2{font-size: 20px; color: orange;}

h2{
    font-size: 20px;
    color: orange;
}

h2
{
    font-size: 20px;
    color: orange;
}

스타일 시트는 한 문서에 반복해 쓰이는 스타일을 모아 놓은 것이다.
- 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일(<head></head>안에서 <style></style>태그 내에 정의
- 외부 스타일 시트 : .css확장자 사용
  <link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
- 인라인 스타일 : 간단한 스타일 정보라면 스타일을 적용할 대상에 직접 표시
  <p style="color: blue;"> 파란색 </p>

주요 선택자(selector)

전체 선택자(*) : 모든 요소에 스타일 적용
태그 선택자 : 특정 태그를 사용한 요소에 스타일 적용
클래스 선택자(.) : 특정 부분에 스타일 적용(여러번 적용가능)
id 선택자(#) : 특정 부분에 스타일 적용(한 번만 적용할 수 있다.)
그룹 선택자(,) : 둘 이상 요소에 같은 스타일 적용

/*전체*/
*{
    padding: 0;
    margin: 0;
}
/*태그*/
h2{
    font-size: 20px;
    color: orange;
}
/*클래스*/
.bluetext{
    color: blue;
}
/*특정 태그에 클래스에만 적용*/
h2.bluetext{
    color: blue;
}
/*id*/
#container{
    background: #ffa00;
    width: 400px;
    height: 200px;
    margin: 0 auto;
}
/*그룹*/
p, h1{
    text-align: center;
}

태그와 요소의 차이

태그는 말 그대로 태그 자체를 가리키고, 요소는 태그가 적용된 것을 가리킨다.

캐스캐이딩 스타일 시트(CSS)

Cascading 이란 위에서 아래로 흐른다는 의미로, 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정한다.

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

스타일 우선순위

중요도(Improtance) 1. 사용자 스타일 시트가 최우선(저시력자, 색약자) 2. 중요 스타일(!important) : 최우선 적용해야 할 스타일은 뒤에 !important붙인다. 3. 기본적인 브라우저 스타일 시트
명시도(Specificity) 1. 인라인 스타일 : 태그 안에 style속성 사용 2. id 스타일 3. 클래스 스타일 4. 태그 스타일
소스에서의 순서 : 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

스타일 상속

자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는 것을 스타일 상속이라한다.하지만 주의할 것은 스타일의 모든 속성이 상속되는 것은 아니다. 배경이미지나 배경색이 자식 요소에 상속되지 않는다.

CSS3와 CSS 모듈

CSS3는 이전 버전보다 정교하고, 화려한 화면을 구성하며 애니메이션까지 지원한다.
CSS모듈은 배경, 글꼴, 박스 모델 등 수십 개 기능을 주제별 규약
CSS3는 표준이라고 묶어 말 할 수 없고 계속 새로운 CSS 모듈이 등장할 수 있다.
CSS 관련 정보

CSS3와 브라우저 접두사(prefix)

-prefix-free자바스크립트 파일을 이용하면 매번 브라우저 접두사를 붙이지 않아도 된다.

참고

Do it! HTML5+CSS3 웹 표준의 정석

PreviousHTML Basic NextHTML5 Sementic Tag

Last updated 3 years ago

/*전체*/ *{ padding: 0; margin: 0; } /*태그*/ h2{ font-size: 20px; color: orange; } /*클래스*/ .bluetext{ color: blue; } /*특정 태그에 클래스에만 적용*/ h2.bluetext{ color: blue; } /*id*/ #container{ background: #ffa00; width: 400px; height: 200px; margin: 0 auto; } /*그룹*/ p, h1{ text-align: center; }