CSS란
CSS는 Cascading Style Sheets를 의미한다.
Cascading : 계단식
Style : 멋을 내다
Sheets : (종이) 한 장
CSS 자체는 독립적으로 존재할 수 있지만, CSS의 목적은 HTML 문서의 스타일 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 의미가 없다.
CSS 기본 문법
선택자 {
속성명 : 속성값;
}
p {
color : red;
}
선택자 : 어떤 요소에 스타일을 적용할지에 대한 정보
{중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역
속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
속성값 : 어떻게 정의하고 싶은지에 대한 정보
HTML에 CSS를 더하려면
- 인라인 스타일 : 태그에 직접 기술하기
- 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기
- 문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
인라인 스타일
태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식.
선택자는 필요없다.
<p style = "color : blue;"> 글자를 파랗게 만들어줘 </p>
스타일 태그
HTML 문서에 <style></style> 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있다.
<style> p{color : red;} </style>
문서 간의 연결
확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고, HTML 문서에 이를 연결해 줄 수 있다. 이때는 <link> 태그를 사용한다.
<link href = "./style.css" rel = "stylesheet">href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
rel : 현재 문서와 외부 소스의 연관 관계를 기술하는 속성
<link> 태그는 HTML 문서의 <head></head> 내부에서 사용해야 한다.
프론트 엔드와 UX 디자인 찍먹 중인 보안 전공생