<style></style>
의 내용(Contents)으로 스타일을 작성하는 방식<link />
로 외부 CSS 문서를 가져와서 연결하는 방식(병렬연결)CSS 선택자에는 크게 5가지의 종류가 있습니다.
기본
복합
가상 클래스
가상 요소
속성
- 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택.
선택자 ABC 요소가 포커스되면 선택.
focus는 포커스가 가능한 요소에서만 동작합니다.
- focus가 가능하지 않은 요소를 focus가 가능한 요소로 만드려면,
해당 요소에 속성으로 tabindex="-1"
를 추가해줍니다.
Focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당합니다.
INPUT
,A
,BUTTON
,LABEL
,SELECT
등 여러 요소가 있습니다.
그리고 HTML 대화형 콘텐츠 요소가 아니더라도,
tabindex
속성을 사용한 요소도 Focus가 될 수 있습니다.
구글 검색 : HTML 대화형 콘텐츠 mdn
tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있습니다.
이름에서도 할 수 있듯, Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는 속성입니다.
순서(값)로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않습니 다.
검색 추천: tabindex mdn
2n
: 2,4,6,8... 짝수 번째 마다 선택.
2n+1
: 1,3,5,7... 홀수 번째 마다 선택.
n+2
: 2번째 요소부터 그 이후 요소들을 선택.
::before
: 선택자 ABC 요소의 내부
앞
에 내용(Content)을 삽입.::after
: 선택자 ABC 요소의 내부
뒤
에 내용(Content)을 삽입.content: "";
라고 적용. [ABC]
[ABC="XYZ"]
모두
글자/문자 관련 속성들이지만,모든
글자/문자 속성은 아닙니다.자동 상속 되지 않는 속성들을 값으로inherit
을 주어 해당 속성의 부모의 값을 상속하게 만듭니다.
우선순위란, 같은 요소가 여러 선언의 대상이 된 경우,
어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법입니다.
:hover
,:nth-child(n)
등 도 여기에 포함. ::before
등 여기에 포함.