CSS 구성 요소(블록) -CSS Selector
선택자란 무엇인가요?
CSS 선택자는 CSS 규칙의 첫 번째 부분입니다.
선택자는 규칙 내부의 CSS 속성 값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다.
선택자에 의해 선택되는 요소를 선택자의 대상이라고 합니다.
CSS에서 선택자는 CSS 선택자 사양에 정의되어 있으며, CSS의 다른 부분과 마찬가지로 브라우저에서 지원되어야 작동합니다. 여러분이 접하게 될 대부분의 선택자는 성숙한 사양인 레벨 3 선택자 사양과 레벨 4 선택자 사양에 정의되어 있으며, 따라서 이러한 선택자에 대한 브라우저 지원은 훌륭합니다.
선택자 목록
h1, .special {
color: blue;
}
JavaScript
복사
선택자를 새 줄에 배치하면 가독성을 높일 수도 있습니다.
선택자 유형
유형, 클래스 및 ID 선택자
속성 선택자
a[href="https://example.com"]
{
}
JavaScript
복사
의사 클래스 및 의사 요소
p::first-line {
}
JavaScript
복사
결합자
article > p {
}
JavaScript
복사
Type, class and ID selectors
범용 선택자(Universal selector) *
범용 선택자로 선택자 더 쉽게 읽을 수 있게 만들기
article :first-child {
font-weight: bold;
}
JavaScript
복사
다른 요소의 첫 자식인 article을 선택하는 article:first-child와 혼동할 수도 있다.
혼란을 피하기 위해 의사 클래스에 범용 선택자를 추가할 수 있다. article 요소의 첫 자식인 어떤 요소 또는 모든 하위 요소의 첫 자식인 어떤 요소를 선택한다.
article *:first-child {
font-weight: bold;
}
JavaScript
복사
클래스 선택자
특정 요소에 대한 타겟팅 클래스
하나 이상의 클래스가 적용된 경우 요소를 대상으로 지정
우리는 요소 사이에 공백 없이 함께 연결하여 적용된 두 개의 클래스가 있는 경우에만 요소를 일치시키길 원한다고 브라우저에 알릴 수 있습니다. 마지막 <div>에는 danger클래스만 있기 때문에 스타일이 적용되지 않는 것을 볼 수 있습니다.
ID 선택자
경고: 문서에서 동일한 ID를 여러 번 사용하면 스타일을 지정하기 위해 작동하는 것처럼 보일 수 있지만, 이렇게 하지 마십시오. 이로 인해 잘못된 코드가 생성되고 여러 곳에서 이상한 동작이 발생합니다.
참고: 특이성 강의에서 배웠듯이, ID는 특이성이 높습니다. 대부분의 다른 선택자를 무시합니다. 대부분의 경우 ID 대신 요소에 클래스를 추가하는 것이 좋습니다. 그러나 ID를 사용하는 것이 요소를 대상으로 지정하는 유일한 방법인 경우 - 아마도 마크업에 대한 액세스 권한이 없고 편집할 수 없기 때문에 - 이 방법이 작동합니다.
[attribute] Selector
존재 및 값 선택자
•
li[class]를 사용하여 클래스 속성이 있는 모든 목록 항목을 일치시킬 수 있습니다. 이것은 첫 번째 항목을 제외한 모든 목록 항목과 일치합니다.
•
li[class="a"]는 클래스가 a인 선택자와 일치하지만 값의 일부로 공백으로 구분된 다른 클래스가 있는 a 클래스가 있는 선택자는 일치하지 않습니다. 두 번째 목록 항목을 선택합니다.
•
li[class~="a"]는 a 클래스와 일치하지만 공백으로 구분된 목록의 일부로 a 클래스를 포함하는 값과도 일치합니다. 두 번째 및 세 번째 목록 항목을 선택합니다.
하위 문자열 일치 선택자
문자열 "box-"로 시작하는 모든 항목을 일치시키려는 경우, [class^="box-"]를 사용하여 둘 다 선택할 수 있습니다.
(참고: ^ 및 $는 소위 정규식에서 각각 시작 및 종료를 의미하는 닻으로 오랫동안 사용되어 왔다는 점에 유의하는 것이 도움이 될 수 있습니다.)
다음 예는 이 선택자의 사용법을 보여줍니다:
•
li[class^="a"]는 a로 시작하는 모든 속성 값과 일치하므로 처음 두 목록 항목과 일치합니다.
•
li[class$="a"]는 a로 끝나는 모든 속성 값과 일치하므로 첫 번째 및 세 번째 목록 항목과 일치합니다.
•
li[class*="a"]는 문자열에서 a가 나타나는 모든 속성 값과 일치하므로 모든 목록 항목과 일치합니다.
대소문자 구분
대소문자를 구분하지 않고 속성 값을 일치시키려면 닫는 괄호 앞에 i값을 사용할 수 있습니다.
li[class^="a"] {
background-color: yellow;
}
li[class^="a" i] {
color: red;
}
JavaScript
복사
참고: 새 값 s도 있습니다. 이 값은 일반적으로 일치가 대소문자를 구분하지 않는 컨텍스트에서 대소문자 구분 일치를 강제하지만 브라우저에서는 잘 지원되지 않으며 HTML 컨텍스트에서는 그다지 유용하지 않습니다.
Pseudo class and pseudo element
여러 개가 있으며, 종종 매우 특정한 목적을 위해 사용됩니다.
← HTML 편집할 필요가 없다.
참고: 앞에 요소 선택자가 없는 의사 클래스와 요소를 작성하는 것은 유효합니다. 위의 예에서 :first-child를 작성할 수 있으며 규칙은 단락 첫 번째 자식이 아니라(:first-child는 *:first-child와 동일합니다), <article> 요소의 첫 번째 자식인 any 요소에 적용됩니다. 그러나 일반적으로 그보다 더 많은 제어를 원하므로, 더 구체적이어야 합니다.
사용자 - 행동 유사 클래스
일부 의사 클래스는 사용자가 어떤 방식으로든 문서와 상호 작용할 때만 적용됩니다. 동적 의사 클래스라고도 하는 이러한 사용자 행동 의사 클래스는 사용자가 요소와 상호 작용할 때 클래스가 요소에 추가된 것처럼 작동합니다. 예를 들면, 다음과 같습니다.
•
:hover — mentioned above; this only applies if the user moves their pointer over an element, typically a link.
•
:focus — only applies if the user focuses the element by clicking or using keyboard controls.
의사-요소란 무엇인가?
의사 요소는 이중 콜론 ::으로 시작합니다. ::before는 의사 요소의 예입니다.
article p::first-line {
font-size: 120%;
font-weight: bold;
}
JavaScript
복사
첫 번째 단락의 첫 줄을 굵게 만들고 싶다면 :first-child 및 ::first-line 선택자를 함께 연결할 수 있습니다. 다음 CSS를 사용하도록 이전 라이브 예제를 편집해 보세요. <article> 요소 안에 있는 첫 번째 <p> 요소의 첫 번째 줄을 선택하려고 합니다.
article p:first-child::first-line {
font-size: 120%;
font-weight: bold;
}
CSS
복사
.box::before {
content: "This should show before the other content. ";
}
JavaScript
복사
CSS에서 텍스트 문자열을 삽입하는 것은 실제로 웹에서 매우 자주 수행하는 작업이 아닙니다. 해당 텍스트는 일부 스크린 리더에서 액세스할 수 없고 나중에 다른 사람이 찾아서 편집하기 어려울 수 있기 때문입니다.
효과적으로 사용하는 방법은 아이콘을 삽입하는 것
좋은 예는 CSS로 화살표를 생성하는 데 도움이 되는 CSS Arrow Please 사이트입니다. 화살표를 만들 때 CSS를 보면 ::before (en-US) 및 ::after 의사 요소가 사용 중인 것을 볼 수 있습니다. 이러한 선택자를 볼 때마다 content 속성을 살펴보고 HTML 요소에 추가되는 항목을 확인하세요.
CSS combinators
후손 결합자
일반적으로 단일 공백(" ") 문자로 표시됩니다 - 첫 번째 선택자와 일치하는 조상(부모, 부모의 부모, 부모의 부모의 부모 등) 요소가 있는 경우 두 번째 선택자와 일치하는 요소가 선택되도록 두 선택자를 결합합니다. 후손 결합자를 활용하는 선택자를 하위 선택자라고 합니다.
body article p
CSS
복사
자식 결합자
자식 결합자(>)는 두 CSS 선택자 사이에 배치됩니다. 첫 번째와 일치하는 요소의 직계 자식인 두 번째 선택자와 일치하는 요소만 일치합니다. 계층 구조에서 더 아래에 있는 하위 요소는 일치하지 않습니다.
article > p
CSS
복사
인접 형제 결합자
첫 번째 선택자의 다음 형제 요소인 두 번째 선택자와 일치하는 요소만 일치합니다.
p + img
CSS
복사
일반 형제 결합자
요소의 형제 요소가 바로 인접하지 않더라도 선택하려면 일반 형제 연결자(~)를 사용할 수 있습니다.
p ~ img
CSS
복사
결합자 사용
마크업에서 해당 요소의 위치에 매우 특정한 선택자를 만들었기 때문에 CSS 규칙을 재사용하기 어려울 것입니다.
Cascade and inheritance
규칙 충돌
요소에 적용해야 할 CSS가 작동하지 않을 때 일반적으로 동일한 요소에 적용할 두 가지 규칙을 작성했다는 것입니다. cascade, specificity 개념은 적용되는 규칙을 제어하는 메커니즘입니다. inheritance도 중요한데, 일부 CSS 속성은 부모 요소에 설정된 값을 상속하지만 일부는 그렇지 않습니다.
cascade
소스 순서의 마지막 규칙이 우선합니다.
specificity
선택자의 선택이 얼마나 구체적인지 측정한다. 우선 순위 점수 및 기타 사항에 대해서는 나중에 설명.
Inheritance
일부 속성은 상속되지 않습니다 — 예를 들어 요소에 width 를 50% 로 설정하면, 모든 하위 항목의 너비가 부모 너비의 50% 가 되지 않습니다. 이 경우, CSS 는 사용하기가 매우 어려울 것입니다!
specifications 섹션의 맨 아래에 기술 정보 박스가 있습니다. 여기에는 해당 속성의 상속 여부를 포함하여 해당 속성에 대한 여러 데이터 요소가 나열되어 있습니다.
개념이 함께 작동하는 방식 이해하기
상속 이해하기
너비 (위에서 언급 한 것처럼), 마진, 패딩 및 테두리와 같은 것은 상속되지 않습니다. 만약 우리 목록의 자식들이 테두리를 물려 받았다면, 모든 단일 목록과 목록 항목은 테두리를 얻게 될 것입니다 — 아마도 우리가 원하는 효과는 아닙니다!
기본적으로 상속되는 속성과 그렇지 않은 속성은 대체로 상식적입니다.
[상속 제어하기]
선택한 요소에 적용된 속성 값을 부모 요소의 속성 값과 동일하게 설정합니다. 사실상, 이것은 "상속에 영향을 미칩니다".
선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 설정합니다. 브라우저의 기본 스타일 시트에서 값을 설정하지 않고 속성이 자연스럽게 상속되면 속성 값이 대신 inherit 되도록 설정됩니다.
속성을 natural 값으로 재설정 합니다. 즉, 속성이 자연적으로 상속되면 inherit 된 것처럼 작동하고 그렇지 않으면 initial 처럼 작동합니다.
[모든 속성 값 재설정]
CSS 속기 속성을 all 로 사용하면 이러한 상속 값 중 하나를 (거의) 모든 속성에 한 번에 적용할 수 있습니다. 이 값은 상속 값 (inherit, initial, unset 또는 revert) 중 하나일 수 있습니다. 스타일에 대한 변경 사항을 취소하여 새로운 변경을 시작하기 전에 알려진 시작 지점으로 돌아갈 수 있는 편리한 방법입니다.
모든 속성 값 재설정이 필요한 경우
cascade 이해하기
이전의 것들은 다음 것보다 우선합니다:
1.
Importance
2.
우선 순위 Specificity
3.
소스 순서
[소스 순서]
정확히 동일한 가중치를 갖는 규칙이 두 개 이상인 경우, CSS 에서 마지막에 오는 규칙이 우선합니다.
선택자의 우선 순위는 4개의 다른 값 (또는 구성 요소) 을 사용하여 측정되며, 이는 4개의 열에서 Thousands, Hundreds, Tens 및 Ones 개의 단일 자릿수로 간주될 수 있습니다.
1.
2.
Hundreds: 전체 선택자에 포함된 각 ID 선택자에 대해 이 열에서 1점을 얻습니다.
3.
Tens: 이 선택란에서 전체 선택자 내에 포함된 각 class 선택자, 속성 선택자 또는 pseudo-class 에 대해 이 열에서 1점을 얻습니다.
4.
Ones: 이 항목에서 각 요소 선택자 또는 전체 선택자 내에 포함된 pseudo-element 에 대해 1점을 얻습니다.
범용 선택자 (*), 결합자 (+, >, ~, ' ') 및 부정 pseudo-class (:not) 는 우선 순위에 영향을 미치지 않습니다.
[!important]
반드시 필요한 경우가 아니면 절대 사용하지 않는 것이 좋습니다. !important 는 계단식이 정상적으로 작동하는 방식을 변경하므로, CSS 스타일 문제를 해결하기가 어렵습니다. 특히 큰 스타일 시트에서.
핵심 CSS modules 을 편집할 수 없는 CMS 에서 작업할 때, 다른 방법으로는 재정의 할 수 없는 스타일을 재정의 하려는 경우에 사용할 수도 있습니다. 그러나 실제로 피할 수 있다면 사용하지 마십시오.
CSS 위치의 영향
1.
사용자 에이전트 스타일 시트의 선언 (예: 다른 스타일이 설정되지 않은 경우 사용되는 브라우저의 기본 스타일).
2.
사용자 스타일 시트의 일반 선언 (사용자가 설정한 사용자 정의 스타일).
3.
작성자 스타일 시트의 일반적인 선언 (웹 개발자가 설정한 스타일).
4.
작성자 스타일 목록에서 중요한 선언
5.
사용자 스타일 시트의 중요한 선언
Cascade layers
적용되지 않은 줄이 그어진 값이 표시됩니다. 줄이 그어진 스타일은 우선 순위가 같지만 특정성이 낮거나, 출처와 특정성이 일치하지만 코드 베이스에서 더 먼저 발견되었을 수 있습니다.
종속 계층은 이러한 코드 기반에서 스타일시트 유지 관리를 단순화합니다. 종속 계층은 궁극적으로 적용되는 CSS 선언에 대해 더 간단하고 더 나은 제어를 제공하는 명시적 특정성 컨테이너로, 웹 개발자가 특정성과 싸울 필요 없이 CSS 섹션의 우선 순위를 지정할 수 있도록 합니다.
종속 개념에 대해 다시 보기
모든 요소의 모든 속성에 할당되는 값을 결정하기 위해 매우 명확하게 정의된 여러 단계를 거칩니다.
1.
관련성: 각 요소에 대해 선택자가 일치하는 모든 선언 블록을 찾습니다.
2.
3.
출처: 두 개의 중요도 버킷 각각 내에서 작성자, 사용자 또는 사용자 에이전트 출처별로 규칙을 정렬합니다.
4.
계층: 6개의 출처 중요도 버킷 각각 내에서, 종속 계층별로 정렬합니다. 일반 선언의 계층 순서는 생성된 첫 번째 계층부터 마지막 계층까지이며, 그 다음에는 레이어가 없는 일반 스타일이 있습니다. 이 순서는 중요한 스타일에 대해 반전되며 레이어가 없는 중요한 스타일의 우선 순위가 가장 낮습니다.
5.
6.
나타나는 순서: 우선 순위가 있는 출처 계층의 두 선택자가 동일한 특정성을 갖는 경우 가장 높은 특정성을 가진 마지막으로 선언된 선택자의 속성 값이 우선합니다.
[출처와 종속]
1.
사용자 에이전트 일반 스타일
2.
사용자 일반 스타일
3.
작성자 일반 스타일
4.
애니메이션되는 스타일
5.
작성자 중요한 스타일
6.
사용자 중요 스타일
7.
사용자 에이전트 중요 스타일
8.
전환되는 스타일
사용자 = 방문자, 사용자 에이전트 = 브라우저
[출처와 특정성]
이해 안감 일단 스킵
작성자 스타일 시트의 선택자의 특정성이 0-0-0인 경우에도 마찬가지입니다. 작성자 스타일이 "승리"하는 이유는 다른 출처에서 충돌하는 스타일이 있을 때, 우선 순위가 없는 출처의 특정성과 관계없이 우선순위가 있는 출처의 규칙이 적용되기 때문입니다.
사용자 에이전트 스타일시트의 "경쟁" 선택자는 0-1-1의 특정성 가중치를 갖는 a:any-link입니다. 작성자 스타일시트의 0-0-0 선택자보다 크지만 현재 사용자 에이전트의 선택자가 다르더라도 상관없습니다. 작성자 및 사용자 에이전트 출처의 특정성 가중치는 절대 비교되지 않습니다. 특정성 가중치 계산 방법에 대해 자세히 알아보세요.
출처 우선 순위는 항상 선택자 특정성보다 우선합니다. 요소 속성이 여러 출처에서 일반 스타일 선언으로 스타일이 지정된 경우, 작성자 스타일 시트는 항상 사용자 또는 사용자 에이전트 스타일 시트에서 선언된 중복 일반 속성을 재정의합니다. 스타일이 중요한 경우 사용자 에이전트 스타일시트는 항상 작성자 및 사용자 스타일보다 우선합니다. 종속 출처 우선 순위는 출처 간의 특정성 충돌이 발생하지 않도록 합니다.
마지막으로 주의해야 할 사항: 출현 순서는 우선 순위의 출처에서 경쟁하는 선언이 동일한 특정성을 가질 때만 관련이 있습니다.
종속 계층 개요
[종속 계층 우선 순위]
6개의 출처 버킷 각각 내에는 여러 종속 계층이 있을 수 있습니다. 계층 생성 순서 (en-US)는 매우 중요합니다. 출처 내 계층 간의 우선 순위를 설정하는 것은 생성 순서입니다.
위의 설명이 이해가 안된다. 6개의 출처 버킷은 뭐고, 여러 종속 계층은 뭔가? 계층 생성 순서는 뭔가? 우선 순위 설정은 생성 순서에 따른다?
[종속 계층으로 해결할 수 있는 문제]
대규모 코드베이스에서 특정성 충돌은 빠르게 확대될 수 있고 !important 플래그로 빠른 수정을 만들 수 있다.
종속 계층은 마치 출처의 각 계층이 하위 계층인 것처럼, 단일 출처 내에서 관심사를 구성하고 균형을 맞추는 구조화된 방법을 제공한다. 계층 순서를 기반으로 스타일 우선 순위를 지정하여, 각 팀, 컴포넌트 및 타사에 대해 계층을 생성할 수 있다.
계층 외부의 스타일 규칙과 경쟁하지 않고 계층 내 규칙이 함께 적용된다.
[중첩 종속 계층으로 해결할 수 있는 문제]
각 종속 계층은 중첩 레이어를 포함할 수 있습니다.
예를 들어, 컴포넌트 라이브러리를 components 계층으로 가져올 수 있습니다. 일반 종속 계층은 컴포넌트 라이브러리를 작성자 출처에 추가하여 다른 작성자 스타일과의 특정성 충돌을 제거합니다.
종속 계층 만들기
•
규칙에 따라 @layer문, @layer 뒤에 하나 이상의 계층 이름을 사용하여 계층을 선언합니다. 이렇게 하면 스타일을 지정하지 않고 명명된 계층이 생성됩니다.
•
블록 내의 모든 스타일이 이름 또는 이름이 지정되지 않은 레이어에 추가되는 @layer 블록 at-규칙.
•
Note: 계층의 우선 순위는 계층이 생성되는 순서입니다. 계층에 없는 스타일 또는 "계층 없는 스타일"은 최종 암시적 레이블로 함께 계단식으로 배열됩니다.
[명명된 계층에 대한 @layer 문 at-rule]
@layer theme, layout, utilities;
JavaScript
복사
[명명된 계층과 익명 계층에 대한 @layer 블록 at-규칙]
/* 파일: layers1.css */
/* 계층화되지 않은 스타일 */
body {
color: #333;
}
/* 첫 번째 계층 생성: `layout` */
@layer layout {
main {
display: grid;
}
}
/* 두 번째 계층 생성: 이름이 지정되지 않은 익명 계층 */
@layer {
body {
margin: 0;
}
}
/* 세 번째 및 네 번째 : `theme` 및 `utilities` */
@layer theme, layout, utilities;
/* 이미 존재하는 `layout` 계층에 스타일 추가 */
@layer layout {
main {
color: #000;
}
}
/* 다섯 번째 계층 생성: 이름이 지정되지 않은, 익명 계층 */
@layer {
body {
margin: 1vw;
}
}
JavaScript
복사
계층 이름을 지정하지 앟고 계층에 스타일을 지정하여 익명 계층을 만듭니다. 이름이 지정되지 않은 계층은 생성시에만 스타일을 추가할 수 있습니다.
이후에 계층 이름 없이 @layer를 사용하면 이름이 지정되지 않은 추가 계층이 생성됩니다. 이전에 이름이 지정되지 않은 기존 계층에 스타일을 추가하지 않습니다.
[계층 생성 및 미디어 쿼리]
media 또는 feature 쿼리를 사용하여 계층을 정의하고 미디어가 일치하지 않거나 기능이 지원되지 않으면 계층이 생성되지 않는다.
[@import를 사용하여 이름이 지정된 계층과 익명 계층으로 스타일시트 가져오기]
@import url("components-lib.css") layer(components);
@import url("dialog.css") layer(components.dialog);
@import url("marketing.css") layer();
JavaScript
복사
@import url("ruby-narrow.css") layer(international) supports(display: ruby) and
(width < 32rem);
@import url("ruby-wide.css") layer(international) supports(display: ruby) and
(width >= 32rem);
JavaScript
복사
참고: 스타일시트를 연결하는 <link> 메소드와 동등한 것은 없습니다. 스타일시트 내에서 @layer를 사용할 수 없는 경우 @import를 사용하여 스타일시트를 계층으로 가져옵니다.
중첩 종속 계층 개요
명명된 계층 또는 익명 계층 내의 계층이다.
[중첩 계층의 장점]
다른 팀이 계층을 계층으로 가져올지 여부에 대해 걱정하지 않고 종속 계층을 생성할 수 있다. 중첩을 사용하면 해당 스타일 시트 자체에 계층이 있는지 걱정할 필요 없이 타사 스타일 시트를 계층으로 가져올 수 있다.
[중첩 종속 계층 만들기]
@import url("components-lib.css") layer(components);
@import url("narrowtheme.css") layer(components.narrow);
JavaScript
복사
@import url(layers1.css) layer(example);
CSS
복사
이렇게 하면 일부 선언과 5개의 중첩 계층(example.layout, example.<anonymous(01)>, example.theme, example.utilities, 및 example.<anonymous(02)>)이 포함된 example이라는 단일 계층이 생성됩니다.
계층의 순서에 따른 우선 순위 결정
[일반 종속 계층의 우선 순위]
@import url(A.css) layer(firstLayer);
@import url(B.css) layer(secondLayer);
@import url(C.css);
JavaScript
복사
우선순위 결정 문제 풀이?
요약하면:
•
계층 우선 순위는 계층이 생성된 순서입니다.
•
한 번 생성된 계층은, 순서를 변경할 수 없습니다.
•
일반 스타일의 계층 우선 순위는 계층이 생성되는 순서입니다.
•
계층이 없는 일반 스타일은 일반 계층이 있는 스타일보다 우선합니다.
•
중요한 스타일(font-weight)에 대한 계층 우선 순위가 역전되어 이전에 생성된 계층이 우선합니다.
•
계층화된 모든 중요 스타일은 계층화되지 않은 중요(및 일반) 스타일보다 우선합니다.
•
일반 인라인 스타일은 계층화 여부에 관계없이 모든 일반 스타일보다 우선합니다.
•
전환되는 스타일을 제외하고, 중요한 인라인 스타일은 다른 모든 스타일보다 우선합니다.
•
작성자 스타일이 중요한 인라인 스타일을 무시할 수 있는 방법이 없습니다(일시적인 전환은 제외).
[중첩된 종속 계층의 우선순위]
계층이 없는 일반 스타일이 계층이 있는 일반 스타일보다 우선하고, 계층 내에서 중첩되지 않은 스타일이 일반 중첩 스타일보다 우선하므로, 빨간색이 다른 테마 색상보다 우선합니다.
중요한 스타일의 경우, 계층화된 스타일이 계층화되지 않은 스타일보다 우선하며, 이전에 선언된 계층의 중요한 스타일이 나중에 선언된 계층보다 우선합니다. 이 예에서, 중첩 계층 생성 순서는 components.narrow, 그 다음이 components.wide이므로 components.narrow의 중요한 스타일이 components.wide의 중요한 스타일보다 우선하므로 sans-serif가 우선합니다.
Box model
크게 두 가지 박스(블록 박스와 인라인 박스) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다.
박스가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:
•
박스는 인라인 방향으로 연장되어 상위 콘테이너에서 사용 가능한 공간을 채웁니다. 대부분은 경우 이것은 박스가 사용 가능한 공간을 100%로 채우면서 상위 콘테이너 너비만큼 된다는 의미입니다.
•
박스는 새 줄로 행갈이를 합니다.
•
패딩과 여백, 테두리로 인해 다른 요소들이 박스로부터 밀려납니다.
박스의 외부 디스플레이 유형이 inline일 경우:
•
박스는 새 줄로 행갈이를 하지 않습니다.
•
패딩과 여백, 테두리는 다른 인라인 박스들이 당 박스로부터 멀어지지게 하지 않습니다.
구분 : 내부 및 외부 디스플레이 유형
여러분은 flex과 같은 display 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 display: flex;를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 flex으로 변경됩니다. 이 박스의 직계 자식은 플렉스 항목이 되고, 나중에 익히게 될 플렉스박스 규격에 명시된 규칙에 따라 배치됩니다.
서로 다른 디스플레이 유형의 예
핵심은 display 속성 값을 변경하면 박스의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 레이아웃 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.
CSS 박스모델이란?
[Box 구성]
•
콘텐츠 박스
•
패딩 박스
•
테두리 박스
•
여백 박스
[표준 CSS 박스 모델]
[대체 CSS 박스 모델]
대체 모델 활성화는 box-sizing: border-box
박스 모델 부리기
[브라우저 개발자 도구로 박스 모델 보기]
여백과 패딩과 테두리
[여백] - margin
상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 박스가 어떻게 밀려나는지 확인하십시오.
[여백 축소]
핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.
[테두리]
[패딩]
박스 모델과 인라인 박스
내부에 <span>가 있고 거기에 width와 height, 그리고 margin와 border를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다.
inline-block display 사용
inline와 block 사이 중립 지대를 제공하는 display 속성의 하나로 특별한 값이 있습니다. 이 속성은 항목이 새 줄로 넘어가는 행갈이를 원치않지만, width와 height가 존중되고 앞서 보았듯이 겹침 현상을 피하길 원하는 경우에 유용합니다.
display: inline-block 속성이 딸린 요소는 우리가 이미 파악했던 것 블록 요소의 하위 집합입니다.
•
width와 height 속성은 존중됩니다.
•
padding와 margin과 border 속성으로 인해 다른 요소가 박스에서 밀려납니다.
Backgrounds and borders
[배경 색상]
[배경 이미지]
[배경 이미지 반복 제어]
•
no-repeat — 배경이 반복되지 않도록 합니다.
•
repeat-x — 수평으로 반복합니다.
•
repeat-y — 수직으로 반복합니다.
•
repeat — 기본값; 양방향으로 반복합니다.
[배경 이미지 크기 조정]
•
cover — 브라우저는 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.
•
contain — 브라우저는 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.
[배경 이미지 배치]
[그라데이션 배경]
[여러 배경 이미지]
[배경 첨부(attachment)]
•
scroll: 페이지가 스크롤될 때 요소의 배경이 스크롤 되도록 합니다. 요소 내용이 스크롤되면, 배경이 움직이지 않습니다. 실제로 배경은 페이지에서 동일한 위치로 고정되므로, 페이지가 스크롤될 때 스크롤 됩니다.
•
fixed: 요소의 배경을 viewport 에 고정시켜, 페이지나 요소 내용을 스크롤할 때 스크롤되지 않도록 합니다. 항상 화면에서 동일한 위치에 유지됩니다.
•
local: 이 값은 나중에 추가 되었습니다 (Explorer 9 이상에서만 지원되지만, 다른 값은 IE4 이상에서 지원됨). 왜냐하면 scroll 값이 다소 혼란스럽고 많은 경우 실제로 원하는 것을 수행하지 않기 때문입니다. local 값은 배경을 설정된 요소로 고정하므로, 요소를 스크롤하면 배경과 함께 스크롤 됩니다.
스크롤할 내용이 있을 때만 영향을 미치므로, 세 가지 값의 차이점을 보여주는 데모를 만들었습니다 — background-attachment.html
[배경 shorthand 속성 사용]
규칙
•
background-color 는 마지막 쉼표 뒤에만 지정할 수 있습니다.
•
background-size 의 값은 background-position, 직후에 포함되며 center/80% 와 같이 '/' 문자로 구분됩니다.
[배경이 있는 접근성 고려 사항]
배경 이미지나 색상 위에 텍스트를 배치 할 때, 방문자가 텍스트를 읽을 수 있도록 contrast 를 충분히 유지해야 합니다.
테두리
[둥근 테두리]
오른쪽 상단 모서리의 가로 반경이 1em 이고, 세로 반경이 10% 가 되도록 하려면:
.box {
border-top-right-radius: 1em 10%;
}
CSS
복사
Handling different text directions
기본적으로 웹은 오른쪽에서 왼쪽으로 쓰는 언어 (예: 아랍어) 보다 왼쪽에서 오른쪽으로 쓰는 언어 (예: 영어 또는 프랑스어) 를 더 잘 지원하는 경향이 있습니다.
오른쪽에서 왼쪽 뿐만 아니라 위에서 아래로 오는 콘텐츠 (예: 일본어) 를 포함하여 다른 내용의 방향성을 더 잘 지원하기 위해 발전했습니다 — 이러한 다른 방향을 쓰기 모드 (writing modes) 라고 합니다.
쓰기 모드란 무엇인가?
writing-mode: vertical-rl 를 사용하여 표시되는 제목이 있습니다. 이제 텍스트가 세로로 나타납니다.
•
horizontal-tb: 블록의 표시 방향은 위에서 아래 입니다. 문장은 가로로 표시됩니다.
•
vertical-rl: 블록의 표시 방향은 오른쪽에서 왼쪽입니다. 문장은 수직으로 표시됩니다.
•
vertical-lr: 블록의 표시 방향은 왼쪽에서 오른쪽입니다. 문장은 수직으로 표시됩니다.
쓰기 모드와 블록 및 인라인 레이아웃
쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. horizontal-tb 쓰기 모드에서 블록 방향은 위에서 아래로 진행됩니다. vertical-rl 쓰기 모드에서 블록 방향은 오른쪽에서 왼쪽으로 수평으로 표시됩니다. 따라서 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
특히 최신 레이아웃 방법을 살펴보기 시작하면, 블록 및 인라인에 대한 이 아이디어가 매우 중요해 집니다.
[방향]
인라인과 블록이라는 아이디어와 함께 시작 과 끝 에 대해 이야기할 것입니다.
논리적 속성 및 값
정말로 원하는 것은 쓰기 모드와 함께 높이와 너비를 본질적으로 바꾸는 것입니다. 세로 쓰기 모드인 경우 박스를 가로 쓰기 모드에서와 같이 블록 크기로 확장하려고 합니다.
이를 쉽게하기 위해, CSS 는 최근에 매핑된 속성 세트를 개발했습니다. 이것들은 본질적으로 — width 및 height — 와 같은 물리적 속성을 논리적 또는 flow relative 버전으로 대체합니다.
가로 쓰기 모드인 경우 width 에 매핑된 속성을 inline-size (en-US) 라고 합니다 — 인라인의 크기를 나타냅니다. height 의 속성 이름은 block-size (en-US) 이며 블록의 크기입니다. width 가 inline-size 로 대체된 아래 예에서 이것이 어떻게 작동하는지 볼 수 있습니다.
[논리적 마진, 테두리 및 패딩 속성]
물리적 속성과 논리적 속성을 비교할 수 있습니다.
.box 의 쓰기 모드 속성을 vertical-rl 로 전환하여 박스의 writing-mode 를 변경하면 물리적 속성이 물리적 방향과 연결되어 있는 반면, 논리적 속성은 쓰기 모드로 전환됩니다.
[논리적 값]
이미지를 왼쪽으로 띄워서 텍스트가 이미지를 감싸도록 할 수 있습니다. 아래 예와 같이 left 을 inline-start 으로 바꿀 수 있습니다.
[물리적 또는 논리적 속성을 사용해야 합니까?]
궁극적으로 사람들은 flexbox 및 grid 와 같은 레이아웃 방법을 다루기 시작하면, 많은 의미가 있기 때문에 사람들이 대부분의 경우 논리적 버전으로 전환할 것으로 기대합니다.
Overflowing content
overflow란 무엇인가?
CSS 의 모든 것이 박스라는 것을 알고 있으며, width 및 height (또는 inline-size (en-US) 및 block-size (en-US)) 의 값을 제공하여 박스의 크기를 제한할 수 있음을 알고 있습니다. Overflow 는 박스에 내용이 너무 많을 때 발생하므로, 박스 안에 들어가지 않습니다.
CSS는 데이터 손실을 피하려고 한다.
왜 CSS 가 기본적으로 내용이 혼란스러워지는 어수선한 접근 방식을 취했는지 궁금할 것입니다. 추가 콘텐츠를 숨기거나 박스가 커지는 이유는 무엇입니까?
가능하면 CSS 는 내용을 숨기지 않습니다; 그렇게 하면 데이터가 손실될 수 있으며, 이는 일반적으로 문제입니다. CSS 용어로, 이는 일부 콘텐츠가 사라짐을 의미합니다. 콘텐츠 손실의 문제점은 손실 되었음을 알 수 없다는 것입니다. 방문자가 사라진 것을 눈치채지 못할 수도 있습니다.
따라서 CSS 는 눈에 띄게 overflow 되는 경향이 있습니다.
overflow 속성
기본값은 visible
overflow-x (en-US) 를 사용하여 x 축을 스크롤할 수도 있지만, 긴 단어를 처리하는 데 권장되는 방법은 아닙니다! 작은 박스에서 긴 단어를 처리해야 하는 경우 word-break 또는 overflow-wrap 속성을 볼 수 있습니다.
overflow는 블록 서식 context를 설정한다.
Block Formatting Context (BFC) 의 개념이 있습니다. 이것은 지금 너무 걱정할 필요는 없지만, scroll 또는 auto 와 같은 overflow 값을 사용할 때 BFC 를 생성한다는 것을 아는 것이 유용합니다. 결과적으로 overflow 값을 변경한 박스의 내용이 자체의 미니 레이아웃이 됩니다.
웹디자인에서 원치 않는 overflow
과거에는 개발자들이 종종 고정된 높이를 사용하여 서로 관계가 없는 박스의 하단을 정렬하려고 했습니다. 이것은 깨지기 쉬웠으며, legacy 응용 프로그램에서 때때로 내용이 페이지의 다른 내용과 겹치는 박스가 나타날 수 있습니다
많은 양의 콘텐츠로 디자인을 테스트하고 텍스트의 글꼴 크기를 늘리면 CSS 가 강력한 방식으로 대처할 수 있는지 확인해야 합니다. 내용을 숨기거나 스크롤 막대를 추가하기 위해 overflow 값을 변경하는 것은 스크롤 박스를 원할 때와 같은 몇 가지 특별한 경우에만 예약할 수 있습니다.
Values and units
CSS 값이란?
CSS 값을 데이터 유형 이라고 합니다. 용어는 기본적으로 상호 교환이 가능합니다. CSS에서 데이터 유형이라고 하는 것을 볼 때, 실제로 가치를 말하는 멋진 방법입니다.
숫자, 길이 및 백분율
<integer> 은 1024 또는-55와 같은 정수입니다. | |
<number> 는 10진수를 나타냅니다. 소수점 이하의 소수 자릿수 (예: 0.255, 128 또는 -1.2) 가 있을 수도 있고 없을 수도 있습니다. | |
<percentage> 는 다른 값의 일부, 예를 들어 50%를 나타냅니다. 백분율 값은 항상 다른 수량을 기준으로 합니다. 예를 들어 요소의 길이는 부모 요소의 길이를 기준으로 합니다. |
[길이]
단위 | 이름 | 다음과 동일함 |
cm | 센티미터 | 1cm = 37.8px = 25.2/64in |
mm | 밀리미터 | 1mm = 1/10th of 1cm |
Q | 4분의 1밀리미터 | 1Q = 1/40th of 1cm |
in | 인치 | 1in = 2.54cm = 96px |
pc | Picas | 1pc = 1/6th of 1in |
pt | 포인트 | 1pt = 1/72nd of 1in |
px | 픽셀 | 1px = 1/96th of 1in |
대부분 인쇄에 더 유용하다.
[상대 길이 단위]
단위 | 관련 사항 |
em | 요소의 글꼴 크기. |
ex | 요소 글꼴의 x-height. |
ch | 요소 글꼴의 glyph "0"의 사전 길이 (너비)입니다. |
rem | 루트 요소의 글꼴 크기. |
lh | 요소의 라인 높이. |
rlh | 루트 요소의 라인 높이. 루트 요소의 font-size 또는 line-height 속성에 사용될 때 속성의 초깃값을 참조합니다. |
vw | |
vh | |
vmin | viewport의 작은 치수의 1%. |
vmax | viewport의 큰 치수의 1%. |
vb | |
vi | |
svw, svh | 작은 뷰포트 각각의 너비 및 높이 1%. |
lvw, lvh | 큰 뷰포트 각각의 너비 및 높이 1%. |
dvw, dvh | 동적인 뷰포트 각각의 너비 및 높이 1%. |
[ems 및 rems]
다시 말해서, rem 단위는 "루트 요소의 글꼴 크기"를 의미합니다.
[백분율]
[숫자]
색상
최신 컴퓨터에서 사용할 수 있는 표준 색상 시스템은 24bit이며, 채널당 256개의 서로 다른 값 (256 x 256 x 256 = 16,777,216) 을 갖는 서로 다른 빨강, 녹색 및 파랑 채널의 조합을 통해 약 1670만 개의 고유한 색상을 표시할 수 있습니다.
[16진수 RGB값]
[RGB 및 RGBA 값]
[HSL 및 HSLA 값]
•
색조 (Hue): 색상의 기본 음영입니다. 0에서 360 사이의 값을 사용합니다.
•
채도 (Saturation): 색상이 얼마나 포함되어 있습니까? 0–100% 사이의 값을 취합니다. 여기서 0은 색상이 없고 (회색 음영으로 표시됨), 100%는 전체 색상 채도입니다.
•
명도 (Lightness): 색상이 얼마나 밝습니까? 0–100%의 값을 받습니다. 여기서 0은 빛이 없고 (완전히 검은색으로 표시됨), 100%는 완전한 빛 (완전히 흰색으로 표시됨)입니다.
이미지
문자열 및 식별자
함수
Sizing items in CSS
사물의 자연적 또는 본질적 크기
HTML 요소는 CSS 의 영향을 받기 전에 설정한 자연스러운 크기입니다. 간단한 예는 이미지입니다. 이미지는 페이지에 포함된 이미지 파일에 정의된 너비와 높이를 갖습니다. 이 크기는 이미지 자체에서 나오는 — 고유 크기 (intrinsic size) 로 설명됩니다.
특정 크기 설정
요소에 크기가 주어지면 (그리고 그 내용이 그 크기에 맞아야 함) 우리는 이것을 외적인 크기 (extrinsic size) 로 지칭
min- 및 max- 크기
overflow 를 피하면서 가변적인 양의 콘텐츠를 처리할 때 매우 유용합니다.
max-width 의 일반적인 용도는 이미지를 원래 너비로 표시할 공간이 충분하지 않으면 이미지의 크기를 줄이면서, 해당 너비보다 크게되지 않도록 하는것입니다.
이 기술을 사용하여 실제로 큰 이미지를 로드한 다음 브라우저에서 축소하면 안됩니다. 이미지는 디자인에 표시되는 가장 큰 크기보다 커야합니다. 지나치게 큰 이미지를 다운로드하면, 사이트 속도가 느려질 수 있으며, 데이터 요금제인 경우 더 많은 비용이 발생할 수 있습니다.
반응형 이미지 기술 에 대해 자세히 알아보십시오.
Images_media_form_elements
Normalizing 스타일 시트는 많은 개발자가 모든 프로젝트에 사용할 일련의 기본 스타일을 작성하는 데 사용됩니다. 일반적으로 이것들은 위에서 설명한 것과 비슷한 기능을 수행하므로, CSS 에 대한 작업을 수행하기 전에 브라우저마다 다른것이 일관된 기본값으로 설정되어 있는지 확인하십시오. 브라우저는 일반적으로 과거보다 일관성이 높기 때문에, 예전만큼 중요하지 않습니다. 그러나 하나의 예를 살펴보려면 많은 프로젝트에서 기본으로 사용되는 매우 인기있는 스타일 시트인 Normalize.css 를 확인하십시오.
Styling tables
skip
Debugging_CSS
브라우저 개발자 도구 사용 방법
Firefox에는 CSS 레이아웃으로 시각적으로 작업하기 위한 훌륭한 도구가 있으며, 그리드 레이아웃 (en-US), Flexbox (en-US) 및 Shapes (en-US)를 검사하고 편집할 수 있습니다.
DOM vs 소스 보기
브라우저는 수행하려는 작업을 파악하고 DOM의 HTML은 <h2>를 </h2>로 올바르게 닫습니다. 또한 브라우저에서는 모든 HTML을 표준화하고, DOM은 JavaScript로 변경한 내용도 표시합니다.
적용된 CSS 검사
inspect, Rules view
값 편집
새 속성 추가
특이성 문제 해결
firefox 개발자 도구에 대해 자세히 알아보기
CSS의 디버깅 문제
[유효한 html, css가 있나?]
[테스트 중인 브라우저에서 속성과 값을 지원하나?]
MDN의 각 속성 페이지 하단에 있는 브라우저 호환성 표
[다른 요소가 css 재정의하나?]
[문제의 축소된 테스트 사례 만들기]
축소된 테스트 케이스를 만드는 방법은 다음과 같습니다.
1.
마크업이 동적으로 생성되는 경우(예: CMS를 통해) 문제를 보여주는 출력의 정적 버전을 만드세요. CodePen과 같은 코드 공유 사이트는 축소된 테스트 사례를 호스팅하는 데 유용합니다. 그러면 온라인에서 액세스할 수 있고 동료와 쉽게 공유할 수 있기 때문입니다. 페이지에서 소스 보기를 수행하고 HTML을 CodePen에 복사한 다음 관련 CSS 및 JavaScript를 가져와서 포함할 수 있습니다. 그 후에도 문제가 여전히 분명한지 확인할 수 있습니다.
2.
JavaScript를 제거해도 문제가 해결되지 않으면 JavaScript를 포함하지 마세요. JavaScript를 제거해도 문제가 해결되지 않는 경우 가능한 한 많은 JavaScript를 제거하고 문제의 원인은 그대로 두세요.
3.
문제의 원인이 되지 않는 HTML을 제거하세요. 구성 요소 또는 레이아웃의 주요 요소를 제거합니다. 다시 말하지만, 여전히 문제를 보여주는 가장 작은 양의 코드를 찾아보세요.
4.
문제에 영향을 주지 않는 CSS를 제거하세요.
