INDEX

1. 크기 단위
2. 색상 단위
3. 스타일을 적용하는 몇 가지 방법
4. Link 요소로 연결
5. Style 요소로 적용
6. Style속성을 통해 적용

크기 단위

• px : 픽셀

• % : 비율

• em : %와 같은 상대적인 단위.

• • %와의 차이점

  • • em은 글자 크기를 기준으로 한다

    • • 15px에 2em을 주게 되면 30px이 됨
    • 동적인 페이지나, 글자 크기에 따라 다른 크기를 줘야 하는 경우 등에 많이 사용됨

색상 단위

• 색상이름

• • black, white와 같은 이름을 적어주는 방식.
  • 일단 17가지 표준색이 있고, 123가지 추가적인 색이 있음

• RGB

• • rgb(255,0,0)으로 표현

• HEX

• • #ffcc00으로 표현현

스타일을 적용하는 몇 가지 방법

• Link 요소로 연결
• style 요소로 적용
• style 속성을 통해 적용

Link 요소로 연결

• HTML 문서의 head 요소 안에 link요소를 통해서 css파일을 연결 한ㄴ 방법
• 이 link를 여러 개 넣음으로써, 여러 css파일을 연결할 수 있음

<link href="common.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<!-- common.css와 main.css 둘 다 연결합니다. -->

Style 요소로 적용

• HTML문서와 css문서를 분리하지 않고 넣는 방법
• 권장하는 방법은 아니지만 해당 스타일을 오로지 해당 페이지만 쓴다거나, 임시적으로 테스트를 위한 페이지를 만들 때 주로 사용

<style type="text/css">
    h1{
        color: red;
    }
</style>

Style속성을 통해 적용

• 해당 요소만 스타일을 줄 때 사용됨
• 역시 권장하는 방법은 아니며, 보토 게시판이자 블로그에서 글을 쓸 때와 같이 페이지 내에 link나 style요소를 사용할 수 없을 때 사용.
• 임시테스트 페이지 말고도 스크립트를 통해서 요소의 모양을 제어할 때에도 보통 style속성을 이용

<h1 style="color:#fff;font-size:2em;">Hello world</h1>