학습한 내용 및 후기
카카오톡 채팅 리스트창을 목업으로 만들어보고, CSS를 적용해보았다.
semantic하게 tag를 작성하는 것, css를 적용하기 알맞게 selector를 지정하는 것, 한눈에 알아볼 수 있을 이름을 정하는 것이 어려웠다.
<link rel="stylesheet" type="text/css" href="css/style.css">link는 css 파일을 불러올 때 주로 사용하고, rel은 relationship을 나타낸다.
img의 alt 속성
Alternative text는 이미지가 보여지지 않을 경우를 대비해서 이미지를 설명할 수 있는 글을 값으로 가진다.
alt를 사용하는 이유
- screen reader가 내용을 읽어줄 수 있다.
- 파일명을 잘못 적거나 path를 잘못 적었을 수 있다.
- 텍스트만 지원되는 브라우저로의 서비스가 가능하다.
- 검색엔진이 활용할 수 있게끔 한다. (검색query가 alt텍스트와 일치할 수 있을 것)
- 사용자가 데이터 통신량과 방해요소를 줄이기 위해 고의적으로 이미지를 꺼 놓았을 수 있다.
Tip
- 검색 엔진은 이미지 파일 이름을 읽고 SEO에 포함시킨다고 한다 그래서 이미지 내용을 알 수 있는 이름을 사용하는 것이 좋다. img835.png.보다는 dinosaur.jpg
- 이미지 크기를 지정해두는 것은 좋은 습관이며 이를 통해, 페이지가 더 빠르고 순조롭게 로딩될 수 있다.
타자속도가 느린편이라서 유용하게 이용할 수 있을 emmet 문서 링크!
https://docs.emmet.io/abbreviations/syntax/
