(tailwind) @apply, nth-child, display 정리

강의 듣다가 헷갈려서 정리함

• 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child

* @apply

출처 : https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
▶ 부분적으로 세부사항을 지정하고 싶을 때 사용
▶ 출처의 예시처럼 tailwind가 class에서 길어지는 것을 class이름을 지정하고 나머지 style 효과를 안에 넣을 수 있음
▶ 아래의 코드처럼 div class="rounded-lg"로 지정하고 다른 css 파일에 @apply 코드 작성 시 div class="rounded-lg"가 우선적으로 적용됨
▶ 클릭과 같은 이벤트로 색상이나 div값을 숨기거나 드러낼 때 사용

* nth-child()

▶ 형제 사이에서의 순서에 따라 요소를 선택
▶ 인덱스는 1부터 시작함

li:nth-child(2) { //목록의 두 번째 <li> 선택
	color: red;
}

:nth-child(4n) { //임의의 그룹에서 네 번째 위치하는 모든 요소 선택
  color: lime;
}

[예시]

<template>
<div class="option-default bg-gray-100 p-2 rounded-lg mb-3 relative" :ref="optionChosen"
@click="onOptionClicked(choice, item)">
 	<div class="bg-blue-700 p-1 transform rotate-45 rounded-md h-10 w-10 text-white font-bold absolute right-0 top-0 shadow-md">
		<p class="transform -rotate-45">+10</p>
	</div>
    
   <div class="rounded-lg font-bold flex p-2">
  		<div class="p-3 rounded-lg">{{ item }}</div>
 		<div class="flex items-center pl-6">{{ choice }}</div>
       	</div>
  </div>
</template>

[custom.css]

▶ div:nth-child(1) = class="bg-blue-700 ~"로 시작하는 div
▶ div:nth-child(2) = class="bg-blue-700 ~", class="rounded-lg ~"
▶ inline 속성(display: inline과 동일) = 아래의 ".option-default div:nth-child(2) div:nth-child(1)"에서 inline 지울 경우 div class="option-default"의 크기가 초기화면의 크기와 클릭했을 때 크기가 달라짐
(출처 : https://tailwindcss.com/docs/display)

.option-default {
    @apply cursor-pointer;
  }
  
  .option-default div:nth-child(1) {
    @apply hidden; 
  }
  
  .option-default div:nth-child(2) div:nth-child(1) {
    @apply inline bg-gray-400 text-gray-800;
  }
  
  .option-default div:nth-child(2) {
    @apply bg-white text-gray-800;
  }

* display

출처 : https://www.daleseo.com/css-display-inline-block/

1. inline

• display: inline인 경우 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들이 나란히 배치
• span, a, em 태그가 대표적인 inline 엘리먼트
• (주의할 점) width와 height 속성을 지정해도 무시됨
  → 해당 태그가 마크업하고 있는 컨텐츠 크기만큼 공간을 차지하도록 되어 있음
  → margin과 padding 속성은 좌우 간격만 반영, 상하 간격은 반영 X

2. block

• display: block인 경우 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄에 밀어내고 혼자 한 줄 차지
• div, p, h1 태그가 대표적인 block 엘리먼트
• inline과 달리 width, height, margin, padding 속성이 모두 반영

3. inline-block

• display: inline-block인 경우 inline + block 속성이 섞여 있음
• 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치 + block 처럼 width, height, margin, padding 속성이 모두 반영(내부적으로는 block 규칙, 외부적으로는 inline 규칙 따름)
• button, input, select 태그가 대표적인 inline-block 엘리먼트
• (장점) 여러 개의 엘리먼트들을 한 줄에 원하는 너비만큼 정확히 배치 가능