Tailwind CSS HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS프레임워크입니다. Tailwind CSS는 부트스트랩과 같이 미리 셋팅된 Uitility Class를 활용하는 방식으로 HTML에서 스타일링 할 수 있습니다. 빠른 스타일링 작업이 가능하며, Class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 됩니다. 유틸리티 클래스가 익숙해지는 시간이 필요할 수 있지만 IntelliSense 플러그인이 제공되어서 금방 익숙하게 사용할 수 있습니다. 1. 프로젝트 사용 셋팅 셋팅 방법은 아래 홈페이지에서 자세하게 확인 할수 있습니다. Install Tailwind CSS using PostCSS - Tailwind CSS Installing Tailwind CSS as a Post..

SCSS 문법 1. 주석 /**/ 또는 // 기존 사용하는 css 주석 이외에 javascript 주석도 함께 이용가능하다. /**/ : css 변환 후에도 주석이 남아있다. // : css 변환 후 주석이 남아있지 않는다. .container{ h1 { color: $color; /*background:#000*/ // font-size:20px } } 2. 변수 설정 $명칭 = 값 유효범위를 설정 할 수 있다. 2-1. 전역변수 📑 SCSS $color : royalblue; .container{ color: $color; } 📑 CSS /* CSS 전역 변수 선언 */ :root { --color: royalblue; } .container{color: var(--color);} 2-2. 지역 변수..

SCSS를 사용한 프로젝트 CSS 전 처리 도구 , css를 좀더 쉽게 사용하기 위한 도구이다. 문법을 두가지 지원을 한다. SCSS , SASS ( ※ SASS는 기존 CSS문법과 호환이 잘 되지 않는 문제점이 있다.) 실제로 웹에서 동작하기 위해서는 작성한 문법을 CSS로 변환( 컴파일 )해야한다. 1. 사용이유 중첩기능 / 변수 ( CSS에서도 변수 현제 사용 가능 ) / 등 유용한 기능 사용 Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 2. 프로젝트 생성 2-1.프..