자바스크립트 질문드립니다. 채택완료
안녕하세요.
https://codepen.io/alvarotrigo/pen/gOmgRzL
를 참고해서
마우스 휠을 돌리면
li 영역을 가로로 돌릴 수 있게 하고 싶은데요
</p>
<p><style></p>
<p>#main {</p>
<p> overflow-x: hidden;
display: flex;</p>
<p>}</p>
<p>li {display: flex; float:left; margin-right:20px}</p>
<p></style></p>
<p> </p>
<p><div id="main"></p>
<p><ul></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p></ul></p>
<p></div></p>
<p> </p>
<p><script></p>
<p>const scrollContainer = document.querySelector("#main");</p>
<p>scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
</script></p>
<p>
이렇게 해보는중인데 도통 반응도 없고
li에 float:left; 도 안되고
codepen 예시 페이지처럼 되질않네요 ㅠ
혹시 알고 계신 고수님들 도움 부탁드립니다.ㅜ ㅜ
감사합니다
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
될리가 있나요...
각 섹션의 너비가 할당되어 있지 않은데..
</p>
<p>section {
min-width: 50vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 4ch;
}</p>
<p>section:nth-child(even) {
background-color: teal;
color: white;
}</p>
<p>
오브젝트 너비부터 정의해보세요.
그리고 코드를 임의로 바꾸지마시고
원본 코드를 우선 그대로 실행하고 이후에 조금씩 수정하는 방향으로 작업해보세요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
sinbi2년 전
코드펜 코드 그대로 사용하시고, h1태그 자리에 이미지 태그 넣으시면 될 듯.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택