CSS(Casacading Style Sheets)
스타일을 지정하기 위한 언어
선택하고, 스타일을 지정한다.
h1{
color : blue;
font-size: 15px;
}CSS
- CSS구문은 선택자를 통해 스타일을 지정할 HTML 요소를 선택
- 중괄호 안에서는 속성과 값, 하나의 쌍으로 이루어진 선언을 진행
- 각 쌍은 선택한 요소의 속성, 속성에 부여할 값을 의미
- 속성 : 어떤 스타일 기능을 변경할지 결정
- 값 : 어떻게 스타일 기능을 변경할지 결정
CSS 정의 방법
- 인라인(권장 X)
- 내부참조
<style> - 외부참조 - 분리된 CSS파일
CSS with 개발자 도구
- styles : 해당 요소에 선언된 모든 CSS
- computed : 해당 요소에 최종 계산된 CSS
CSS Selector
- 기본 선택자
- 전체 선택자, 요소 선택자
- 클래스 선택자, 아이디 선택자, 속성 선택자
- 결합자(Combinators)
- 자손 결합자, 자식 결합자
- 일반 형체 결합자, 인접 형체 결합자
- 의사 클래스/요소(Pseudo Class)
- 링크, 동적 의사 클래스
- 구조적 의사 클래스, 기타 의사 클래스, 의사 엘리먼트, 속성 선택자
CSS 선택자 정리
- 요소 선택자
- HTML 태그를 직접 선택
- 클래스(class) 선택자
- 마침표(.)문자로 시작하며, 해당 클래스가 적용된 항목을 선택
- id 선택자
- # 문자로 시작하며, 해당 아이디가 적용된 항목을 선택
- 일반적으로 하나의 문서에 1번만 사용. 여러 번 사용해도 동작하지만, 단일 ID 사용을 권장
CSS 적용 우선순위
-
중요도
- !important
-
우선 순위
- 인라인 > id > class, 속성, pseudo-class> 요소, pseudo-element
-
CSS 파일 로딩 순서
CSS 상속
- CSS 는 상속을 통해 부모 요소의 속성을 자식에게 상속한다.
- 속성 중에는 상속이 되는 것과 되지않는 것들이 있따.
- 상속 되는 것 예시
- Text 관련 요소(font, color, text-align), opacity, visibility 등
- 상속되지 않는 것 예시
- Box model 관련 요소, position 관련 요소
CSS 기본 스타일
크기 단위
-
px(픽셀)
- 모니터 해상도의 한 화소인 '픽셀' 기준
- 픽셀의 크기는 변하지 않기 때문에 고정적인 단위
-
%
- 백분율 단위
- 가변적인 레이아웃에서 자주 사용
-
em
- (바로 위, 부모 요소에 대한)상속의 영향을 받음
- 배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 가짐
-
rem
- (바로 위, 부모 요소에 대한) 상속의 영향을 받지 않음
- 최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가짐
<style>
.em{
font-size : 1.5em;}
.rem{
font-size: 1.5rem;
}
</style>
<body>
<div class="em">
1.5em #1.5 x 1.5 부모의 상속 영향을 받기 때문
</div>
<div class="rem">
1.5rem # 1.5 상속의 영향을 받지 않기 때문
</div>
</body>- viewport
- 웹 페이지를 방문한 유저에게 바로 보이게 되는 웹 컨텐처의 영역(디바이스 화면)
- 디바이스의 viewport를 기준으로 상대적인 사이즈가 결정
- vw, vh, vmin, vmax
색상 단위
- 색상 키워드
- 대소문자를 구분하지 않음
- red,blue,black과 같은 특성 색을 직접 글자로 나타냄
- RGB색상
- 16진수 표기법 혹은 함수형 표기법을 사용해서 특정 색을 표현하는 방식
- '#' + 16진수
- rgb()함수형 표기
- HSL 색상
- 색상, 채도, 명도를 통해 특정 색을 표현하는 방식
- a는 alpha(투명도)
CSS 문서 표현
- 텍스트
- 서체, 서체 스타일
- 자간, 단어 간경, 행간, 들여쓰기 등
- 컬러, 배경
- 기타 HTML 태그별 스타일링
- 목록(li), 표(table)
결합자
- 자손 결합자
- selectorA 하위의 모든 selecotr B 요소
- 자식 결합자
- selectorA 바로 아래의 SelectorB요소
- 일반 형제 결합자
- selectorA의 형제 요소 중 뒤에 위치하는 selector B 요소를 모두 선택
- 인접 형제 결합자
- selectorA의 형제 요소 중 바로 뒤에 위치하는 selectorB 요소를 선택
내가 공부한 내용들이 누군가에게 도움이 될지 몰라서 쓰는 벨로그