HTML & CSS

🔮 설치하기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에 따라 상황에 맞는 스타일을 적용할 수 있습니다.자바스크립트를 활용: 자..

🌱 속성 선언 순서CSS 문서의 가독성과 팀원들과의 협업을 위해 개인 또는 팀만의 규칙을 지키며 속성과 클래스명을 선언하는 것은 중요한 습관입니다.속성을 선언할 때 반드시 지켜야 하는 순서는 없지만, 일반적인 순서는 존재합니다. 세세한 순서를 지키기보다 전체적인 틀을 생각하며 작성한다면가독성 있는 문서를 작성할 수 있으며, 유지보수 시에 필요한 속성을 금방 찾아낼 수 있습니다. 개략적인 선언 순서는 다음과 같습니다.시각적/레이아웃박스 모델배경폰트 및 텍스트사용자 인터페이스그밖의 속성들  세부적인 선언 순서는 다음과 같습니다.시각적/레이아웃overflowvisibilitydisplaypositiontop/right/bottom/leftfloatclear박스 모델widthheightmarginpadding..

🌱 블록(Block), , 등의 태그가 기본적으로 가지게 되는 속성입니다.자신의 부모 요소의 너비를 100% 꽉 채워 차지하므로나머지 요소들은 다른 줄로 밀어내고 한 줄을 온전히 혼자 차지합니다..special { width: 100%; height: 30px;}.login-btn { display: block; width: 30px; height: 20px; padding: 16px 0; text-align: center;}----------------------------------------------block1block2block3로그인width와 height, margin과 padding 속성을 모두 지정할 수 있으며아래에서 살펴볼 높이와 너비값을 지정할 수 없는 inline 속..