CSS 기본과 사용법을 알아보자!

CSS 기본 문법과 사용 방법

CSS(Cascading Style Sheet)는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적으로 만들어졌습니다. CSS를 정의하는 방법으로는 4가지가 있습니다. 4가지 방법을 같이 알아보죠~
참고로 CSS에서 주석은 /* 내용 */로 표기합니다.

CSS 레벨

CSS 명세는 World Wide Web Consortium에서 관리합니다. CSS는 세 개의 주 레벨이 정의되어 있고 이 레벨들은 버전이나 세대라고 볼 수 있고, 현재 CSS1, CSS2 및 CSS3가 정의되어 있습니다.

---

내부 스타일 시트

<style type = "text/css">
    p {color :red;};
</style>

외부 스타일 시트

<link rel = "stylesheet" type="text/css" href="style.css">

@import

<style type = "text/css">
    @import url("style.css");
</style>

인라인 스타일

<p style ="color:red;">1</p>

---

정리

방법	적용 방식	설명
내부 스타일 시트	<style></style>	HTML문서 안에 style태그로 기재하여 문서내에 CSS가 함께 저장된다.
외부 스타일 시트	<link rel = "stylesheet" type="text/css" href = "style.css">	스타일 속성들을 따로 저장하여 HTML 문서 에 파일명으로 연결할 수 있습니다. link태그를 이용해서 선언합니다.
@import	스타일 태그 안에 @import url("style.css")	@import는 CSS 안으로 다른 CSS 파일을 불러들일 경우 사용합니다. CSS의 맨 윗줄에 기술합니다.
inline-style (인라인 스타일)	<p style="color:red";">	해당 요소에 style="" 형식으로 기술 합니다. 우선순위가 높아야 하는 상황에서 사요할 수 있으나 공통으로 수정할 수 없고 일일히 html을 열어서 편집해야 하므로 일반적으로 많이 사용하지는 않습니다.