CSS 스타일과 스타일시트 만드는 법

CSS 스타일과 스타일시트 만드는 법~

공부한 내용 정리.

 

 

1. 태그 내장형 스타일 사용하기

<h1>태그에 style을 입력하는 방법이다.

 

<h1 style="color: #666666;">

 

이렇게 h1에 회색 글씨가 적용된 것을 볼 수 있당.

 

 

2. 내부 스타일 시트 작성하기

내장 스타일보다 나은 방법으로, 여러 요소를 컨트롤하는

CSS 스타일을 담는 스타일시트를 만드는 방법!

 

내부 스타일시트는 내장 스타일시트보다 더 편리하다.

맨 위에 한꺼번에 스타일을 모아두기 때문에

만들기도 쉽고 유지, 보수하기도 수월하다.

 

<style>을 입력한 후 엔터키를 친다음 </style>을 입력한다.

그런다음 아래와 같이 효과를 주면 된당. 

 

효과가 들어간 것을 확인할 수 있당.

 

 

3. 외부 스타일시트 작성

앞서 만든 스타일을 별도의 외부 스타일시트로 분리하는 작업도 있다.

 

외부 스타일시트는 내부 스타일시트보다 훨씬 더 간편하다.

웹 사이트 전반에 적용되는 모든 스타일을 한군데 모아놓고

볼 수 있기 때문이다. 

 

편집기에서 확장자를 css로 파일을 저장한다. 

 

그런 다음 기존에 있던 <style>과 </style> 사이에 있는

모든 코드를 복사해오면 된다.

style 태그는 따로 복사할 필요 없다.

 

이렇게 따로 저장해주고,

기존에 있는 html 파일에 있는 스타일은 모두 삭제해주면 된다.

 

그런 다음 </title>과 </head>사이에 

다음 코드를 입력하면 된다.

 

<link href=fonts.googleapis.com/css?family=Gravitas+One

rel="stylesheet">

 

이 코드 다음에 css파일명을 넣어주면 된다.

 

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

 

 

 

페이지 미리보기를 하면 서체와 이미지가 적용된 페이지를 확인할 수 있다.