🍑 CSS (Cascading style sheets)
HTML 문서를 스타일링 하는 언어
HTML XHTML XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
구조 (html) 와 비주얼 (css) 을 구분하여 관리하면 유지보수 및 가독성이 좋아진다.
캐스캐이딩 (Cascading)
하나의 요소에 둘 이상의 스타일이 적용될 때는 우선순위와 상속에 따라 적용될 스타일이 결정된다.
스타일 우선순위 : 중요도와 적용 범위에 따라 스타일이 정해짐
중요도 : 사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일
적용 범위 : !important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일
스타일 상속 : 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 전달
(배경색, 배경이미지는 상속 안됨)
선택자 {속성: 속성값; ... }
CSS 스타일 문서의 기본 문법
h1 { <!-- 선택자 h1 과 선언시작 기호인 중괄호 -->
background-color: white; <!-- 선택자에 부여될 속성과 속성값 -->
font-size: 40px;
} <!-- 선언 끝 기호인 중괄호 -->스타일 시트의 종류
스타일 시트 : html 문서를 꾸며줄 css 스타일 문서를 의미
브라우저 기본 스타일 : 각 브라우저에서 기본적으로 사용하는 스타일
사용자 스타일
- 인라인 스타일 : style 속성을 사용하여 필요한 요소에 직접 스타일을 부여
- 내부 스타일 시트 : 문서 앞 부분에 부여할 스타일을 정의하여 관리
- 외부 스타일 시트 : 외부 스타일 문서를 link 속성을 이용해 불러온다.
🍰 인라인 스타일
style 속성을 사용하여 필요한 요소에 직접 스타일을 부여
<p style="color:blue;">🍰 내부 스타일시트
HTML 문서 내에서 <head> 와 </head> 사이에 <style> 태그로 스타일을 정의
<html>
<head>
<style>
h1 {
background-color: #eee;
}
</style>
</head>
</html>🍰 외부 스타일시트
css 확장자를 가진 스타일 문서를 html 문서에 연결하여 사용
분리된 디자인 파일로 웹페이지를 일관성 있게 유지보수 가능
<head>
<link rel="stylesheet" href="stylesheet/style1.css">
</head>css 선택자의 종류 -기본편
- 전체 선택자
- 타입 선택자
- 클래스 선택자
- 멀티클래스 선택자
- id 선택자
- 그룹 선택자
🍬 전체 선택자
문서의 모든 요소에 스타일을 적용
* {
속성: 속성값; }🍬 타입 선택자
특정 태그를 사용한 모든 요소에 스타일을 적용
선택자 {
속성: 속성값; }🍬 클래스 선택자
class="클래스명" 클래스가 정의된 특정 요소를 선택하여 스타일을 적용
문서 내에서 여러번 사용 가능하다.
.클래스명 {
속성: 속성값; }
...
<h1 class="클래스명"></h1>🍬 멀티클래스 선택자
여러개의 클래스를 묶어 스타일을 적용 (공백없이 붙여서 연결)
.클래스명1.클래스명2 {
속성: 속성값; }
...
<input type="text" class="클래스명1">
<input type="password" class="클래스명2>🍬 id 선택자
id="아이디명" 아이디가 정의된 특정 요소를 선택하여 스타일을 적용
문서 내에서 한번만 사용 가능하다.
#아이디명 {
속성: 속성값; }
...
<ul id="아이디명"></ul>🍬 그룹 선택자
같은 스타일을 부여할 요소들을 묶음
선택자1, 선택자2 {
속성: 속성값; }