👩🏻‍💻 프로그래밍 언어/CSS

Tailwind CSS에서 유틸리티 클래스에 대괄호 []를 사용하면 맞춤 또는 동적 값을 적용할 수 있는 반면,대괄호를 사용하지 않으면 사전 정의된 표준 유틸리티 값을 사용할 수 있습니다. 대괄호 []를 사용하지 않는 예시 (사전 정의된 클래스 사용)이 경우, Tailwind의 사전 정의된 값을 사용하여 너비, 배경색, 패딩 등을 설정합니다. 사전 정의된 유틸리티 클래스 w-32: 너비를 8rem(128px)으로 설정합니다.bg-blue-500: 사전 정의된 파란색을 배경색으로 적용합니다.p-4: 1rem(16px)의 패딩을 추가합니다. 대괄호 []를 사용하는 예시 (맞춤 값 사용)여기서는 []를 사용하여 Tailwind가 기본적으로 정의하지 않은 맞춤 값을 적용합니다. 맞춤 유틸리티 클래스 w-[200..

Tailwind CSS 사용해보기Tailwind CSS(opens in a new tab) 란 ?Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.장점유틸리티 우선 프레임워크: Tailwind CSS는 유틸리티 클래스를 사용하여 빠르고 효율적인 스타일링을 가능하게 하며, 프로젝트 전반에 걸쳐 일관된 스타일을 유지하면서도 쉽게 디자인할 수 있습니다.맞춤화 가능: Tailwind CSS는 모든 디자인 시스템에 맞게 확장 및 맞춤설정이 가능해, 다양한 프로젝트에 유연하게 적용할 수 있습니다.다양한 프레임워크와 통합: Next.js, Nuxt.js, Vue.js 등과 잘 통합되며, PostCSS를 지원하여 자동 접두어 지정과 같은 기능을 활성화할 수 있습니다.자바스크립트 코드와 분리: Ta..

Scssnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}CSSnav ul { margin: 0; padding: 0; list-style: none;}nav li { display: inline-block;}nav a { display: block; padding: 6px 12px; text-decoration: none;}믹스인 예시Scss@mixin theme($theme: DarkGray) { background: $theme; ..

✅ em 단위기준: em 단위는 요소의 직접적인 부모 요소 또는 자신의 글꼴 크기를 기준으로 합니다.상대적 크기: 부모 요소의 글꼴 크기에 상대적이므로, 중첩된 요소들의 크기 계산이 복잡해질 수 있습니다.사용 예: 특정 요소의 크기를 그 요소가 포함된 컨텍스트 내에서 상대적으로 설정할 때 유용합니다.✅ rem 단위기준: rem 단위는 루트 요소(html 요소)의 글꼴 크기를 기준으로 합니다.일관성: 전체 문서에서 동일한 기준을 사용하므로, 일관된 크기 조정을 할 수 있습니다.사용 예: 전체 문서에서 일관된 상대적 크기를 설정할 때 유용합니다. 사용 예`em` 사용 예 Container element with font-size: 1.5em Nested element with fon..

.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}설명repeat(3, 1fr):repeat 함수는 반복적인 그리드 트랙을 정의합니다.첫 번째 인수인 3은 반복 횟수를 의미합니다. 여기서는 3번 반복됩니다.두 번째 인수인 1fr은 각 트랙의 크기를 정의합니다. 여기서 1fr은 그리드 컨테이너 내의 사용 가능한 공간의 비율을 의미합니다.fr 단위fr(Fraction Unit):fr 단위는 CSS Grid에서 사용 가능한 공간을 분할하는 데 사용됩니다.예를 들어, 1fr은 가용 공간의 1부분을 의미합니다. 여러 fr 값이 있을 때, 각각의 값은 전체 가용 공간의 비율을 정의합니다.