티스토리 뷰
반응형
✏️ 스타일 시트
종류 | 설명 |
브라우저 기본 스타일 | 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일 |
인라인 스타일 | style 속성을 사용해 필요한 요소에 스타일을 직접 지정 |
내부 스타일 시트 | 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리 |
외부 스타일 시트 | 문서에서 사용하는 스타일을 따로 모아서 따로 파일로 저장한 후 연결해서 사용 |
✏️ 기본 선택자
종류 | 설명 | 작성 예시 |
전체 선택자 | 문서의 모든 요소에 스타일을 적용 | *{ margin : 0} |
타입 선택자 | 특정 태그를 사용한 모든 요소에서 스타일을 적용 | p { font-style : italic} |
id 선택자 | 특정 부분만 선택해서 문서 안에서 여러 번 사용 | .bg{ background-color : black} |
클래스 선택자 | 특정 부분만 선택해서 문서 안에서 한 번만 사용 | #container { width : 500px } |
그룹 선택자 | 여러 요소에 같은 스타일을 적용할 때 사용 | h1, h2 { text-align : center;} |
✏️ 스타일 우선순위
● 얼마나 중요한가?
사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일
● 적용 범위는 어디까지인가
!important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일
● 소스 작성 순서는 어떠한가
통상적으로 마지막으로 작성한 소스가 우선순위가 높음
반응형
'Front-end > CSS' 카테고리의 다른 글
[Web/CSS] CSS - 웹 폰트 사용하기 (0) | 2024.04.22 |
---|---|
[Web/CSS] CSS - 글꼴 관련 스타일 (0) | 2024.04.22 |
[Web/CSS] CSS - 캐스캐이딩 스타일 시트 알아보기 (0) | 2024.04.21 |
[Web/CSS] CSS - 기본 선택자 (0) | 2024.04.21 |
[Web/CSS] CSS - 스타일과 스타일 시트 (2) | 2024.04.21 |
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 반복문
- 백준
- HTML5
- 투 포인터
- 유클리드 호제법
- 스택
- 자바스크립트
- 자바
- DP
- c++ string
- C++
- CSS
- html
- 이분 매칭
- js
- 우선순위 큐
- java
- 백준 풀이
- 자료구조
- 알고리즘
- BFS
- C++ Stack
- 세그먼트 트리
- Do it!
- 유니온 파인드
- DFS
- 카운팅 정렬
- 에라토스테네스의 체
- 알고리즘 공부
- 스프링 부트 crud 게시판 구현
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함