OK DDODDO LAB

반응형 웹 레이아웃, 왜 중요한가?모바일 기기의 폭발적인 증가와 다양한 해상도의 등장으로 인해, 이제 웹사이트는 단순히 "PC 전용" 또는 "모바일 전용"으로 구분할 수 없습니다. 사용자 경험(UX)을 고려한 반응형 웹은 선택이 아닌 필수가 되었고, 구글 애드센스 승인에도 영향을 미치는 중요한 요소입니다. 실제로 Google은 모바일 최적화가 되어 있지 않은 사이트에 대해 낮은 품질 점수를 부여하며, 이는 광고 승인에 직접적인 영향을 줄 수 있습니다.반응형 웹을 만들기 위해서는 다양한 화면 너비를 고려한 HTML 구조와 CSS 미디어쿼리 작성이 필요합니다. 하지만 모든 뷰포트 상황을 코드로 대응하기란 시간과 노력이 많이 드는 작업입니다. 이때 ChatGPT와 같은 AI 도구를 활용하면, 실무 수준의 반응..

스크롤 시 특정 지점에서 요소(element)를 고정 하기위해서는 position: sticky 값을 사용하면 되는데, sticky가 제대로 고정 되지 않을 경우 아래 사항을 확인 하시기 바랍니다. 1. 고정 요소에 top, left 값이 있는지 확인 (가로 스크롤의 경우 bottom, right) 2. 고정 요소 위 부모 요소에 overflow 값이 hidden, scroll 또는 auto로 설정된 경우 부모 요소가 display: flex일 경우, 세로 정렬 align-items: flex-start 값이 필요합니다. 이유는 flex박스의 align-items은 기본 값으로 stretch로 되어 있어 고정 요소가 컨테이너의 전체 높이를 차지하기 때문에 고정 되지 않습니다. 사용예시 .container..

HTML chk1 chk2 chk3 chk4 radio1 radio2 radio3 radio4 CSS input[type="checkbox"], input[type="radio"] { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-appearance: none; -webkit-border-radius: 0; outline: none; } .list-btn { list-style: none; display: flex; flex-wrap: wrap; margin: -0.375rem -0.1875rem; } .list-btn > li { position: re..

checkbox / radio CSS style input[type=checkbox]와 input[type=radio]는 안보이게 하고, label을 이용한 적용 예시 입니다. HTML 체크박스 Event Event1 라디오박스 1 2 파일첨부 첨부 CSS html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul,..