묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)
모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)style.css.trigger { display: none; }했는데 PC에서 계속 햄버거버튼 나와요그래서 hiring 부분에서 모바일css .btn-hiring { right: 10px; bottom: 20px; }수정했는데 피씨도 같이 움직여요 ㅠㅠ
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
x 버튼으로 변경후에 위치 이동에서 자연스러운 애니메이션이 안돼요 ㅠㅠ
강의 너무 재미있고 잘듣구있습니다! 너무너무 알차요~!~!~! 근데 ㅠㅠ 다 되는데 이상하게 하나가.. 안따라지네요.. 햄버거 바 버튼에서 x 버튼으로 자연스러운 이미지 변환은 가능한데요! x버튼이 사이드바를 따라서 스르륵 이동하는게 안되네요 .. ㅠㅠ.. 제가보기엔 소스코드가 같은거같은데 어디가 잘못된건지.. ㅠㅠ 이틀을 .. 계속 강의따라서 다시 코드 타이핑을 해봐도 같아서.. 질문드립니다 ! input[id=trigger]{ display: none; } label[for=trigger]{ border: 1px solid red; width: 30px; height: 20px; display: inline-block; position: absolute; transition: 0.3s; } label[for=trigger] span{ display: block; height: 2px; width: 100%; background-color: black; position:absolute; left: 0; cursor: pointer; transition: 0.3s; z-index: 100; } label[for=trigger] span:nth-child(1){ top: 0; } label[for=trigger] span:nth-child(2){ top: 50%; } label[for=trigger] span:nth-child(3){ top: 100%; } /* display: none; 이지만 label과 같은 이름이기때문에 체크가 된다. */ input[id=trigger]:checked + label span:nth-child(1){ top: 50%; transform: rotate(45deg); } input[id=trigger]:checked + label span:nth-child(2){ opacity: 0; } input[id=trigger]:checked + label span:nth-child(3){ top: 50%; transform: rotate(-45deg); } .sidebar{ width: 250px; height: 100vh; background-color: pink; position: fixed; top:0; left: -250px; transition: 0.3s; } input[id=trigger]:checked ~ .sidebar{ left: 0px; } input[id=trigger]:checked + label{ left: 250px; }