이진욱의코딩

스타일시트 적용방법에 대해 알아봅시다. 본문

CSS

스타일시트 적용방법에 대해 알아봅시다.

Crucifi 2019. 9. 24. 00:09

저번 시간까지 html파트를 끝내고 이번 시간부터는 css에 대해 알아봅시다.

css는 html문서에 디자인을 입힌 언어입니다.

 

예시를 먼저 보도록하죠.

 

 

 

 

 

놀랍게도 위의 두 사진은 똑같은 페이지의 똑같은 내용입니다.

같은 글에서 css를 첨가해서 저렇게 만든 거지요. 이게 바로 css입니다.

 

스타일시트 적용방법에 대해 알아보겠습니다.

스타일시트 적용방법은 총 3가지가 있으며, 각각의 장단점에 대해 알아보도록 하겠습니다.

 

1. 인라인 방식

 -> 태그에 직접 적용하는 방법으로, style속성을 적용할 수 있습니다.

 

<h3 style="color:red;">인라인 방식</h3>
    <p>태그에 직접 적용하는 방법으로, style속성을 적용한다.</p>

2. 임베디드 방식

 -> head태그 내에 style태그를 적용하는 방법입니다.

 

  <style>
      h3 { color:white;}
    </style>

3. 외부 파일로 저장하는 방식

 -> 웹 제작 시 가장 보편화되고 관리가 수월한 방법이다.

 

  <link href="style1.css" rel="stylesheet">