[웹 프로그래밍 HTML5, CSS] 스타일시트 사용해보기 / stylesheet

CSS 스타일 시트

스타일 시트는 두 가지 방법이 있습니다.
1. 내부 스타일시트
2. 외부 스타일시트

내부 스타일 시트

스타일시트를 가장 손쉽게 사용할 수 있는 방법입니다.

style 태그를 사용해 HTML 페이지 내부에 스타일시트를 직접 입력하는 방법으로 사용하실 수 있습니다.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>이곳에 제목을 입력해보세요.</title> 
    <style> 
    	h1{ color: white; background: black; } 
    </style> 
  </head> 
<body> 
  <h1> 이곳에 출력할 글을 써보세요. </h1> 
</body> 
</html>

외부 스타일시트

외부 스타일시트는 스타일시트를 별도로 생성하고 link 태그의 href 속성을 사용해 HTML 페이지에 불러오는 방식으로 사용합니다.

첫 번째로 스타일시트를 별도로 생성하기 위해 새 파일을 만든 후 아래 소스 코드를 입력한 후,
파일제목.css로 만들어주세요. [파일 제목 뒤에 .css를 붙여야 합니다.]

그 후 HTML 소스 코드에 link 태그를 사용하여 스타일시트를 불러옵니다.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>이곳에 제목을 입력해보세요.</title> 
    <link rel="stylesheet" href="Style.css" /> 
  </head> 
<body> 
  <h1> 이곳에 출력할 글을 써보세요. </h1> 
</body> 
</html>

#외부 스타일시트를 사용한 소스

'Study > HTML | CSS' 카테고리의 다른 글

HTML 기초 지식 및 태그 (0)	2021.12.05

CSS 스타일 시트

'Study > HTML | CSS' 카테고리의 다른 글

티스토리툴바