OK DDODDO LAB

작업을 하게되면 top 버튼 구현해 달라고 하는 경우가 많이 있습니다. 모바일 경우는 거의 필수이지 않나 싶은데요? 여러방법이 있을텐데요 내용 참고만 해주시면 되겠습니다. HTML Top CSS div.tbox { margin: auto; width: 500px; height: 2000px; border: 1px solid #bcbcbc; } a.top { /*스크롤해도 위치가 변하지 않도록 만들고, 적당히 위치를 잡은 후 보이지 않게 합니다.*/ position: fixed; left: 50%; bottom: 50px; display: none; } JS $( document ).ready( function() { //스크롤하여 밑으로 내려갔을 때 링크가 보이게 $( window ).scroll( fu..

구글맵 넣기 HTML JS function initialize() { /* http://openapi.map.naver.com/api/geocode.php?key=f32441ebcd3cc9de474f8081df1e54e3&encoding=euc-kr&coord=LatLng&query=서울특별시 서초구 서초동 위의 링크에서 뒤에 주소를 적으면 x,y 값을 구할수 있습니다. */ var Y_point = 37.4850609; // Y 좌표 var X_point = 127.0323093; // X 좌표 var zoomLevel = 17; // 첫 로딩시 보일 지도의 확대 레벨 var markerTitle = "SIR"; // 현재 위치 마커에 마우스를 올렸을때 나타나는 이름 var markerMaxWidth ..

아코디언 메뉴 HTML title 1 sub1 sub1 sub1 title 2 sub2 title 3 sub3 sub3 CSS body {margin:20px auto;padding: 0;font-family:"맑은 고딕";font-size:0.9em;} ul#navi {width: 200px;text-indent: 10px;} ul#navi, ul#navi ul {margin:0;padding:0;list-style:none;} li.group {margin-bottom: 3px;} li.group div.title {height: 35px;line-height: 35px;background:#9ab92e;cursor:pointer;} ul.sub li {margin-bottom: 2px;height:..

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

반응형 웹을 만들기 위한 미디어쿼리 입니다. 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: ..