(CSS 고전짤..)
- CSS란?
'Cascading Style Sheets'의 약자로, HTML과 함께 웹 표준 규격을 이룬다. 쉽게 말해 HTML이 웹 문서의 구조, 기본 텍스트, 골격 등을 나타낸다면 CSS는 HTML에 색상, 이미지 등의 스타일적인 요소를 부여하는 것이다. 웹 문서의 겉모습이라고도 할 수 있겠다.
하나의 문서 안에 여러 개의 스타일이 적용될 수 있는데, 이들을 묶어 놓은 것을 스타일 시트라고 한다. 스타일 시트는 두 가지 방법으로 사용할 수 있다. '내부 스타일 시트'와 '외부 스타일 시트'가 그것인데, '내부 스타일 시트'는 HTML 문서 안에 스타일 시트를 함께 작성한 것이며, '외부 스타일 시트'는 HTML과 스타일 시트 파일을 따로 분리하여 작성하고, HTML 안에 스타일 시트 파일의 링크만 삽입해주는 형태로 만들어진다. 그리고 이 두 가지 방법 외에도, 좀 더 세밀하게 웹 문서에서 적용하고 싶은 일부분에만 스타일을 적용할 수 있는데 이런 방법은 '인라인 스타일'이라 지칭한다.
//인라인 스타일 예시
<h1>제목<h1>
<p style="color:red;">나는 내용이다</p>
- CSS의 선택자 개념
CSS에서는 스타일 요소를 적용하기 위해 HTML 웹 문서의 각 태그 요소들에 id, class 등의 이름을 설정하고 이것을 사용한다. 이 요소들을 '선택자(selector)'라고 부른다.
//선택자의 종류
//1. 모든 선택자
*{적용할 스타일 내용}
//2. 태그 선택자
body{}
h1{}
p{}
//3. 클래스 선택자
.클래스이름{}
//4. 아이디 선택자
#아이디이름{}
- 캐스케이딩 스타일 시트의 중요한 속성
앞서 설명한 CSS의 의미 중 'Cascading'이란 '위에서 아래로 흐르는 시트'라는 의미를 갖고 있다. 말 그대로, 캐스케이딩 스타일 시트란 스타일을 적용할 때에 위에서부터 아래로의 순서로 적용한다는 속성을 갖는다. 그리고 이 큰 규칙 안에서 적용되는 우선순위 규칙이 있는데, 다음과 같다.
1) 얼마나 중요한가?
1순위 : 사용자가 구성한 스타일 시트 -> 2순위 : 제작자가 만든 스타일 중 !important가 붙은 스타일 -> 3순위 : 제작자가 만든 일반 스타일 -> 4순위 : 기본적인 브라우저 스타일 시트
2) 적용 범위가 어디까지 인가?
1순위 : 인라인 스타일 -> 2순위 : id 스타일 -> 3순위 : 클래스 스타일 -> 4순위 : 태그 스타일
3) 소스에서의 순서
코드(소스) 내에서 맨 나중에 온 코드가 최종적으로 스타일 시트 내용으로 적용된다.
이러한 우선순위 규칙과 함께, CSS에는 '상속'의 개념도 있다. 예를 들면 <body>태그는 내부에 있는 <h1>, <h2>, <p> 등의 태그들의 부모 격 태그이다. 따라서 <body>태그에 적용한 스타일은 자식 격의 태그인 <h1>, <h2>, <p>에도 적용이 된다(다만 우선순위 규칙에 따라 자식 태그에 스타일이 별도로 설정되어 있다면 자식태그는 부모태그의 스타일을 상속받지 않고 자신에게 적용된 스타일이 적용된다.). 이와 별개로 배경색과 이미지는 상속되지 않는다.
참고 : 도서 <Do it! HTML5+CSS3 웹 표준의 정석>
'TIL' 카테고리의 다른 글
| <자바 java> 상속 (0) | 2021.11.19 |
|---|---|
| <CSS> 레이아웃 (1) - 박스 모델 (0) | 2021.11.18 |
| <HTML> 기본 태그들 (2) (0) | 2021.11.16 |
| <HTML> 기본 태그들 (1) (0) | 2021.11.15 |
| <자바 Java> 기본 API - StringTokenizer 클래스 (0) | 2021.11.14 |