240501 13일차
💻오늘 배운 것들 요약!
코드카타
팀 프로젝트 발제 및 진행
하루 회고
오늘은 드디어 팀 프로젝트가 발제가 되는 날이었다! 예상한 것과 같은 프로젝트였어서 좀 준비하는 데에 있어서 수월했다. 팀 프로젝트는 기존에 사용한 TMDB API를 심화해서 각 섹션을 담당해 완성시키는 것이었다. 이번에 나는 영화 세부 상세 페이지를 담당했다. 조원님의 엄청난 캐리로 내가 할 분량은 덕분에 엄청 줄어들었다..!!! 최고의 조원님.. 내가 맡은 섹션을 자세히 설명하면 메인 페이지의 영화 목록에서 하나의 영화를 누르면 그 해당 URL의 쿼리 스트링을 받아 해당 API 정보를 불러와서 영화 제목, 포스터, 줄거리 등을 띄우는 담당을 맡았다. 깃허브에 있어서 아직 익숙하지 않기에 버벅이면서 코드를 짜는 것에 있어서 많이 막혔지만, 조원 분들의 도움으로 조금이나마 진행을 할 수 있었다. 지금은 `getElementBy`로 각 태그들을 선택해주는 것까지만 했지만 내일은 좀 더 속도를 붙여 진행하고 싶다..!!
새로 알게된 사실들!
QuerySelector와 getElementByID
(조장님이 알려주신 내용에서 더 검색해서 찾아보았다!)
두 메서드 모두 DOM 요소 하나를 선택해서 반환하는 메서드라는 점에서는 같다.
무슨 차이를 갖고 있을까?
QuerySelector
QuerySelector 는 유연한 메서드이다. ID값 뿐만 아니라 class 등 다양한 선택자를 사용할 수 있다.
getElementByID
getElementByID 는 ID값을 가진 요소에만 접근이 가능한 메서드이다. HTML에서 ID값은 Unique (유일한, 고유한) 한 값이므로 처리 속도가 상대적으로 더 빠르다.
결론
특정 ID값을 가진 요소들에 접근한다면 getElementByID를 쓰는 것이 좋고, 코드의 유연성과 다양한 선택자에 접근을 요구하느 상황에선 QuerySelector를 사용하는 것이 좋다.
HTML에서 요소를 container로 감싸는 이유
(조원 분이 알려주신 내용이다! 이것도 추가로 검색해서 더 찾아보았다!!)
단순하게 통상적으로 이렇게 사용해 와서 사용했다 라고 생각하면서 써왔는데 큰 이유가 있었다.
레이아웃 관리 용이성
-
가운데 정렬
container에 margin: 0 auto; 스타일을 적용하면, 컨테이너가 화면 중앙에 위치하게 됨으로써 이는 페이지 디자인을 깔끔하고 직관적으로 만들어 주는 효과적인 방법이다. -
최대 너비 설정
container에 max-width 속성을 설정함으로써, 브라우저의 크기가 커지더라도 내용이 지나치게 퍼지지 않게 할 수 있다. 이는 사용자 경험을 향상시키고, 모든 화면 크기에서 일관된 레이아웃을 유지하는 데 도움이 된다.
디자인 일관성
- 스타일 적용 용이
container를 사용하면 내부 요소들에 일관된 스타일(예: 패딩, 마진, 배경색)을 쉽게 적용할 수 있다. 이것은 코드의 재사용에 용이하고, 스타일 변경 시 일관성을 유지하는 데 도움이 된다.
등등 여러모로 좋다!!
