[TIL] 240924_CSS: Tailwind 사용법 etc.

⚙️ Tailwind Setting

tailwind 설치

npm install --save tailwindcss@latest postcss@latest autoprefixer@latest

tailwind 지시어 추가

📁 src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

사용 예시

<button 
  className="py-2 px-4 font-semibold
  rounded-lg shadow-md text-white bg-green-500
  hover:bg-green-700"
>
	Hello Tailwind!
</button>

💭 문법

• w-12: 너비를 12로 설정
  1/2, 1/4, full처럼 비율로 설정도 가능.
• h-10: 높이를 10으로 설정
  역시나 1/2, 1/4, full처럼 비율로 설정도 가능.
• text-white: 글자 색을 white로 설정
• bg-gray-400: 배경 색을 gray로 하고, 400 정도로 설정.
• flex/inline/inline-block/inline-flex: css와 동일.
• p-3: 전체 방향으로 3만큼 패딩
  px-3: x 방향으로 3만큼 패딩 / py-3: y 방향으로 3만큼 패딩
  pr-3: 오른쪽으로 3만큼 패딩 / pl-3: 왼쪽으로 3만큼 패딩
• m-3: 전체 방향으로 3만큼 마진
  mx-3: x 방향으로 3만큼 마진 / my-3: y 방향으로 3만큼 마진
  mr-3: 오른쪽으로 3만큼 마진 / ml-3: 왼쪽으로 3만큼 마진
• rounded: 모서리 마진 설정
  rounded-md, rounded-lg 등과 같이 사용.
• font
  • font-sans/serif/mono: 폰트 패밀리
  • font-xs/sm/base/lg/lx/2xl/3xl: 폰트 크기
  • font-thin/light/normal/semibold/bold: 폰트 웨이트
• drop-shadow: 그림자
  
  

❗️설정 중복 시 최근에 작성된 문법이 적용된다.
❗️기존에 정해져있는 것들 말고 사용자가 직접 정의하고 싶다면, "text-[30px]"처럼 []를 사용해 작성하면 된다.

🤔 strong과 em

• strong은 중요성, 심각성, 긴급성이 있는 부분에 쓰는 것이고 문장의 의미를 바꾸지 않는다.
  ➡️ 객관적인 중요성
• em은 컨텐츠에서 강세를 주고싶은 부분에 쓰는 것이고 문장의 의미를 바꾼다.
  ➡️ 화자가 강조하고자 하는 것

오늘 교육을 듣다가 strong과 em의 차이에 대해 언급하셨길래, 직접 찾아본 후 첨언!