CSS5 CSS 기법들 알면 좋은 것들 일반적으로 footer태그 영역안의 링크들은 nav로 하지않는다. section태그에는 반드시 h1~h6태그들이 포함되어야한다. inline구조엔 패딩의 위쪽이 안먹음(inline-block ㄱㄱ) 공백 대신 이미지 스프라이트 기법 (CSS background-position 속성 이용) background-image를 확대하고 줄여도 가운데 고정시키기 header { background: url(../img/header_bg.jpg) repeat-x center top; } 말풍선(화살표) -추가 li왼쪽에 circle bullet li { position: relative; padding-left: 8px; box-sizing: border-box; } li:before: { cont.. 2022. 3. 16. 유용한 CSS @supports (브라우저의 css 지원여부를 체크) @supports (display: grid) { div { display: grid; } } @supports not (display: grid) { div { display: flex; } } scrollsnap (사용자가 터치, 휠 스크롤 조작을 마쳤을 때 오프셋 설정 가능) .parents { scroll-snap-type: y mandatory; } .children { scroll-snap-align: center; } is pseudo selector (쉽고 강력한 선택자를 제공) before header button, nav button, form button { background-color: tomato; } after :is(he.. 2022. 3. 16. CSS 미디어 쿼리 min-width, max-width 차이 min-width: 1000px, 1000px 이상인 경우에 적용 max-width: 1000px, 1000px 이하인 경우에 적용 작성 순서 (모바일 퍼스트) 기본 CSS 작성 (모바일, portrait) 모바일, landscape 태블릿 데스크톱 대형 뷰포트 데스크톱 모바일 퍼스트(min-width) /* Default CSS */ /* Mobile - Portrait */ /* Mobile - Landscape */ @media (min-width: 576px) {} /* Tablet */ @media (min-width: 768px) {} /* Desktop */ @media (min-width: 992px) {} /* Desktop (Large) */ .. 2022. 3. 16. CSS rem, em em은 상위 요소의 폰트 사이즈가 기준이 됩니다. .parent { font-size: 42px; } .children { font-size : 1em; // 42px } rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환됩니다. html { font-size : 12px; } div { margin: 1rem; // 12px } rem, em 차이 (em은 부모, 부모의 부모가 em을 가졌다면 자식은 곱x곱으로 계산됨) html { font-size : 10px } div.parent { margin: 2em; } rem div.childrenRem { margin : 2rem; // 10px * 2 = 20px } em div.childrenEm { font-size : 2em.. 2022. 3. 16. CSS Flex 부모에게 적용하는 것들 display flex-direction flex-wrap flex-flow (flex-direction + flex-wrap) justify-content align-items // baseline : items의 크기가 다를때 중간으로 맞춰줌, align-items: center와 다름(center는 전체 height에서 중간에 배치 한다는뜻) align-content: item의 줄이 여러 개 일때 사용 space-between center : 모든 라인을 중앙에 배치 자식에게 적용하는 것들 order * 기본 0 * flex-grow : item보다 부모 컨테이너 크기가 커졌을때, item들도 같이 커짐, 크기가 커질때 비율을 정할 수 있음 예) 1 0 0 (참고로 item.. 2022. 3. 16. 이전 1 다음
