CSS3 기초 내용 정리

CSS3

공부한 곳

• TCPSCHOOL.com
•  

 

---

공부 내용

 

CSS3

CSS란 Cascading Style Sheets의 약자

CSS는 HTML 요소들이 화면에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어

 

 

CSS 적용 방법

• 인라인 스타일
• 내부 스타일 시트
• 외부 스타일 시트

 

 

1. 인라인 스타일

HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법

해당 요소에만 스타일이 적용됨.

<p style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</p>

 

2. 내부 스타일 시트

내부 스타일 시트를 이용한 방법은 HTML 문서의 태그 내에 <style> 태그를 사용하여 스타일을 지정

해당 HTML 문서에만 스타일이 적용됨.

<style>
    body { background-color: lightyellow; }
    p { color: red; text-decoration: underline; }
</style>

 

3. 외부 스타일 시트

웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줌.

스타일을 적용할 모든 웹 페이지의 태그 내에 태그를 사용하여 외부 스타일 시트를 포함시킴

 

3.1 HTML 문서에서

<link rel="stylesheet" href="/examples/media/expand_style.css">

 

3.2 CSS 파일

body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }

 

 

스타일 적용의 우선순위

1. 인라인 스타일

2. 내부 / 외부 스타일 시트

3. 웹 브라우저 기본 스타일