HTML & CSS

🔖 메타 데이터(metadata)란메타데이터(metadata)란 '데이터에 대한 데이터(정보)'라는 의미로, 어떤 데이터를 설명하고 관리하기 위해 사용됩니다.원본 데이터의 특성, 속성, 구조, 유형 등에 대한 정보를 담고 있습니다.- 출처 사이트메타 데이터에는 어떤 목적을 위한 정보가 포함되느냐에 따라 다양한 종류가 존재합니다.아래는 메타 데이터의 몇 가지 예시입니다.기술적 메타 데이터: 파일의 형식, 크기, 생성일 등관리 메타 데이터: 데이터 소유자, 접근 권한, 보안 설정 등서술적 메타 데이터: 데이터에 대한 내용인 제목, 설명, 키워드 등메타 데이터는 사용자가 아닌 검색 엔진에게 웹 페이지의 정보를 제공하기 위해 사용되는 데이터이므로검색 엔진이 해당 웹 페이지의 주제와 내용을 잘 파악하는 데 중요..

🍎 설치하기1) 터미널에서 아래의 명령어를 입력하여 'tailwind-scrollbar-hide'라는 이름의 플러그인을 설치합니다.# npm 사용 시npm install tailwind-scrollbar-hide# yarn 사용 시yarn add tailwind-scrollbar-hide 2) 설치한 플러그인의 이름을 'tailwind.config.js' 파일의 플러그인 목록에 추가해줍니다.// tailwind.config.jsmodule.exports = { content: [], theme: { extend: {}, }, plugins: [ require('tailwind-scrollbar-hide') //  🍎 사용하기'scrollbar-hide' 클래스명은 테일윈드가 기본으로..

🔮 설치하기1) 테일윈드를 사용하고자 하는 디렉토리에서 터미널을 켭니다. 2) 터미널에서 아래의 명령어를 입력하여 tailwindcss, postcss, autoprefixer를 설치합니다.npm install -D tailwindcss postcss autoprefixer 3) 터미널에서 아래의 명령어를 입력하여 'tailwind.config.js'와 'postcss.config.js' 파일을 생성합니다.npx tailwindcss init -p 4) 'postcss.config.js' 파일을 열어 다음과 같은 내용으로 설정되어 있는지 확인합니다.module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },} 5) 'tailwi..

🐝 정의CSS 파일을 별도로 작성하지 않고 자바스크립트 파일 안에서 CSS를 작성하는 방식입니다. 자바스크립트 코드가 실행되며 CSS 코드가 생성됩니다.CSS-in-JS 라이브러리의 종류는 다음과 같습니다.Styled-ComponentsemotionJSS-ReactglamorousRadiumAphroditeetc.. 🐝 장단점CSS-in-JS의 장점은 다음과 같습니다.CSS 클래스의 이름 충돌 문제 해결: 스코프를 해당 컴포넌트로 한정하여 전역적으로 인식되는 네임스페이스의 충돌을 방지합니다.컴포넌트 단위의 스타일링: 컴포넌트에 적용될 스타일을 같은 파일 내에서 정의하고 관리할 수 있습니다.동적인 스타일링: props나 state에 따라 상황에 맞는 스타일을 적용할 수 있습니다.자바스크립트를 활용: 자..