TIL(Today I Learned)
3월 15일 TIL - CSS 기초
Hyerin P.
2023. 3. 15. 21:37
▷ CSS 정의
- html과 완전히 다른 컴퓨터 언어
- 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들을 디자인하기 위한 언어
▷ CSS 사용하기
- html 언어인 <style>태그를 이용하여 사용하기
<head>
<style type="text/css">
.logo {color: #eeeeee;}
</style>
</head>- html의 <link>태그를 이용하여 외부 파일로 포함하기
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>- @import를 이용하여 외부 파일로 포함하기
<head>
<style type="text/css">
@import url(style.css);
</style>
</head>- html 요소에 style 속성을 이용하여 인라인 스타일로 삽입하기
<body>
<p style="height:100px; color:blue">
</body>▷ CSS 기본 문법
- CSS는 선택자와 선언부로 나뉘고 선언부는 속성과 속성값으로 나뉜다.
- 선택자는 HTML 요소나 부여한 ID 혹은 class가 위치한다.
- 여러개의 속성과 속성값은 ;로 구분한다.
▷ CSS 적용 우선순위
- !important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자
- 삽입 위치 우선순위
- <head> 요소안의 style 요소
- <style> 요소안의 @import 문
- <link> 요소로 연결된 CSS 파일
- <link> 요소로 연결한 CSS 파일 안의 @import 문
- 최종 사용자가 연결한 CSS 파일
- 브라우저의 기본 스타일시트