OK DDODDO LAB

HTML HELLO slide hover CSS /* 버튼 */ .button-box { /* height: 100vh; */ /* display: flex; justify-content: center; align-items: center; */ } .button-box .btn { font-size: 25px; padding: 15px 30px; color: #000; border: 3px solid #000; border-radius: 30px; text-transform: uppercase; letter-spacing: 4px; transition: all 0.4s; } .button-box .btn:focus { outline: none; } .button-box .btn:hover { backg..

스크롤 시 특정 지점에서 요소(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,..

2023년도 IE는 배제하고 작업을 하는 경우가 대부분 이겠지만. 아직까지 IE적용도 요청하는 곳도 있어서 정리해 봅니다. 익스플로러 8이하의 경우 ie8.css파일을 적용한다

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