티스토리 뷰
CSS는 Cascading Style Sheets의 약자이다.
Cascading > 폭포처럼 흐른다 > 우선순위
캐스케이딩(Cascading)
하나의 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다.
이 때 충돌을 피하기 위해서 CSS 적용 우선순위가 필요하다.
1. 중요도 : CSS가 어디에 선언되었는 지에 따라서 우선순위가 달라진다.
| (1) | 인라인 스타일 | HTML 요소 내부에 style 속성으로 사용 | <a style=""> |
| (2) | 내부 스타일 시트 | HTML 문서의 style 태그 안에 위치 | <h> <style> |
| (3) | 외부 스타일 시트 | CSS 파일을 외부에 따로 만들어서 불러오는 방법 | 외부에서 링크로 추가하는 방법 |
| (4) | 웹 브라우저 기본 스타일 | 브라우저 기본 스타일(기본 마진) |
우선순위는 (1) > (2) > (3) > (4) 순이다.
인라인 스타일의 우선순위가 가장 높다.
2. 명시도 : 명확하게 특정할수록 우선순위가 높아진다.
!important > 인라인 스타일 > 아이디 선택자 > 클래스 선택자
> 태그 선택자 > 전체 선택자 > 상속받은 속성
!important를 이길 수 있는 스타일은 없다.
하지만 중요도에 따라서 같은 important일지라도 우선순위가 달라질 수 있다.
3. 선언순서 : 나중에 선언된 스타일이 우선 적용된다.
여러 개의 클래스명을 사용하는 경우에도 나중에(아래에) 선언된 스타일이 우선 적용된다.
구체화시킨 스타일이 더 우선순위가 높다.
클래스보다 id 우선순위가 더 높다.
margin / padding
(단축키)
alt+클릭: 부분별 그리드 모드
alt+shift: 한번에 그리드 모드 가능
position 위치
static 고정된
1.relative 상대적인
2.absolute 절대적인
좌측상단이 0,0
z-index : 1부터 시작,
앞으로 내보낼 거를 +1
color
https://materializecss.com/color.html
font
font-size(폰트크기, 글자크기)
1.절대적인 크기(px)
텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용.
절대적 크기로 설정된 텍스트는 모든 부라우저에서 같은 크기로 표현된다.
2.상대적인 크기
텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식이다.
또한, 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있다.
※ 크기 단위(기본 크기 : 16px)
- 백분율 단위(%)
기본 크기를 100%로 놓고, 그에 대한 상대적인 크기 설정
- 배수 단위(em)
부모 요소에 중첩되어 1.0은 100%, 1.5는 150%로 상대적인 크기
- 배수 단위(rem)
부모에 상관없이 HTML 기본 크기에 적용되어 상대적인 크기 설정(백분율)
- 픽셀 단위(px)
스크린 픽셀을 기준으로 하는 절대적인 크기를 설정한다.
가상 요소
실제 태그가 없는데
css 태그를 만드는 것
:: '' 사용
ex) ::after, ::before
미디어 쿼리(반응형)
viewport라는 필드에, content 속성에 작성한 값을 전달한다.
현재 width를 접근한 장치를 width로 수정하며, 비율을 1:1로 수정한다.
미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러 가지 화면을 구성하는 기술이다.
@media only all and(조건문) {실행문}
| @media | 미디어 쿼리가 시작됨을 표시 |
| only | 미디어 쿼리 구문을 해석하라는 명령어(생략 가능) |
| all | 미디어 쿼리를 해석해야 할 대상을 나타냄(전체 대상, 생략 가능) |
| and | 앞과 뒤의 조건을 나타낸다(all과 조건식 연결, 생략 가능) |
| (조건문) | 해당 조건을 설정 |
| {실행문} | 조건에 따라 실행할 스타일 설정 |
모니터
패드
모바일
'2022 > css' 카테고리의 다른 글
| day03[시맨틱 태그, 클론코딩] (0) | 2022.09.13 |
|---|---|
| day01[VSCode설치,about CSS,선택자] (0) | 2022.08.31 |