티스토리 뷰
선택자 {
속성:속성값;
}
External CSS - 외부방식
hello.html
<link href="hello.css" rel="stylesheet">
<p id='hello'>hello</p>hello.css
#hello {
color: blue;
}
사용하는 데 가장 효율적. CSS 최대 장점!
스타일 소스를 독립된 파일(*. ) 로 만들고 웹문서와 연결시켜 적용한다.
하나의 스타일 파일로 여러 웹문서를 동시에 같은 스타일로 적용하거나 수정이 가능하다.
<link href="파일이름.css" rel="stylesheet">
Internal CSS - 내장방식
스타일 소스를 웹문서의 head 영역에 적용한다. 해당 문서에만 적용된다.
<style>
#hello {
color: blue;
}
</style>
<p id='hello'>hello</p>
Inline CSS - 인라인 방식
웹문서 body영역의 해당 태그 뒤에 직접 적용한다.
<p style="color:blue;">hello</p>
소스가 길어지고 통일성이 떨어지며 유지보수에도 불리하다.
가장 추천하지 않는 방식이나, 적용우선순위가 가장 높다.
작업 환경상 body영역만 수정 가능한 상황일 때 사용한다.
CSS 대표 선택자
- tag선택자 - 태그 그대로 선택자로 활용한다. 자동 적용, 강제 적용.
- id선택자 - 태그 뒤에 id를 추가하고 #id를 불러와서 선택자로 활용한다.
해당 스타일 내용을 중복적용 불가(id값이 유일한 값)하므로 주로 구조적인 용도로 쓰인다.
- class선택자 - 태그 뒤에 class를 추가하고 .class를 불러와서 선택자로 활용한다.
해당 스타일내용을 중복이 가능(class 값은 복수 적용)하므로 주로 디자인적인 용도로 쓰인다.
- * 전체선택자 - <html>태그까지 아우르는 전체 선택자.
'배운 것 기록 > web' 카테고리의 다른 글
| 페이지 이동 종류와 차이점 (0) | 2022.07.04 |
|---|---|
| [html] html5 추가 input 속성 (0) | 2022.05.23 |
| [html] form 태그 종류 (0) | 2022.05.16 |
| [js] 객체 기능 함수 이벤트(input) (0) | 2022.05.13 |
| [js] 내장객체 입력, 목록 (0) | 2022.05.11 |
댓글