[🚀 Today I Learn 페이지 만들기] 안톨리니 미션 제출합니다.

[Antoliny0919]

배포 링크

https://antoliny0919.github.io/web-today-i-learn/

생각해보기

HTML

Q. 나만의 갤러리에서 사진 9장은 HTML 태그 중 어떤 요소로 표현하는 것이 좋을까? 이유는?
A. <figuare> + <img> 조합을 사용하면 적절할거 같다. img를 렌더링하기 위해서 사용해야할 img태그와 img태그들을 묶어서 설명해주는 figure를 사용하면 접근성적인 측면에서 더 좋다.

Q. 뼈대 코드를 기반으로 이미지를 로드하는 방식 2가지는 무엇이고, 어떻게 사용했는가?
A. , css background-image
img는 콘텐츠로서의 의미, background-image는 꾸미는걸 목적으로 사용하는 이미지

Q. 시맨틱 태그(header, main, section, footer 등)로 문서를 구분할 때 기준은?
A. 내용의 역할과 의미를 기준으로 나눈다.

Q. img 태그의 [alt]는 왜 필요하며 어떻게 작성하는 것이 좋은가?
A. 이미지가 로드되지 않았을때 대체 텍스트를 제공하여 시각적인 사용자에게 해당 이미지가 어떤 것인지에 대해 파악하게 한다.
스크린리더 사용자의 경우에는 이미지를 볼 수 없기 때문에 alt에 의해 이미지에 대해 파악하게 된다.

Q. 상대 경로와 절대 경로를 혼용하면 어떤 문제가 생기는가?
A. 배포후에는 경로를 못찾을 수 있다.

Q. meta의 viewport와 Open Graph 태그는 각각 어떤 역할인가?
A. 모바일 브라우저에게 화면 너비와 초기 줌 레벨을 알려준다 -> viewport
SNS나 메신저에서 링크를 공유할 때 미리보기 카드가 어떻게 보일지 정의 -> Open Graph

CSS

Q. 갤러리 9장을 배치할 때 Flexbox와 Grid 중 무엇이 더 적합한가? 이유는?
A. grid가 더 적합하다.
flex의 경우에는 1차원적인 레이아웃에 유용하고 현재와 같이 갤러리처럼 3 * 3 레이아웃에는 grid-template-column을 통해 쉽게 해결할 수 있다.

Q. 태그/클래스/ID 선택자는 각각 언제 쓰는가?
A. 태그 는 해당 태그 전체에 공통 스타일을 줄 때, 클래스는 여러 요소에 반복적으로 적용할 스타일에, ID는 페이지에서 단 하나뿐인 요소를 특정할 때 쓴다.

Q. CSS를 HTML에 직접 쓰는 것과 파일 분리의 차이는?
A. 내부에 쓸때는 테스트하기는 편하지만 분리하면 여러 파일에서 CSS를 공유할 수 있다.

JavaScript

Q. getElementById()와 querySelector()의 차이는?
A. ID를 통해 특정 dom을 접근 하려고 할때 , querySelector의 경우에는 CSS 선택자 문법을 통해 더 자유롭게 DOM에 접근 할 수 있다.

Q. 자기소개 페이지에서 이벤트 리스너로 활용 가능한 이벤트는?
A. click, mouseover, mouseout 과 같은 기본적인 이벤트

Q. innerHTML로 DOM 조작 시 주의할 점은?
A. XSS 공격에 주의해야 한다.

배포

Q. GitHub Pages 배포 페이지에서 TIL 작성 데이터는 새로고침/재배포 후 유지되는가?
A. 유지되지 않는다. JavaScript로 추가한 데이터는 브라우저 메모리에만 존재하기 때문에 새로고침하면 초기화된다.

Q. JavaScript로 추가한 데이터를 영구 저장하려면?
A. 클라이언트 측에서 유지하려면 localStorage를 사용할 수 있을거 같다. 영구적으로 저장하려면 백엔드, DB가 필요할거 같다.