오늘의 키워드📌

• 가상 클래스 선택자와 가상 요소 선택자의 차이점
  • 가상 클래스 선택자
  • 상호 작용을 위한 가상 클래스
  • 가상 요소 선택자
  • 가상 요소 선택자 종류
• Flex
  • Flex 장점
  • Flex 사용법
  • Flex 컨테이너 속성

1. 가상 클래스 선택자 / 가상 요소 선택자 차이점

1-1. 가상 클래스 선택자

가상 클래스 선택자란 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 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번째 자식인 엘리먼트를 선택

1-2. 상호 작용을 위한 가상 클래스

:hover

사용자가 마우스를 요소 위에 올렸을 때 적용된다. 스마트폰이나 패드 종류의 터치스크린 기기에서는 사용자의 손가락이 호버되는 시점을 알 수 없기 때문에 모바일 기기가 많아지면서 점점 사용 빈도가 줄어드는 기능이다.

:active

사용자가 요소를 실행할 때(버튼을 누르거나 링크를 클릭할 때) 적용된다.

:focus

요소에 포커스가 있을 때 적용된다. 클릭할 수 있는 요소나 폼컨트롤(input, select 등)과 같이 상호작용 할 수 있는 모든 요소에는 포커스가 가능하다.

1-3. 가상 요소 선택자

실제로 존재하는 요소에 가상으로 클래스를 주던 가상 클래스와는 다르게 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다. 보통 콜론:을 사용하지만 가상 클래스와의 구분을 하기 위해 이중콜론:: 사용을 권장한다.

단, 이중 콜론::은 IE9 이상부터 지원하며 브라우저, OS 스크린리더에 따라 가상 요소 선택자를 읽을 수도 있고 읽지 않을 수도 있다.

1-4. 가상 요소 선택자 종류

• ::beofer : 지정된 요소의 앞에 가상의 요소 생성
• ::after : 지정된 요소의 뒤에 가상의 요소 생성
• ::first-letter : 지정된 요소의 첫 번째 글자에 스타일 적용
• ::first-line : 지정된 요소의 첫 번째 줄에 스타일 적용

즉, 가상 클래스 선택자와 가상 요소 선택자의 가장 큰 차이점은 아래와 같다.

• 가상 요소 선택자는 콜론이 2개, 가상 클래스 선택자는 1개이다.
  (간혹 가상 요소 선택자에 콜론이 1개만 있는 경우가 있는데 이는 레거시 브라우저 호환을 위한 선택이다. IE8 이하)
• 가상 요소 선택자는 마크업 없는 요소를 삽입하고, 가상 클래스 선택자는 클래스 없는 요소에 클래스 삽입한다.

2. Flex

Flex(플렉스)는 Flexible Box, FlexBox라고 부르기도 한다.
Flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 딱히 사용할 게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다.

여러가지 예제를 통해 실습을 할 때 개발자 도구를 참고하면 GUI 기능으로 잘 정리가 되어 있으니 유용하다!

1분코딩님은 IE 11만 지원해도 되는 프로젝트라면 Flex를 적극 사용하고 계시다고 한다!

2-1. Flex 장점

• 1줄의 코드 추가로 수평 정렬이 가능하다.
• 요소의 상하좌우 정렬, 순서 변경이 간단하다.
• 요소가 간격 조절이 간단하다.
• 서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.

비교적 최신 브라우저가 아니면 벤더 프리픽스를 사용하여야 하고 IE8, 9의 경우 지원하지 않고 IE10, 11의 경우도 일부 지원하므로 주의가 필요하다. IE에서 Flex를 사용하기 위해서는 flexibility.js를 사용하면 편리하다.

2-2. Flex 사용법

Flex 레이아웃은 flex item이라 불리는 복수의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성된다.

Flex Layout Box Model

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는 자신의 직계자식까지만 영향을 미친다.

2-3. Flex container 속성

• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

2-4. Flex item 속성

• align-self
• flex-grow
• flex-shrink
• flex
• order

컨테이너 속성과 아이템 속성에 대해서는 긴 설명보다 Flexbox playground 에서 실습해 보는게 이해하는데 훨씬 더 빠르다!

몰랐던 점 ✏️

• 가상 요소 선택자, 가상 클래스 선택자 차이점
• 부모 요소에 width 값이 없으면 flex-wrap: nowrap 속성을 주었을 때 요소가 넘치게 된다.
• vscode 파일명 옆 알파벳들의 의미
  
  A - Added (This is a new file that has been added to the repository)
  M - Modified (An existing file has been changed)
  D - Deleted (a file has been deleted)
  U - Untracked (The file is new or has been changed but has not been added to the repository yet)
  C - Conflict (There is a conflict in the file)
  R - Renamed (The file has been renamed)
  S - Submodule (In repository exists another subrepository)
  stackoverflow 해당내용 보기
• flex-item들은 기본적으로 Axis를 기준으로 정렬되는것!
• axis와 짝을 이루는 cross-axis가 존재하는데, axis가 row 상태라면 cross-axis는 column이고, axis가 column이면 cross-axis는 row 상태.
• flex를 이용한 중앙 정렬 방법

  .flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  }

오늘 하루를 정리하며.. 🌃

여태까지 css를 몰라도 너무 몰랐다! flex와 grid부터가 진짜 시작인 느낌이다. 여태까지는 워밍업 한 느낌..! 이러고 있을 시간이 없다! 얼른 공부하러 가자!!!🔥

참고 🔗

• cheatsheet
• mdn - flexbox
• 1분코딩 - CSS Flex
• Flexbox playground 실습