참고(공식문서) : https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com* 1. Tailwind CSS ?① Tailwind CSS는 모든 HTML 파일, JavaScript 구성 요소 클래스 이름에 대한 기타 탬플릿을 스캔하고 해당 스타일을 생성한 다음 이를 정적 CSS 파일에 작성하는 방식으로 작동한다.② Tailwind CSS는 유틸리티 (uti..
1. px* CSS 에서 사용되는 가장 기본적인 단위* 브라우저의 값이 변경되어도 항상 고정값인 절대값💬 예시.box { width: 300px;}2. em* 부모로 부터 상속된 폰트 크기 값에 따라 바뀌는 상대값* 부모의 폰트 크기가 지정되어 있지 않으면 1em = 16px 로 인식된다. (why? 브라우저의 기본값이 16px이기 때문)💬 예시 .parent { font-size: 20px; /* 1em = 20px */}.child { font-size: 2em; /* 2 * 20px = 40px */}3. rem* root요소(최상위 요소)의 폰트 크기 값에 따라 바뀌는 상대값💬 예시 body { font-size: 16px;}.parent { font-size: 10p..
1. CSS (Cascading Style Sheets) ?* CSS는 HTML같은 마크업(mark up)언어가 아닌 Style Sheet언어 입니다.* HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있습니다.2. CSS 기본 문법(1) 선택자(Selector)* CSS를 적용하고자 하는 HTML요소(2) 선언(Declaration)* 선언들을 세미콜론(;)으로 끝난다.* 중괄호({ })로 감싼다.(3) 속성(Property)* 주어진 HTML 요소를 꾸밀 수 있는 방법(4) 속성값(Property value)* 속성에 대한 값 3. CSS 선택자(1) HTML 요소* HTML 요소의 태그를 직접 사용하여 선택하는 방식입니다.안녕하세요, h1태그 입니다.h1 { font-size: 40p..
프로젝트를 하다 보면 내가 주지도 않은 CSS가 적용되어 있다.why? 브라우저가 기본으로 제공하는 스타일이 있다. → ❓ user agent styleSheet 때문!❓ user agent styleSheet (사용자 에이전트 스타일시트)- 각 브라우저의 모든 문서에는 기본 스타일을 제공하는 기본 스타일 시트를 user agent styleSheet 라고 합니다.- 프로젝트 시작 전에 normalize.css, minireset.css, reset.css들로 초기화 해주자. css를 초기화 하기 위해 상위의 css에 reset파일을 만들어주자.1. normalize.csslink : https://necolas.github.io/normalize.css/ 2. minireset.csslink : htt..
