차마시는 개발자

PostCss, Autoprefixer (w. webpack) 🦊 1. webpack으로 실행을 위한 "webpack", "webpack-cli", "webpack-dev-server", "html-webpack-plugin", "style-loader", "css-loader" 🐯 > 설치 여기 요기 설치 설명 보세요 > npm i -D webpack webpack-cli webpack-dev-server > npm i -D html-webpack-plugin > npm i -D style-loader css-loader 🐯 > package.json 실행을 위한 것 제작 & browser 범위 지정 "browserslist":[ "> 1%", "last 2 versions", ], "scripts":..

@media https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries 여러 미디어 유형, 장치에 따라 스타일 규칙 적용 미디어타입에서 미디어 특성일 때 css 적용 @media 미디어타입 and (미디어 특성) { //css } ex) @media screen and (max-width: 1200px) { body { color: yellow; } }

우선 순위 어떤 CSS 속성을 우선으로 할지 결정하는 방법 1. 명시도 - 명시도 점수가 높은 선언이 우선 - 전체 (0점) 1. -> 2. -> 3. 2. 선언 순서 - 명시도 점수가 같은 경우 파악 - 가장 마지막에 작성한..

복합 선택자 (Combinator) 일치 선택자(Basic Combinator) 두 태그를 동시에 만족하는 요소 선택 ( 붙여쓰기, and 연산 ) //li: 태그이면서 .tomato: 클래스 tomato인 요소 li.tomato { } 과일 물건 토마토 자식 선택자(Child Combinator) 특정 태그의 자식 태그 요소를 선택 ( > ) (자식 : 바로 밑의 태그(요소)) (형제 : 부모 태그를 공유하는 태그(요소) ) // ul: 태그 요소의 자식(li) 중에서 .tamato: class가 tomato인 요소 ul>.tomato { } 과일 물건 토마토 후위(하위) 선택자(Descendant Combinator) 특정 태그의 후손(하위) 요소의 태그를 선택 ( 띄어쓰기 ) (후손(하위) : 특정..

선택자 전체 선택자(Universal Selector) (요소 내부의) 모든 요소를 선택 * { } 태그 선택자(Type Selector) 특정 태그( )전체의 요소를 선택 li { } 과일 물건 클래스 선택자(Class Selector) HTML class 속성의 값이 특정 태그인 요소 선택 ( .class ) (class 속성은 동일한 값으로 여러 군데 다 사용 가능) .fruit { } 과일 물건 아이디 선택자(ID Selector) HTML id 속성의 값이 특정 태그인 요소 선택 ( #id ) (id 속성은 고유한 속성입니다.) #fruit { } 과일 물건

초기화 이유 - 각각의 브라우저에서 동일하게 만들기 위해 초기화 사용해야 합니다. body { margin: 0; padding: 0; } 순서 1. reset.css cdn 검색 2. https://www.jsdelivr.com/package/npm/reset-css 에서 빨간 동그라미 부분눌러서 html로 다운 3. 초기화 부분이 붙여넣기 한 부분입니다.