러너효방

#UNIT(CSS의 단위) 1. Absolute length (절대값) 예) px, cm, ... 2. Relative length (상대값) 예) rem, em, %, vh, vw, ... -rem을 기본으로 많이 쓴다 단어 줄바꿈으로 변경 word-break: break-all; relative 부모 element를 기준으로 위치한다 부모 : position: relative [기준점 잡기] position: absolute; [그 안에서 움직이기] translate(x,y) item이 원래 위치를 기준으로 이동한다 transform:translate(25px, 50px) X축을 기점으로 이동 transform:translateX(25px); y축을 기점으로 이동 transform:translateY..

HTML Menu List cate01 cate02 cate03 cate04 cate05 cate05 cate06 cate07 CSS .nav_cat_list{display: flex;} .nav_cat_list h2{font-size:24px; margin-top: -7px; font-weight:bold; color:#333; } .nav_main_list{display: flex;margin: 0 15px 8px 15px;border-top: 2px solid #e2e2e2;border-bottom: 2px solid #e2e2e2;padding: 22px 10px 0;} .nav_main_list li{list-style: none; text-align: center; margin: 0 auto;..

크롬에서 이미지 랜더링 문제가 있어 원본 해상도 보다 확대 또는 축소되는 경우 이미지가 흐려질 수 있습니다. 상위 css에 전체 img를 선언하면 해결됩니다. ※ 공통 css에 선언할 시 문제가 될 수 있습니다. css img{image-rendering: -webkit-optimize-contrast;} Comment ※ 일반 새로고침 F5 ※ 일반 새로고침 + 캐시 초기화 Ctrl + F5 ※ 강력한 새로고침 Ctrl + Shift + R - 맥에서는 오래 클릭해도 반응이 없음, Command + Shift + R 단축키를 눌리면 강력한 새로고침 됩니다.

HTML Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 css .nav_main_list{display: flex; list-style: none; } .nav_main_list li{margin-right: 25px; } .nav_main_list a {text-decoration: none;} Comment ※ 리스트 왼쪽으로 나열 display: inline-flex; ※ li 리스트 점 없애기 list-style: none; ※ a 태그 밑줄 없애기 text-decoration: none; ※ div에 마우스 hover 손가락 아이콘 나타내기 cursor: pointer; Java Script