[멋쟁이 사자처럼 프론트엔드 스쿨] 22일차 TIL - arbitrary value, peer, @apply, object-fit, group, 다단 레이아웃

🍰 오늘은 HTML/CSS 수업을 하시는 슬비쌤과의 마지막 수업... 안돼요...(바짓가랑이 잡기) 아직 자바스크립트를 받아들일 공간이 없는데... 어쨌든 오늘도 Tailwind 수업!

🍴 Arbitrary Value

: 프로그래밍이나 데이터베이스 등에서 특정 조건을 만족시키기 위해 임의로 선택된 값

• Tailwind에서 특정 값들은 직접 지정해서 사용해야 될 때가 있음

<div class="w-[117px] h-[113px]">
<!--...-->
</div>

🍴 peer

: 형제 요소의 상태에 따라 요소의 스타일 지정해야 하는 경우 사용. 형제를 클래스로 표시하고 대상 요소의 스타일을 지정하는 peer 사용

• 아래 코드에서 input 요소에 peer 클래스를 주어 다른 요소들이 이 입력 필드의 상태를 기반으로 스타일을 적용할 수 있게 함
• span

<form action="/">
      <label for="userEmail" class="sr-only">아이디</label>
      <input class="peer" type="email" id="userEmail" name="userEmail" required placeholder="아이디" />
      <span class="hidden text-xs text-warning peer-invalid:block">아이디는 이메일 형식이어야 합니다.</span>
</form>

이메일 형식이 아닌 경우

이메일 입력하는 경우

🍴 @apply 디렉티브

: CSS 클래스 재사용하기 쉽게 해줌

• 여러 요소에 동일한 스타일 반복 적용 시 유용
• Tailwind CSS의 유틸리티 클래스들을 CSS 규칙으로 변환하여 하나의 클래스나 스타일 규칙으로 묶을 수 있음
• 코드의 가독성 높임
• 유지보수 용이

/* button.css */ 
.input-focus{
    @apply outline-none focus:ring-2 focus:ring-primary rounded-sm;
  }

/* index.html */
<input class="input-focus" type="checkbox" id="saveLogin" name="saveLogin" />
<label for="saveLogin" class="">로그인 상태 유지</label>

🍴 object-fit

: 해당 요소의 콘텐츠(이미지나 비디오 등) 크기를 어떤 방식으로 조절해 요소에 맞출 지 지정. 요소의 크기와 콘텐츠 크기가 일치하지 않을 때 콘텐츠가 요소 안에서 어떻게 배치될 지 제어하는 역할.

• fill(기본값) - 콘텐츠가 요소의 너비와 높이에 맞게 늘어나거나 줄어듦. 콘텐츠 원본 비율 유지되지 않을 수 있음.
• contain - 콘텐츠가 원본 비율 유지, 요소에 맞게 축소/확대. 요소 일부가 빈 공간으로 남을 수 있음.
• cover - 콘텐츠가 원본 비율 유지, 요소 완전히 덮음. 요소를 가득 채우기 위해 콘텐츠가 잘릴 수 있음.
• none - 콘텐츠 원본 크기와 비율 유지. 요소 크기 > 콘텐츠: 잘림, 요소 크기 < 콘텐츠: 빈 공간 남음.
• scale-down - none과 contain 중 작은 쪽 선택. 콘텐츠 > 요소 : contain, 콘텐츠 < 요소 : none

🍴 group 클래스

: 그룹화된 요소들에 상태 기반 스타일 적용할 수 있도록 도와주는 유틸리티 클래스

• group 클래스는 부모 요소에 적용
• 이를 통해 자식 요소들이 부모 요소의 상태(ex. hover, focus)등에 반응하여 스타일 변경 가능

<figure>
      <a href="/" class="group">
      	<img class="blur group-hover:blur-none group-focus:blur-none border border-gray-20" src="image.png" alt=""/>
      </a>
</figure>

• hover, focus 됐을 때 블러 처리 없애기
• a 태그에 group 클래스를 추가하여, 이 링크 요소가 hover 또는 focus 상태일 때 자식 요소들이 반응

🍴 다단 레이아웃

: 텍스트 콘텐츠를 여러 열(column)로 나누어 표시하는 방법. ex) 신문, 잡지 스타일 레이아웃

• column-count: 콘텐츠를 나눌 열의 수
• column-width: 각 열의 너비
• column-gap: 열 사이의 간격 
• column-rule: 열 사이에 선 추가

/* index.html */
<p>
    '함께 성장하는 바른 교육' 이듬(EUID)과 멋쟁이 사자처럼 태킷(Techit) 스쿨이 만났습니다. '이듬' 교육이 지향하는 비전은 동반 성장에 있습니다. 강사에서 수강생으로 한 방향으로 흘러가는 지식 전달이 아닌, 함께 공감하고 이해하며 경험하는 교육 가치를 통해 공동의 혁신을 이끌어내는 것을 목표로 합니다.
    멋쟁이 사자처럼 태킷 스쿨은 '함께'의 가치를 중요하게 생각합니다. 5년이 지나도, 10년이 지나도 IT 업계에 필요한 인재를 육성하는 교육을 제공하고, 기업의 HRD 파트너로 존재할 것이며 국내 대표 IT 교육 회사인 만큼 더 좋은 교육이 무엇인지를 끊임없이 고민하는 회사로 자리매김할 것입니다.
</p>
<p>
    '함께 성장하는 바른 교육' 이듬(EUID)과 멋쟁이 사자처럼 태킷(Techit) 스쿨이 만났습니다. '이듬' 교육이 지향하는 비전은 동반 성장에 있습니다. 강사에서 수강생으로 한 방향으로 흘러가는 지식 전달이 아닌, 함께 공감하고 이해하며 경험하는 교육 가치를 통해 공동의 혁신을 이끌어내는 것을 목표로 합니다.
    멋쟁이 사자처럼 태킷 스쿨은 '함께'의 가치를 중요하게 생각합니다. 5년이 지나도, 10년이 지나도 IT 업계에 필요한 인재를 육성하는 교육을 제공하고, 기업의 HRD 파트너로 존재할 것이며 국내 대표 IT 교육 회사인 만큼 더 좋은 교육이 무엇인지를 끊임없이 고민하는 회사로 자리매김할 것입니다.
</p>
<p>
    '함께 성장하는 바른 교육' 이듬(EUID)과 멋쟁이 사자처럼 태킷(Techit) 스쿨이 만났습니다. '이듬' 교육이 지향하는 비전은 동반 성장에 있습니다. 강사에서 수강생으로 한 방향으로 흘러가는 지식 전달이 아닌, 함께 공감하고 이해하며 경험하는 교육 가치를 통해 공동의 혁신을 이끌어내는 것을 목표로 합니다.
    멋쟁이 사자처럼 태킷 스쿨은 '함께'의 가치를 중요하게 생각합니다. 5년이 지나도, 10년이 지나도 IT 업계에 필요한 인재를 육성하는 교육을 제공하고, 기업의 HRD 파트너로 존재할 것이며 국내 대표 IT 교육 회사인 만큼 더 좋은 교육이 무엇인지를 끊임없이 고민하는 회사로 자리매김할 것입니다.
</p>

/* style.css */
p {
  column-count: 3;
}

🍴 Masonry Layout

: 불규칙한 높이를 가진 항목들을 벽돌 쌓기처럼 배치하는 레이아웃 방식. 

• 고정된 행(row)을 사용하지 않아 공간을 효율적으로 활용

🍴 watch 명령과 dev 명령

• watch: 파일의 변경 감지, 해당 변경 사항에 대응하여 빌드나 번들링 다시 실행
• dev: 개발 서버 시작 후 애플리케이션을 개발 모드로 실행하는 데 사용