TIL - CSS 레이아웃 (선택자 / flex)

가상 클래스 선택자 first-of-type

• :first-child 형제 요소 중 첫번째 요소를 선택하는 가상 클래스

  <div class="container">
  	<h1>제목입니다.</h1>
  	<p>첫번째 p입니다.</p>
  	<p>두번째 p입니다.</p>
  	<span>첫번째 span입니다.</span>
  	<p>세번째 p입니다.</p>
  </div>

  .container p:first-child{
  	background :red
  }

- .container h1:first-child 가 선택하는 요소는 h1
- :first-child는 대상의 모든 형제 요소 중 첫 번째에 있는 요소를 취급한다.
- 이 경우, .container 의 모든 자식 요소 중에서 h1이 첫 번째 요소이기 때문에
first-child에는 h1만 올 수 있고 다른 요소는 올 수 없다.

---

• :first-of-type 형제 요소 중 첫번째 요소를 선택하는 가상 클래스

  <div class="container">
  	<h1>제목입니다.</h1>
  	<p>첫번째 p입니다.</p>
  	<p>두번째 p입니다.</p>
  	<span>첫번째 span입니다.</span>
  	<p>세번째 p입니다.</p>
  </div>

  .container p:first-of-type{
  	background :red
  }

  

  • 하지만, :first-child 와는 다르게
    :first-of-type 는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 취급한다.
  • 즉, first-child는 모든 형제 요소 중 첫 요소라면
    **first-of-type은 지정해서 선택한 것과 일치하는 형제 요소 중 첫 요소**

---

그 외 가상 클래스 선택자

가상 클래스 선택자 :active / :focus / :visited

• :active 활성화된 요소를 선택하는 가상 클래스 선택자
  • 활성화 된 요소?
    → 버튼 등을 클릭해서 요소의 동작이 활성화 되어있는 상태
• :focus focus를 받고 있는 입력 창들의 요소를 선택하는 가상 클래스 선택자
  • focus를 받고 있는 요소?
    → tab키 등을 이용해서 입력 창의 커서가 활성화 되어있는 상태
• :visited 사용자가 방문한 적 있는 링크를 선택하는 가상 클래스 선택자
  • 방문한 적 있는 링크?
    → 링크를 눌러 해당 경로를 방문한 기록이 브라우저 상에 남아 있는 링크
    (방문한 적이 있을 경우 기본적 - 보라색 / 없을 경우 - 파란색)
    

가상 요소 선택자 :before / :after

실제로 HTML 요소를 수정하지 않고, CSS만으로 가상 요소를 추가해 선택할 수 있다.

• 가상 요소 선택자 없이, 기존 방법으로 코드 작성
  

• 가상 요소 선택자를 사용한 코드 작성
  

• 가상 요소 선택자 사용시 장점은 가상 선택자를 잘 활용하면 HTML부분이 많이 줄어든다.
• 주의❗️
  • 가상 요소 선택자를 사용하는 경우, CSS 선언 부분을 살펴보면 content 속성 을 볼 수 있다.
  • 말 그대로 ‘가상으로’ 만들어준 요소이기 때문에 본질적으로 HTML상에는 존재하지 않는다.
  • 따라서 content 속성을 이용해서 인위적으로 요소 내에 들어갈 content를 작성해야한다.
    content 속성이 없으면 해당 가상요소는 화면에 그려지지 않는다.

형제 요소 선택자

• A와 같은 부모를 가지고 있는 형제 요소들 중 B를 선택한다.

A ~ B {
	property : value
}

---

flex 레이아웃2

• flex-direction : row | column - 중심축의 방향을 결정
• justify-content - 중심축 방향의 정렬 방식을 결정한다.
  

• align-items - 중심축 수직 방향(=교차축 방향)의 정렬 방식을 결정한다.
  

flex-wrap

flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정합니다.

• flex-wrap : nowrap (기본값)
  • item의 줄 바꿈을 허용하지 않는다.
  • 따라서 item이 아무리 많아져도 무조건 한줄에 들어간다.

• flex-wrap : wrap
  • item의 가로 사이즈가 container의 가로 사이즈를 넘겼을 때, 자연스럽게 다음 줄로 넘어간다.

• align-content
  • 여러 줄이 된 flex-item의 중심 반대 축 정렬을 어떻게 할 지 결정한다.

• flex-flow
  • flex-direction과 flex-wrap을 합쳐놓은 단축 속성
  • 단축 속성? → 유사한 성질을 가진 여러 공통 속성들을 한번에 입력할 수 있도록 묶어 놓은 속성
    

flex-item 속성

지금까지는 flex-container에 적용하는 속성들을 flex-item에도 줄 수 있다.
flex-container란 display:flex가 적용된 요소 (즉, 부모 박스)
flex-item이란 flex-container가 안의 각각의 아이템

• flex-item 속성들
  - order : item의 순서를 지정
  - flex-basis : item의 기본 사이즈를 지정
  - flex-shrink : 설정된 숫자값에 따라 flex-container 요소 내부에서 item 크기 축소
  - flex-grow : flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언

  참고

  [인프런x코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
  https://inf.run/uzui