사전스터디를 끊내고 드디어 본 스터디가 시작되었다. 첫 날은 거의 어떤 체계로 WeCode의 커리큘럼에 대해서 설명한 뒤 replit을 통해 HTML, CSS을 배우게 되는데 사전 스터디하시고 온 분들한테는 좋은 복습이 될 것 같다.
첫 날은 Google Classroom에<img>태그와 css의background-image속성을 추가하는 것과 무엇이 다른지 설명하여 velog를 적어 제출하는 과제가 있는데 Semantic Web과 Semantic Tag의 개념이 필요하여 간단하게 정리하여 복습할 생각이다.
Semantic Web
웹사이트는 검색엔진에 노출되어야만 사용자에게 보여지게 하기위해 로봇이라는 프로그램으로 웹사이트 정보를 수집하고, 검색 사이트에서 이용자가 이용할만한 키워드를 미리 예상하여 인덱스를 만들 때 여기서 사용되는 정보는 수집한 정보 즉 웹사이트의 HTML 코드이다
그러므로 Semantic Tag를 이용하여 만든 Web을 Semantic Web이라 한다.
Semantic Tag
시맨틱 태그를 만들게 된 계기는 개발자가 의도한 요소가 명확하게 들어가 있으며, 코드의 가독성을 높이고 유지보수를 쉽게한다.
즉 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명한다.
Semactic Tag의 종류
non-semantic
div, span 등으로 태그만 봤을 때 무슨 content가 들어있는지 알 수 없다.
sematic
content의 내용을 태그만 보고 무엇인지 알 수 있다.
- header : body의 위쪽 부분을 의미, content 내용으로는 logo, nav, login 등이 들어갈 수 있다.
- nav : 보통 header안에 태그를 넣고 content 내용으로는 menu, index 등이 있다.
- aside : 옆에 있다는 의미, position: sticky를 사용하여 스크롤을 내려도 볼 수 있게 설정한다.
- section : 문단을 놔눌 때 사용
- article : 문단 안 content 단위
- footer : body의 밑쪽 부분을 의미, 회사의 정보가 들어간다.
form, table, img 등이 있다.
IMG태그 VS background-image
IMG태그를 쓰는 이유
- 사용자가 인쇄할 때 기본적으로 이미지가 포함되어 있고 싶을때
- 이미지가 중요한 시맨틱적인 의미를 가지고 있을 때 alt 속성으로 확실하게 사용자에게 전달할 수 있다. ( ex: logo, diagram )
- background-image 보다 배경 애니메이션 요소를 더 드라마틱한 퍼포먼스를 증가시킬 수 있다.
- 브라우저 크기 조정에 의존하여 텍스트 크기에 비례하여 이미지를 렌더링하는 경우
- 여러 이미지를 겹칠 수 있다.(IE6 이상 가능)
background-image속성을 쓰는 이유
- 이미지가 내용영역이 아닌 경우
img태그와 반대로 사용자가 인쇄할 때 이미지가 포함 되고싶지 않을 때- 다운로드 시간을 계선하기 위해서
- 사진이 일부만 보여주고 싶을 때 사용
- 윈도우 전체를 커버하고 싶을 때
background-size: cover을 사용
