2023. 3. 23. 03:28ㆍ개발/HTML+CSS+JS
CSS 의미, CSS 정의
Cascading Style Sheets (CSS)
Cascading - 연쇄적인, 폭포처럼 떨어지는... 세부적인 정의가 있다면 그 다음 기본 스타일을 사용한다는 의미
Style Sheets - 스타일을 작성한 문서
웹사이트 스타일링에는 크게 세가지 영역이 있다.
Author style - 웹사이트 작성자가 제공하는 스타일. 개발자들이 제공하는 *.CSS 파일
User style - 브라우저 상에서 다크모드를 쓸건지.. 글자크기를 작게 할껀지.. 즉 사용자의 정의에 따라 스타일을 변경하는 것
Browser - 브라우저에서 기본으로 지정되는 디자인.
Cascading 이란 의미는 여기서도 찾아볼 수 있다. Author style이 정의 되지 않았다면 User style을 적용, 이마저도 없다면 Browser기본 스타일을 적용한다는 늬앙스
선택자
HTML 문서의 어떤 부분을 스타일 적용할지 고르는 방법
| 표현 방식 | 선택범위 | 설명 |
| * | Universal | |
| Tag명 | Tag Type | |
| #id | ID | |
| .class | Class | |
| : | State | |
| [] | Attribute |
CSS 문법
선택자 {
프로퍼티 : 값;
프로퍼티2 : 값;
}
선택자 연습
<style>
* {
color : grey;
}
#special {
color : pink;
}
button:hover {
color : red;
background : green;
}
/* a태그 속성중 href를 가지고 있는 태그만 선택됨 */
a[href] {
color : blue;
}
/* a태그 href이 naver.com인 태그만 선택됨 */
a[href="naver.com"] {
color : blue;
}
/* a태그 href이 .com으로 끝나는 태그만 선택됨 */
a[href$=".com"] {
color : blue;
}
/* a태그 href이 youngsimi으로 시작하는 태그만 선택됨 */
a[href^="youngsimi"] {
color : blue;
}
</style>
<body>
<h1 id="special">hello</h1>
<button>버튼1</button>
<button>버튼2</button>
<!-- Attribute 선택자 연습 -->
<a href="naver.com">네이버</a>
<a href="google.com">구글</a>
<a href="youngsimi.tistory.com">영시미</a>
<a>Empty</a>
</body>CSS selectors - CSS: Cascading Style Sheets | MDN
CSS selectors define the pattern to select elements to which a set of CSS rules are then applied.
developer.mozilla.org
스타일링
CSS reference - CSS: Cascading Style Sheets | MDN
Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Al
developer.mozilla.org
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
'개발 > HTML+CSS+JS' 카테고리의 다른 글
| [JS] 객체 메소드, 객체 비교, 객체 병합 (0) | 2023.04.04 |
|---|---|
| [JS] 객체 속성 접근 방식 (0) | 2023.04.04 |
| [JS] 객체 생성 (0) | 2023.04.04 |
| [JS] 선언의 범위 (scope) (0) | 2023.04.04 |
| [드림코딩] 프론트엔드 개발자 입문편: HTML (1) (0) | 2023.03.23 |