가상 클래스 선택자란 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css 제어하는 것을 뜻한다.
a:hover
, p:nth-child(1)
와 같이 실제로 html에 존재하지 않는 클래스지만 마치 클래스가 존재하는 것처럼 작동한다고 하여 가상 클래스 선택자로 부른다.
<ul>
<li class="foo">1</li> <!-- .foo:first-child -->
<li class="foo">2</li>
<li class="foo">3</li> <!-- .foo:nth-child(3) -->
<li class="foo">4</li>
<li class="foo">5</li> <!-- .foo:last-child -->
</ul>
.foo:first-child
: class="foo"인 엘리먼트 중 첫번째 자식인 엘리먼트를 선택
.foo:last-child
: class="foo"인 엘리먼트 중 마지막 자식인 엘리먼트를 선택
.foo:nth-child(n)
class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 선택
.foo:nth-child(odd)
class="foo"인 엘리먼트 중 홀수 번째 자식인 엘리먼트를 선택
foo:nth-child(even)
class="foo"인 엘리먼트 중 짝수 번째 자식인 엘리먼트를 선택
.foo:nth-child(3n+1)
class="foo"인 엘리먼트 중 3n+1번째 자식인 엘리먼트를 선택
사용자가 마우스를 요소 위에 올렸을 때 적용된다. 스마트폰이나 패드 종류의 터치스크린 기기에서는 사용자의 손가락이 호버되는 시점을 알 수 없기 때문에 모바일 기기가 많아지면서 점점 사용 빈도가 줄어드는 기능이다.
사용자가 요소를 실행할 때(버튼을 누르거나 링크를 클릭할 때) 적용된다.
요소에 포커스가 있을 때 적용된다. 클릭할 수 있는 요소나 폼컨트롤(input, select 등)과 같이 상호작용 할 수 있는 모든 요소에는 포커스가 가능하다.
실제로 존재하는 요소에 가상으로 클래스를 주던 가상 클래스와는 다르게 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다. 보통 콜론:
을 사용하지만 가상 클래스와의 구분을 하기 위해 이중콜론::
사용을 권장한다.
단, 이중 콜론::
은 IE9 이상부터 지원하며 브라우저, OS 스크린리더에 따라 가상 요소 선택자를 읽을 수도 있고 읽지 않을 수도 있다.
::beofer
: 지정된 요소의 앞에 가상의 요소 생성::after
: 지정된 요소의 뒤에 가상의 요소 생성::first-letter
: 지정된 요소의 첫 번째 글자에 스타일 적용::first-line
: 지정된 요소의 첫 번째 줄에 스타일 적용즉, 가상 클래스 선택자와 가상 요소 선택자의 가장 큰 차이점은 아래와 같다.
- 가상 요소 선택자는 콜론이 2개, 가상 클래스 선택자는 1개이다.
(간혹 가상 요소 선택자에 콜론이 1개만 있는 경우가 있는데 이는 레거시 브라우저 호환을 위한 선택이다. IE8 이하)- 가상 요소 선택자는 마크업 없는 요소를 삽입하고, 가상 클래스 선택자는 클래스 없는 요소에 클래스 삽입한다.
Flex(플렉스)는 Flexible Box, FlexBox라고 부르기도 한다.
Flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 딱히 사용할 게 없어서 쓰던 float
나 inline-block
등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다.
여러가지 예제를 통해 실습을 할 때 개발자 도구를 참고하면 GUI 기능으로 잘 정리가 되어 있으니 유용하다!
1분코딩님은 IE 11만 지원해도 되는 프로젝트라면 Flex를 적극 사용하고 계시다고 한다!
height
를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.비교적 최신 브라우저가 아니면 벤더 프리픽스를 사용하여야 하고 IE8, 9의 경우 지원하지 않고 IE10, 11의 경우도 일부 지원하므로 주의가 필요하다. IE에서 Flex를 사용하기 위해서는 flexibility.js를 사용하면 편리하다.
Flex 레이아웃은 flex item이라 불리는 복수의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성된다.
Flex를 사용하기 위해서 HTML 부모 요소의 display 속성에 flex를 지정한다.
.flex-container {
display: flex;
}
부모 요소가 inline
요소인 경우 inline-flex
를 지정한다.
.flex-container {
display: inline-flex;
}
flex
또는 inline-flex
는 부모 요소에 반드시 지정해야하는 유일한 속성이며 자식 요소는 자동적으로 flex item이 된다.
즉, 블록 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 한다. 이때 부모를 Flex-container
, 영향을 받는 자식들을 Flex-item
이라고 부른다. flex는 자신의 직계자식까지만 영향을 미친다.
flex-direction
flex-wrap
justify-content
align-items
align-content
align-self
flex-grow
flex-shrink
flex
order
컨테이너 속성과 아이템 속성에 대해서는 긴 설명보다 Flexbox playground 에서 실습해 보는게 이해하는데 훨씬 더 빠르다!
width
값이 없으면 flex-wrap: nowrap
속성을 주었을 때 요소가 넘치게 된다.flex-item
들은 기본적으로 Axis
를 기준으로 정렬되는것!axis
와 짝을 이루는 cross-axis
가 존재하는데, axis가 row 상태라면 cross-axis는 column이고, axis가 column이면 cross-axis는 row 상태..flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
여태까지 css를 몰라도 너무 몰랐다! flex와 grid부터가 진짜 시작인 느낌이다. 여태까지는 워밍업 한 느낌..! 이러고 있을 시간이 없다! 얼른 공부하러 가자!!!🔥
inline-flex는 자식 요소가 아닌, 부모 요소에 영향을 주는 속성임을 처음 알았습니다.
늘 많이 배우고 있습니다~~😊