728x90
CSS
@2024.03.28
CSS(Cascading Style Sheet)
💡
웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 Style sheet 언어로
HTML 이 웹 페이지의 구조를 정의한다면, CSS는 웹 페이지의 디자인과 스타일을 저장
CSS rule set(전체 구조)
p {
color : red;
}- 선택자(selectrot) :
p- HTML 요소 이름으로, 요소는 여러 개가 올 수 있다.
- 꾸밀 요소들을 선택
- 선언 :
color : red;- 꾸미기 원하는 요소의 속성을 명시
- 속성(property) :
color는 p 요소의 속성- 주어진 HTML 요소를 꾸밀 수 있는 방법
- 속성 값 :
red;
CSS 선언 방식
절대 경로 : root를 기준으로 경로 작성상대 경로 : 나를 기준으로 설정
인라인 선언 방식
- 비추천하는 방식으로, 비효율적이고 가독성이 떨어진다.
<head>
</head>
<body>
<div style= "color:orange; background-color:yellow;">
<body>내부 선언 방식
<head>
<style>
div {
background-color : black;
}
</style>
</head>링크 방식
- 가장 추천되는 방식
- 하나의 html에 여러 css를 링크 가능
<head>
<link rel="stylesheet" href = "css파일명.css" />
</head>@import 방식
- CSS에 다른 CSS 연결
@import url(css파일명.css);
CSS 적용 우선 순위
💡
!important(강제 적용) → 인라인 방식 → 내부 선언 방식 → 링크 방식
728x90
