# FE/HTML5, CSS3

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. 웹 브라우저 기본 스타일

728x90

'# FE > HTML5, CSS3' 카테고리의 다른 글

[CSS3] margin 속성 한 번에 기재할 때 순서  (0) 2020.04.13
CSS 선택자  (0) 2020.04.08
CSS 기본 속성  (0) 2020.04.01
ID, Class, Name 속성 비교하기  (0) 2020.03.26
HTML5 30분 기초 완성 2편  (0) 2020.03.24
HTML5 30분 기초 완성 1편  (0) 2020.03.24
Visual Studio Code Extension (플러그인)  (0) 2020.03.09