TheStoryBook

https://jhnyang.tistory.com/170 [css] element 또는 요소(div) 가운데 정렬시키는 몇 가지 방법 (position, margin, flex 등등) div table 등등 가운데 정렬시키기~ 이번에는 상황에 따라(?) 요소를 가운데 정렬시키는 법을 정리해보려고 해요. 먼저 화면에 요소를 가운데 정렬시키고 싶을 때! 1. position 속성 사용 [inline-block] 간 jhnyang.tistory.com

https://www.daleseo.com/css-position-fixed-navigation/ [CSS] 메뉴바 상단에 고정 시키기 Engineering Blog by Dale Seo www.daleseo.com 위 사이트 참조

이게 얼마나 쉽냐면 이것저것 HTML5 SLIDE 메뉴랍시며 적용해보다 매번 헛걸음만 하다 이 오픈 소스 한방에 모든게 다 해결되었기 때문이다. 왼쪽에서 오른쪽 또는 그 반대방향 푸시메뉴도 되고 레이어처럼 메뉴가 위로 올라오기도 할 수 있고, 아래에서 위에서 아래로도 되는 매우 강력한 HTML5 SLIDE MENU라 할 수 있겠다. 원본 출처는 다음과 같다. https://tympanus.net/codrops/2013/04/17/slide-and-push-menus/ 데모는 여기서 확인이 가능하다. https://tympanus.net/Blueprints/SlidePushMenus/ 다만 한가지 마음에 안드는건 메뉴가 그냥 쌩 버튼이라 좀 손봐야 한다란 부분이다. 또 어려운 중생들을 위해 수정된 HTML..

html tab1 tab2 tab3 tab4 tab5 tab6 tab6 tab7 tab8 tab9 tab10 css *{margin:0; padding:0;} ul{list-style:none;} a{text-decoration:none; color:inherit;} .box{max-width:960px; width:100%; height:800px; border:1px solid #ccc; margin:0 auto; } #tab ul{white-space:nowrap; overflow-x: auto; text-align:center scrollbar-width: none; -ms-overflow-style: none; } ul::-webkit-scrollbar {display: none;}} #tab ..

아마 모바일 브라우저의 선명도가 달라서 그럴겁니다. (특히 아이폰에서 위와같은 상황이 빈번하죠) 노출되는 사이즈의 2배크기로 이미지 원본을 준비하세요 ex ) 모바일에서 50px 노출 -> 이미지는 100px로 준비 100px 이미지를 참고로 네이버도 제가 리플단 방식으로 사용하고 있습니다. http://m.naver.com 실제 이미지는 400 * 96 픽셀인데 200*48 픽셀로 html 에서 뿌려주고 있습니다. 모바일 기기마다 크기가 다 다르니 큰이미지를 준비하신뒤에 style="max-width:100px; width:100%; height:auto;" 최대크기를 잡아주시고 넓이는 100%로 높이는 넓이에 맞게 알아서 조절되도록 처리하면 됩니다