규리스인 조르바

🎯 양쪽 화살표가 작동시키기 🎯 4개짜리 카드가 존재하는 FINAL 미션에선 화살표가 필요없기 때문에 나타나지 않도록 만들어주자 -> main.js의 반복문이 두번밖에 돌지 않는다. 그래서 첫번째 위치하는 계급미션에서는 화살표가 사라지지만, 아래에 위치한 video-list에서는 사라지지 않는 것이다. => 비동기적 문제일까? slide-prev.parentElement = arrow-container slide-prev.parentElement.parentElement = mission-title-container slide-prev.parentElement.parentElement.nextElementSivbling = video-list function transformNext(event) { co..

프로젝트를 완성시키기 위해 다시 코드를 짜보려고 한다. 먼저 해결하지 못했던 문제들부터 고친 다음, 부수적인 부분을 발전시켜나가야겠다. 문제 1. 튀어나온 글자 집어 넣기 변경 전 CSS .choreo-info{ font-size: 1.4rem; font-weight: bold; display: flex; max-width: 240px; } 변경 후 CSS .choreo-info{ font-size: 1.4rem; font-weight: bold; display: flex; max-width: 240px; white-space: nowrap; overflow: hidden; } 해결방법 white-space 의 속성을 nowrap으로 설정해 줄바꿈을 하지않고, 크루이름 옆에 안무가의 이름이 나올 수 있도..

문제를 해결하지 못해 다음단계로 넘어가지 못하는 중이다. 다음과 같이 '계급 미션'에서는 arrow-container가 제거되어 사라지게 된다. 그러나 위의 사진과 같이 같은 수의 video-card를 가지고 있음에도 불구하고 없어져야 할 arrow-container가 그대로 나타나고 있다.

다음으로 해당 아이콘에 js기능을 추가해주려고 한다. 1. 나열된 카드들이 화면 크기를 넘어갈 경우에만 해당 아이콘 표시 2. 왼쪽으로 카드들이 이동 가능할 경우에는 왼쪽 버튼 활성화, 오른쪽으로 이동 가능할 경우에는 오른쪽 버튼 활성화 let videoList = slidePrevList[i].parentElement.parentElement.nextElementSibling; videoList에 ul태그를 담기 위해 앞서 정의한 slidePrevList로부터 ul 태그가 있는 부분을 가리켜야 한다. slidePrevList.parentElement = 빨간색 박스 slidePrevList.parentElement.parentElement = 파란색 박스 slidePrevList.parentElemen..

기존의 커서모양인 pointer가 아닌 hover상태에서는 grab, active상태에서는 grabbing 형태로 나타나도록 바꿔 주었다. 사진과 같이 위쪽 모양의 화살표 아이콘을 두어 스크롤을 내렸을 때 한번에 맨 위쪽으로 올라갈 수 있도록 하는 아이콘을 만들었다. 아래쪽에 id "backtotop"과 class "show"를 가지는 a태그를 추가 border-radius: 20px; border-radius의 값을 width,height 값의 1/2로 설정하게 되면 원 모양 position: fixed; bottom: 30px; right: 30px; position을 fixed로 설정했기 때문에 bottom과 right가 반드시 필요하고, 이 때 id "backtotop"을 가지는 아이콘은 문서 흐..

시작하기 전, 인프런 강의를 복습하기 위해 지금까지 배운 기술들을 이용해 웹페이지를 하나 만들어보기로 했다. 아직 대단한 기술을 사용할 수 없기에 무언가를 소개하는 페이지를 만들어야겠다고 생각했다. 프론트엔드를 배워보고 싶다고 생각한 가장 큰 이유는 시각적으로 바로 보이는 코드에 대한 호기심도 있었지만, 나만의 무언가를 만들 수 있다는 것이 가장 매력적으로 다가왔다. 내가 좋아하고 관심 있어하는 분야를 표현하는 일이라면 조금 더 설레는 마음으로 공부를 할 수 있을 것 같았다. 그래서 내가 선택한 것은 '스트릿 우먼 파이터'다. '스트릿 우먼 파이터'는 작년 한해 나에게 꽤 큰 영향과 울림을 주었던 예능이다. 예능을 3 회독한 건 이번이 처음일 거다. '스우파'에 나온 무대 영상을 모아놓음으로써 8 크루를..