뉴진스 홈페이지

[dpqlsn]

📄 구현한 내용
뉴진스 홈페이지 클론코딩

🙋🏻 궁금한 점

• 아무리 overflow를 넣어도 이상한 곳에 적용이 됨
• 메인화면의 두 카드들을 슬라이드 하고 싶은데 안됨

🧐 해결한 것

• 현재 시간을 나타내는 js
• 하나의 클래스 안에 카드이미지, 카드텍스트를 넣어 하나로 묶음
• 슬라이드 js 코드를 짬

[oxjadex]

js파일이 없으니까 이 link는 빼도 될 것 같아요!
다른 파일도 마찬가지로 삭제하면 좋을 것 같아용~

[oxjadex]

파일 이름을 다 수정하셨나용? html의 기본 파일은 index.html로 되어 있는 게 보통이라 index.html이 더 좋을 것 같아요~

[oxjadex]

dance.html으로 가게 했는데 지금 dance.html 파일의 형식이 dance로만 되어 있어서 제대로 가지지 않아용
수정하면 좋을 것 같아요~

[junghongseop]

과제하느라 수고하셨습니다. css와 html은 오아린이 코멘트로 추천을 많이해주셔서 저는 js 중심으로 보도록 할게요.
pr에서 궁금해서 물어봤던 것들부터 답해드릴게요.

파일 이름을 더 효율적으로 짓고싶어요

• 파일 이름은 첫파일은 index.html, style.css, app.js로 시작을 하면되요. 그리고 그 이후 파일을 생성하게 되면 페이지가 어떤 페이지인지에 따라 그에 맞는 이름으로 지어주면 좋아요. 그러면 다른 개발자가 확인을 할때 직관적으로 알수있기 때문입니다.

JS 코드를 짤때 많이 어려웠어요

• 이거는 아직 js 문법이 익숙하지 않아서 그런거 같아요. js 문법을 공부하고 js 코드를 짜면 웹에서 어떤 방식으로 동작하는지 알게 되면 지금보다 괜찮아 질 거예요

[junghongseop]

코드를 찾아보니 게시물이 두개가 있는데 이게 좌우로 스크롤되어야 하는 형식인데 기능 구현이 안되어 있던데 구현해주세요.

[junghongseop]

 const clock=document.getElementById("clock");

    function getClock(){
        const date = new Date()
        const hour = String(date.getHours()).padStart(2,"0");
        const minutes = String(date.getMinutes()).padStart(2,"0");
        clock.innerText = `${hour}:${minutes}`;
    }

    getClock();
    setInterval(getClock, 1000);

스크립트 안에 있는 코드는 js 파일로 옮기고 이거와 같은 코드는 해당 파일 연결후 함수 호출하는 형식으로 수정하는게 좋을거 같아요

[oxjadex]

코드를 찾아보니 게시물이 두개가 있는데 이게 좌우로 스크롤되어야 하는 형식인데 기능 구현이 안되어 있던데 구현해주세요.

이거를 구현할 때 CSS의 transform 속성 중 translateX라는 게 있는데 이거를 이용해 보면 좋을 것 같아요~
또 event.pageX는 마우스의 커서 위치의 X 좌푯값을 알 수 있어요! 그래서 이 두 가지를 이용해서 마우스가 X 좌표로 얼마나 움직였는지를 translateX 값에 넣는다고 생각하면 구현하는 데에 도움이 될 듯 해요~!