OK DDODDO LAB

반응형 웹을 만들기 위한 미디어쿼리 입니다. MediaQuery 최신 Fold 폰까지 나와서 너무 머리가 아프지만 정리를 해보겠습니다. responsive / adaptive * responsive (반응형) 크기만 변함 * adaptive (적응형) 일정 크기에 도달하면 틀이 아예 바뀜 * hybrid (요즘 사용하는 반응형) 이 둘을 합친것 크기 바뀌다가 어느정도 크기점이 되면 틀도 바뀐다. 미디어쿼리 이해 출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS 코드를 분기한다. CSS 코드 내부에서 분기하는 방법 CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 ..

작업자 마다 다르고, 프로젝트 마다 다른 나만의 css reset 입니다. 참고만 하세요. /* Reset */ * { background-repeat: no-repeat; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {-webkit-text-size-adjust: ..

브라우저(익스, 크롬)마다 사이즈며 여백 등이 제각각 (제 맘대로 브라우저 두 개만 맞춤..) HTML (html, header, body 형식은 생략합니다~~) 인쇄영역!! CSS body {margin: 0;padding: 0;} * {box-sizing: border-box;-moz-box-sizing: border-box;} .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 0 auto; background:#eee; } .subpage { border: 2px red solid; background:#fff; height: 257mm; } @page { size: A4; margin: 0; } @media print { html, b..

HTML 뒤로가기 CSS /* Default set */ html, body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, a, button, input, textarea, table, th, td, figure, hr, i, b { margin: 0; padding: 0; font-weight: 400; -webkit-text-size-adjust: none; --font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "애플 SD 산돌고딕 Neo",Roboto, "Noto Sans KR", sans-serif; font-family: "Apple S..

HTLM CSS /* Dot Falling */ .examples {position: relative;background: #fff;width: auto;padding: 5% 10%;border-radius: 16px;} .dot-falling {position: relative;left: -9999px;width: 8px;height: 8px;border-radius: 5px;background-color: #80ccff;color: #80ccff;box-shadow: 9999px 0 0 0 #80ccff;animation: dot-falling 1s infinite linear;animation-delay: 0.1s; } .dot-falling::before, .dot-falling::after {c..