티스토리 뷰
CSS(Cascading Style Sheets)
선택자(selector) : 선택을 해주는 요소( ex) p{padding:10px}에서 p가 선택자)
스타일 시트 : 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 ㅏㅎㄴ 군데 묶어 놓은 것
1. 내부 스타일 시트 : head태그안에 style태그를 적용하는 것
2. 외부 스타일 시트 : 외부에서 스타일을 가져오는 것(head안에 link태그로)
<link rel="stylesheet" href="css/style.css">3. 인라인 스타일 : 간단한 스타일 정보라면 스타일을 적용할 대상에 직접 표시
<p style="color:blue";> 블루베리</p>
주요 선택자
전체 선택자 : *
태그 선택자 : 태그
클래스 선택자 : .클래스
id 선택자 : #id
그룹 선택자 : 둘 이상 요소에 같은 스타일 적용하기(h1,h2)
캐스케이딩 스타일 시트(CSS)
캐스케이딩+스타일시트=CSS
캐스케이딩(Cascading) : 위에서 아래로 흐르는 스타일 시트
-
스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다.
얼마나 중요한가?
a. 사용자 스타일 시트가 최우선(제작자가 제어 불가능, 특별한 조건이 필요한 사용자를 위한 것)
b. 제작자가 만든 스타일 중 !important가 붙은 스타일(!important만 앞에 붙이면 돼)
c. 제작자가 만든 일반 스타일(우리가 만드는 스타일)
d. 기본적인 브라우저 스타일 시트(브라우저의 기본 스타일)
적용 범위가 어디까지 인가?
a. 인라인 스타일
b. id 스타일
c. 클래스 스타일
d. 태그 스타일
소스에서의 순서
나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.
-
스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는 것
css와 브라우저 접두사(prefix)
아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사를 붙인다.
-webkit- 웹키드 방식 브라우저용(사파리, 크롬)
-moz 게코 방식 브라우저용(모질라, 파폭)
-o- 오페라 브라우저
-ms- 마이크로소프트 인터넷 익스플로어
=> 귀찮아 일일히 붙이기 => https://leaverou.github.io/prefixfree/
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Test drive Test the prefixing that -prefix-free would do for this browser, by w
leaverou.github.io
prefixfre..min.js 파일 다운로드하고 아래와 같이 입력하면 접두사 빼도 돼
<head>
<script src="prefixfree.min.js"></script>
</head>
'책 > do it html' 카테고리의 다른 글
| CSS 레이아웃 (0) | 2020.08.27 |
|---|---|
| CSS 박스 모델 (0) | 2020.08.26 |
| 색상과 배경을 위한 스타일 (0) | 2020.08.25 |
| 텍스트 관련 스타일 (0) | 2020.08.23 |
| HTML정리1(저장용) (0) | 2020.08.18 |