1주차 위클리 페이퍼
위클리 페이퍼란 배운 내용들 중에서 몇가지에 대해 질문을 주면, 스스로 정리하고 몰랐던 내용들을 추가로 검색하여 주도적으로 학습하는 과정이다.
사실 알고 있던 내용이더라도 말로 했을 때 어려움이 있을 수 있다. 이러한 과정을 통해 중요한 부분에 대해 스스로 학습할 수 있으며, 정보를 검색하는 기술도 학습할 수 있을 것이다.
1. CSS의 Cascading에 대해 설명해 주세요.
CSS Cascading
Cascading이란, 폭포처럼 위에서 아래로 쏟아지는 의미를 가진다. 결국엔 CSS Cascading은 말 그대로 위에서 아래로 적용되는 스타일 시트를 의미하며, CSS에서 중요한 스타일 적용 규칙이기도 하다.
Cascading은 아래의 두 가지 원칙을 통해 어떤 요소에 스타일을 적용할지 결정하게 된다.
- 스타일 우선순위
- 스타일 상속
스타일 우선순위
스타일 요소는 각각 우선순위를 가지는데, 우선순위에 따라 스타일이 적용된다. 이것이 스타일 우선순위 원칙이다. 캐스케이딩은 다음 3가지 요소로 우선순위가 정해진다.
- 중요도
- 명시도
- 코드 순서
중요도(Importance)
중요도는 스타일의 선언된 위치에 따라 우선순위가 결정되는 것이다. 스타일 시트는 크게 3가지로 나눌 수 있는데, 작성자(Author), 사용자(User), 브라우저(Browser) 순으로 우선순위가 결정된다.
작성자 CSS > 사용자 CSS > 브라우저 CSS
기본적으로는 위의 순서대로 우선순위가 정해지게 되는데, 의도적으로 중요도를 올리는 방법도 있다. 코드에 !important를 추가해주면 된다. (하지만 모든 순서를 무시하고 적용되므로 꼭 필요한 경우가 아니라면 !important는 사용하지 않는 것을 추천한다.) 사용법은 단순하다. 중요도를 올리고자 하는 속성 뒤에 !important만 붙여주면 된다.
셀렉터 {
속성: 속성값 !important;
}/* !important 사용하지 않았을 경우 */
h1 {
color: #FF0000; /* 빨간색 */
}
h1 {
color: #FFFF00; /* 노란색 */
}CSS
/* !important를 사용했을 경우 */
h1 {
color: #FF0000 !important;
}
h1 {
color: #FFFF00;
}CSS
명시도(Specificity)
명시도는 어떤 셀렉터(선택자)인지에 따라 우선순위가 달라지는 것이다. 즉, 셀렉터가 가리키는 것이 명확할수록 우선순위가 높아지는 것이다. 명시도에 따른 우선순위는 다음과 같다.
인라인 > id > class > 태그
| 인라인 | 특정한 하나의 태그에만 적용되므로 가장 높은 우선순위를 갖는다. |
| id | id는 한 번만 쓰일 수 있는 속성을 가지므로 그다음 우선순위를 가진다. |
| class | id와 달리 문서에서 여러번 사용이 가능한 class가 다음 우선순위를 가진다. |
| <태그> | <div>, <span>, <h1> 등 말 그대로 태그를 의미하며, 구체적이지 않기 때문에 가장 낮은 우선순위를 가진다. |
<h1>태그 셀렉터</h1>
<h1 class= "class-selector">클래스 셀렉터</h1>
<h1 id= "id-selector">id 셀렉터</h1>
<h1 class= "class-selector" style="color: #0000FF;">인라인 셀렉터</h1>h1 {
color: #FF0000; /* red */
}
.class-selector {
color: ##FFFF00; /* yellow */
}
#id-selector {
color: #EE22EE; /* violet */
}태그 셀렉터
클래스 셀렉터
id 셀렉터
인라인 셀렉터
코드 상의 순서(Source Order)
코드 순서 상 가장 마지막에 작성된 속성이 가장 높은 우선순위를 가진다. 프로그래밍의 기본원리가 위에서 아래로 실행되는 것을 생각하면 쉽게 이해가 될 것이다.
h1 {
color: #FF0000;
}
h1 {
color: #FFFF00;
}CSS
스타일 상속
스타일 상속 원칙은 태그들의 포함 관계를 통해 우선순위를 결정하게 되는 것이다. 바깥에 있는 태그를 부모요소, 그 안에 포함된 태그를 자식요소라고 하며, 일반적으로 부모 요소의 스타일을 자식 요소들이 갖게 된다. 이것이 상속이다.
<div style="color: #FF0000;">
부모 요소
<div>자식 요소</div>
</div>부모 요소
자식 요소
2. Position의 속성들과 각각의 특징을 설명해 주세요.
위의 질문에 대한 글은 예전 CSS 레이아웃에서 정리한 Position 속성에 대한 글을 참고하면 된다.
