일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |
- 시그널
- kernel
- 커널
- px4
- 리눅스 커널
- pwn.college
- 프로그래밍
- wargame
- pwncollege
- Leviathan
- C언어
- css
- 리눅스커널
- 리버싱
- 취약점
- radare2
- 드론
- Bandit
- 리눅스
- 알고리즘
- 어셈블리어
- 시스템 프로그래밍
- C++
- 시스템
- 워게임
- 시스템프로그래밍
- write up
- Pwnable.kr
- 컴퓨터구조
- 시스템해킹
- Today
- Total
Computer Security
#5 CSS 이해하기 (가상선택자,구체성,상속,캐스케이딩) 본문
가상 클래스(pseudo class)
-가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스이다.
-우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해준다.
ex) <p>가 있다고 가정한다.
이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까?
가상 클래스가 없다면 이런 과정을 거치게 된다.
- 임의의 클래스 선택자를 선언하여 특정 스타일 규칙을 만든다.
- p 요소에 커서가 올라가면 p 요소에 클래스를 집어넣는다.
- p 요소에서 커서가 빠지면 p 요소에 클래스를 삭제한다.
-여기서 2, 3번은 동적으로 변화되어야 하는데, HTML과 CSS는 정적인 언어이기 때문에 처리할 수 없다.
-그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해서 미리 정의해놓고, 가상 클래스로 제어할 수 있게 했다.
:pseudo-class {
property: value;
}
-위처럼 가상 클래스는 :(콜론) 기호를 써서 나타낸다.
-가상 클래스를 이용하면 아래의 경우에도 CSS만으로 처리가 가능하므로 훨씬 효율적이다.
-":hover 가상 클래스 선택자를 이용해서 스타일 규칙을 만든다. (hover는 마우스 커서가 올라갔을 때 적용이 되도록 정의되어 있다.)"
-가상 클래스에는 여러 가지가 있습니다. 그중 자주쓰이는 것을 보자.
문서 구조와 관련된 가상 클래스
-문서 구조와 관련된 가상 클래스는 first-child와 last-child 가상 클래스 선택자다.
- :first-child : 첫 번째 자식 요소 선택
- :last-child : 마지막 자식 요소 선택
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
li:first-child { color: red; }
li:last-child { color: blue; }
-첫 번째 <li>와 마지막 <li>에 가상 클래스가 적용된다.
-실제 <li>에는 class 속성이 없지만 내부적으로 가상 클래스가 적용되어 마치 아래의 코드와 같이 동작하게 된다.
<ul>
<li class="first-child">HTML</li>
<li>CSS</li>
<li class="last-child">JS</li>
</ul>
앵커 요소와 관련된 가상 클래스
-앵커 요소와 관련된 가상 클래스로는 :link와 :visited가 있다.
- :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
- :visited : 이미 방문한 하이퍼링크를 의미
-하이퍼 링크는 앵커 요소에 href 속성이 있는 것을 의미한다.
a:link { color: blue; }
a:visited { color: gray; }
사용자 동작과 관련된 가상 클래스
-이 클래스들도 <a>에 주로 많이 쓰인다.
-<a>에만 쓸 수 있는 것은 아니며, 이 조건에 맞는 상황이 되는 요소들은 다 사용이 가능하다.
- :focus: 현재 입력 초점을 가진 요소에 적용
- :hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }
-:focus는 현재 입력 초점을 가진 요소에 적용된다.
-focus(초점)는 지금 현재 선택을 받는 것을 의미한다.
-예를 들면, 입력 폼 요소에 텍스트를 입력하려고 마우스 클릭해서 커서를 입력 폼 위에 올려놓으면 그때 입력 폼 요소가 초점을 받는 상태다.
-또 키보드의 탭 키를 이용해서 요소를 탐색하다 보면 링크나 버튼에 점선 테두리가 이동하는 것을 볼 수 있는데, 점선 테두리가 위치하는 것도 초점을 받은 상태이다.
-:hover는 마우스 커서가 있는 요소에 적용된다. (마우스를 올렸을 때를 의미합니다.)
-:active는 사용자 입력으로 활성화된 요소를 의미하는데, <a>를 클릭할 때 또는 <button>를 눌렀을 때처럼 순간적으로 활성화된다.
가상 요소(pseudo element)
미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소
- :before : 가장 앞에 요소를 삽입
- :after : 가장 뒤에 요소를 삽입
- :first-line : 요소의 첫 번째 줄에 있는 텍스트
- :first-letter : 블록 레벨 요소의 첫 번째 문자
구체성
-요소를 선택하는 데는 여러 방법이 있다.
-따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다.
만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까?
-선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있다.
-이 규칙을 '구체성'이라고 한다.
-구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로,
-구체성의 값이 클수록 우선으로 적용이 된다.
구체성은 아래의 규칙대로 계산됩니다.
- 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
- 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
- 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
- 전체 선택자는 0, 0, 0, 0을 가진다.
- 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
h1 { ... } /* 0,0,0,1 */
body h1 { ... } /* 0,0,0,2 */
.grape { ... } /* 0,0,1,0 */
*.bright { ... } /* 0,0,1,0 */
p.bright em.dark { ... } /* 0,0,2,2 */
#page { ... } /* 0,1,0,0 */
div#page { ... } /* 0,1,0,1 */
-선택자의 구체성 값을 잘 알아야 많은 스타일 규칙들을 정의할 때 의도하지 않은 일이 생기지 않는다.
인라인 스타일
그렇다면 인라인 스타일로 선언된 경우에는 어떻게 될까?
p#page { color: red; }
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>
-결과적으로 <p>에는 color: blue가 적용된다.
-인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖기 때문이다.
important
-important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖는다.
-important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다.
p#page { color: red !important; }
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>
-따라서, 위의 <p>에는 important로 인해 color: red가 적용된다.
상속되는 속성
h1 { color: gray; }
<h1>Hello, <em>CSS</em></h1>
-위 코드에서 <em>은 부모인 <h1>의 color: gray를 상속받는다.
-상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아니다.
-margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다.
-상속되는 속성들은 보통 상식적으로 구분될만한 속성들이며, 후에 속성들에 대해 배우게 되면 자연스럽게 이해할 수 있다.
상속되는 속성의 구체성
* { color: red; }
h1#page { color: gray; }
<h1 id="page">Hello, <em>CSS</em></h1>
-위 코드에서는 전체 선택자를 이용해 color: red를 적용하고 id 선택자를 이용해 color: gray를 선언했다.
-전체 선택자의 구체성은 0, 0, 0, 0 이며 id 선택자의 구체성은 0,1,0,1 이다.
그렇다면 <em>에는 어떤 color가 적용될까?
-color: red가 적용되는데 그 이유는 바로 상속된 속성은 아무런 구체성을 가지지 못하기 때문이다.
cascading 규칙
cascading에는 다음과 같이 3가지 규칙이 있다.
- 중요도(!important)와 출처
- 구체성
- 선언 순서
위에서의 출처는 CSS 출처를 의미한다.
-CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분한다.
-제작자의 경우는 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미한다. (대부분이 여기에 해당합니다.)
-사용자의 경우는 웹 페이지를 방문하는 일반 사용자들이 작성한 CSS를 의미한다.
-마지막으로 사용자 에이전트의 경우는 일반 사용자의 환경, 즉 브라우저에 내장된 CSS를 의미한다.
-현재의 브라우저에서는 사용자 스타일을 지원하지 않는 추세이다.
모든 스타일은 아래의 규칙에 따라 단계적으로 적용된다.
- 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류한다.
- 스타일 규칙들을 출처에 따라 분류한다.
- 스타일 규칙들을 구체성에 따라 분류한다.
- 스타일 규칙들을 선언 순서에 따라 분류한다.
<p id="bright">Hello, CSS</p>
p#bright { color: silver; }
p { color: red; }
위의 경우에는 구체성에 따라 color: silver가 적용된다.
p { color: silver; }
p { color: red; }
위의 경우에는 선언 순서에 따라 color: red가 적용된다.
'프로그래밍 > HTML & CSS' 카테고리의 다른 글
#7 폰트텍스트 (0) | 2022.06.01 |
---|---|
#6 단위, 배경, 박스모델 (0) | 2022.05.31 |
#4 CSS 이해하기 (선택자) (0) | 2022.05.23 |
#3 HTML 폼,시멘틱마크업,블록&인라인 (0) | 2022.05.18 |
#2 HTML 태그 (0) | 2022.05.17 |