[CSS] CSS 적용하기 & 예제 총정리 (적용방법, 우선순위, 문법)
- Web/HTML, CSS
- 2022. 12. 30.
CSS를 적용하는 3가지 방법
- 인라인 스타일(Inline Style)
- 내부 스타일 시트(Internal Style Sheet)
- 외부 스타일 시트(External Style Sheet)
웹 문서에 CSS를 적용시키기 위해서는 위의 3가지 방법이 있습니다.
※ 우선순위 : 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트
인라인 스타일(Inline Style)
See the Pen CSS사용예제1 by wjdxo513 (@wjdxo513) on CodePen.
인라인 스타일 방식은 html태그에 style 속성을 사용하여 직접 스타일을 지정하는 방식으로 특정 영역에 스타일을 단독 적용하고 싶을 때 사용할 수 있는 방법입니다. 하지만 이 방법을 너무 많이 사용하면 HTML과 CSS의 코드가 혼합되어 유지보수에 어려움을 겪고 HTML문서의 크기가 커져 웹 로딩속도를 느리게 한다는 단점이 있습니다.
내부 스타일 시트(Internal Style Sheet)
See the Pen CSS사용예제2 by wjdxo513 (@wjdxo513) on CodePen.
내부 스타일 시트 방식은 html문서의 <head> 태그에 <style> 태그를 삽입하는 방식으로 이 <head>가 적용되는 문서의 태그들에 스타일을 한 번에 삽입할 수 있습니다. 하지만 이 또한 HTML과 CSS를 완전히 분리하지 못하기에 유지보수 측면에서 한계점이 있습니다.
외부 스타일 시트(External Style Sheet)
See the Pen CSS사용예제3 by wjdxo513 (@wjdxo513) on CodePen.
CSS 확장자를 가지는 스타일 시트 파일을 만들고 이 파일을 HTML에 삽입하여 사용하는 방식입니다. 이렇게 CSS를 사용한다면 웹 문서 전체의 스타일을 일관성 있게 유지할 수 있고 유지보수 또한 CSS문서에 정의된 부분만 바꿔주면 모든 웹 문서에 일괄 적용되어 유지보수 측면에서 강점이 있습니다. 전문적인 웹 페이지를 만들고 싶다면 이 외부 스타일 시트를 활용하셔야 합니다.
<link rel="stylesheet" type="text/css" href="CSS파일명.css">외부 스타일 시트를 사용하려면 html에서 link 태그를 활용하여 사용할 CSS 파일을 연결시켜주면 됩니다.
CSS 문법
CSS의 문법은 선택자(selector)와 선언부(declaration)로 구분됩니다.
선택자(Selector)
선택자는 CSS를 적용하고자 하는 HTML태그, 클래스, ID값으로 지정할 수 있습니다. 클래스와 ID는 대소문자를 구분되며 반드시 문자로 시작해야 하고 영어, 숫자와 언더바(_)를 포함할 수 있습니다. 클래스는 어떠한 요소의 어떠한 수의 인스턴스에도 적용할 수 있으며, ID는 하나의 요소에만 적용할 수 있습니다. 선택자가 ID일 경우에는 앞에 #이 붙고, 클래스 일 경우에는 앞에 .가 붙습니다.
선언부(Declaration)
선언부는 중괄호 { }로 이루어진 부분을 말하며 선언 블록이라고도 합니다. 선언부는 목록으로 이루어지며 하나 이상의 선언들을 세미콜론(;)으로 구분하여 나뉩니다. 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다..
CSS 우선순위 스킴 (높은 순 -> 낮은 순)
'Web > HTML, CSS' 카테고리의 다른 글
| [CSS] 복합 선택자(Combinators)에 대하여 (일치, 자식, 후손, 인접형제, 일반형제) (3) | 2023.01.07 |
|---|---|
| [CSS] 선택자(Selector)에 대하여 (전체, 태그, 클래스, 아이디) (1) | 2023.01.04 |
| [CSS] CSS(Cascading Style Sheets)란 무엇인가? (0) | 2022.12.28 |
| [Html] iframe 태그 사용법 & 예제 총정리 (1) | 2022.12.26 |