1. 기본 문법 ➡️웹페이지에 CSS 삽입하는 방법 1) style 태그 2) style 속성 Selector : 선택자 Declaration : 선언, 효과 Property : 속성 Value : 값 2. 선택자(Selector)의 기본 .class : 같은 의도에 따라 그룹핑할 때 #id : 중복 x ⭐우선순위⭐ #id > .class> 태그 선택자(element) 3. 박스 모델 1) display 속성의 기본값 2) CSS box model 정리 padding : 콘텐츠와 테두리 사이의 간격 margin: 테두리와 테두리 사이의 간격 width : 콘텐츠의 폭 height : 콘텐츠의 높이 + 개발자도구(F12) - Styles 참고하기 4. 그리드 태그 : block level element 태..
200px의 box에 50px의 padding을 주면, css는 기존 box의 가로를 유지하기 위해 50px만큼 box를 늘린다. 이를 방지하기 위한 방법 box-sizing: border-box; -> box의 크기를 유지한 채 padding을 줄 수 있다.
무언가가 적용되는 걸 원하지 않을 때 사용 ** cascading에 주의할 것. ** "이것을 제외한 나머지에 적용하고 싶다" 이므로, not 쪽에만 써야함.
BEM (Block Element Modifier) 규칙 모든 것이 클래스를 가져야 함. 즉, id와 class로 나눴던 것을 모두 class 로 통일. .btn {} .btn__price {} .btn--orange {} .btn--big {}
1. active - 마우스 클릭할 때 효과 2. hover - 마우스 커서가 대상 위에 있을 때 3. focus - 키보드로 선택되었을 때 4. visited - 링크 - 방문한 후 * focus-within - (within: 이내에, 내부에서) - focused인 자식을 가진 부모 element에 적용됨
1. Pseudo Selectors part.1 -더 세부적으로 element를 선택해줌. div: first-child {}; div: last-child {}; span: nth-child(2n) {}; span: nth-child(3n+1) {};
1. fixed -스크롤 해도 초기에 위치한 위치 그대로 유지된다. ex) 웹사이트 메뉴 ... 2. Relative Absolute position: relative; -element가 처음 위치한 곳을 기준으로 수정하는 것. -top, bottom, left, right,,, position: absolute; -가장 가까운 relative 부모를 기준으로 이동시켜줌.
Flexbox 는 박스를 배열할 때 유용하다. 1. Flexbox part.1 1) 자식 element 에는 어떤 것도 적지 않아야 한다. -부모 element 에만 명시해야 함. -부모 element (ex) body 태그에 display: flex; 라고 적는다.) 2) main axis : 주축 - 수평 - justify-content 은 main axis 에 적용 main axis 가 수평인 이유 flex-direction: row; --> 이것이 디폴트값! 3) cross axis : 교차축 - 수직 -align-items 은 cross axis 에 적용 flex-direction: column; --> 으로 바꾸면 모든 것이 반대로! *vh : viewport height 지표 2. Flexb..
