내일배움캠프 2일차, 미니 팀프로젝트 진행
第2天
사실 썼던 거 지우고 지금 다시 쓰고 있는데 두번째 날 뭐했는지 정확히 기억 안남. 근데 아마 css랑 모달창이랑 엄청 싸웠던 거 같다. 자꾸 막히는 기능 진행상황에 내 자신이 너무 답답했다.
그러나 아직 2일차고 지금 하고있는 팀프로젝트가 다양하고 화려한 기능을 보려는 것이 아니고 처음으로 협업하는 기회를 주기 위한 것으로 배우지않은 것은 과감히 넘기고 너무 스트레지 받지 말자고 함께 말하던 팀원들 덕분에 걱정이 해소 ,,,, 되진 않았지만 힘을 많이 얻었다. 굿뜨 ...
모달창 구현할 때 참고했던 코드
참고 링크
<script>
function show() {
document.querySelector(".background").className = "background show";
}
function close() {
document.querySelector(".background").className = "background";
}
document.querySelector("#show").addEventListener("click", show);
document.querySelector("#close").addEventListener("click", close);
</script>모달창 css 다 만지고 나고 기능도 잘되어서 복사 붙여넣기해서 나머지에도 다 적용하려고 했는데 (omg omg omg img aomg ㅈㅅ) 모달창 하나에만 적용되었다. 나머지는 카드를 클릭해도 모달창이 뜨지않는 오류가 생겨버림.
근데 지금 생각해보니 당연했다. 일단 코드 문법에 대한 정확한 이해 없이 일단 디자인부터 만지고 c에서 자주했던 버릇처럼 이건 이거랑 연결되니까 이렇게 바꿔주면 이렇게 나오겠지 ? 이런 안일한 생각으로 구현하려고 한 것이다. 그래서 이 때부터 querySelector 메서드에 대해 공부하기 시작했다. 그리고 quertySelectorAll을 알게 되었고 id와 class의 차이도 알게되어서 수정을 해보았지만 이제는 다른 카드를 눌러도 하나의 모달창만 나오는 사태가 발생했다. 그래서 이 코드로는 진행을 하지 않았고 다른 코드로 바꾸었지만 하루동안 배웠던 지식은 정리해봤다.
그리고 이때 느낀 건 기능을 시작하기 전에 확실히 지금 내가 구현하려는 것이 뭔지 정확히 이해하고 좀 더 구조적인 설계가 필요하다는 것이다.
+ 아 그리고 유튜브로 강의 찾아보다가 알게된건데 querySelectorAll로 다중 모달창을 구현한 분이 계시길래 링크를 가져와봤다. 이런 감사한 분이 계시다니 곧 나도 해보고 올려봐야지
참고 영상
1. css
2. quearySelector와 quearySelectorAll의 차이
querySelector() : CSS 선택자에 해당하는 첫번째 요소만 선택하는 메서드
querySelectorAll() : 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드
var a = document.querySelector( '#modal' )id 값이 modal인 (첫번째) 요소를 var a에 가져온다.
var a = document.querySelectorAll( '.modal' )class 값이 modal인 모든 요소를 var a에 가져온다.
3. div와 span / id와 class
1️⃣ 그룹화 요소
div : 블록(block) 요소 - 인라인 요소, 텍스트, 블록 레벨 요소 포함 O
span : 인라인(inline) 요소 - 인라인 요소, 텍스트 포함 O, 블록 레벨 요소 포함 X
2️⃣ 선택자
id 선택자와 class 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것이다. 예를 들어, id와 class를 사용하면 모든 p 태그 요소가 아닌 특정한 p 태그 요소에만 스타일을 적용할 수 있다.
id : 문서 안의 '유일'한 요소에 스타일을 적용
class : 문서 안의 '복수'의 요소에 스타일을 적용
즉,
- 하나의 id는 한 문서에서 한 번만 사용이 가능하나 하나의 class는 한 문서에서 여러 번 사용이 가능
- id의 속성이 class의 속성보다 우선 순위가 높아 해당 요소에 부여된 class 속성에 관계 없이 작동
待办清单
- 다중 모달창 영상 구현해보고 올리기
- css 부분 정리하기
- 코드 예시 넣기
