[CSS] CSS란?

WEB/CSS

Sh-YE 2024. 4. 27. 18:02

: 계단식으로 스타일을 정의하는 문서

-> HTML은 웹문서에 콘텐츠를 정의하는 언어.

CSS는 웹문서의 콘텐츠에 스타일을 추가하는 언어

(결론적으로, HTML과 함께 사용되지 않는 CSS는 단순 텍스트 일 뿐이다)

1. 인라인스타일

: HTML 태그에 style속성을 추가하여 요소에 직접적으로 스타일 정의

※ 웹콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.

(why? 서로 역할이 다른 코드들을 서로 분리해서 관리해야 코드 유지보수가 편리함)

<p style="color: blue;">
 파란색 글자
 </p>

2. 스타일 태그

: HTML 문서에 <style></style>태그를 추가하여 그 안에 CSS코드 작성

* style태그는 일반적으로 HTML의 head 태그 내부에 주로 위치

<style>
 /* style 태그 안에는 CSS코드를 작성해야한다 */
 p{ 
  color: red; 
 }
 </style>

3. 문서간의 연결

: 스타일 문서를 따로 작성하여 HTML 문서와 연결하는 방식

( 확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS코드를 작성하고,

HTML문서에 이를 연결해줄 수 있다. 이때는 <link>태그사용 )

=> <link>태그는 HTML문서의 <head> </head>내부에서 사용해야 한다

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