210624 _ 오늘의 기록
svg에 대한 공부가 필요한 순간이구나
<svg width="320" height="377" viewBox="0 0 320 377" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M320.804 20.3247C317.241 12.3222 311.727 5.33498 304.78 0C296.399 0.418039 289.073 5.89237 286.326 13.8948L263.633 80.2834C261.005 87.9873 250.594 89.1817 246.274 82.2741C241.437 74.5304 232.857 69.932 223.74 70.2107C214.284 70.4894 205.764 75.9637 201.544 84.424L183.708 126.805L141.147 84.2449C133.782 76.8794 123.789 72.7388 113.377 72.7388C107.485 72.7388 101.852 75.0878 97.6711 79.2483C88.9918 87.9276 74.9377 87.9276 66.2784 79.2483L45.0977 58.0676C38.6281 51.598 29.8293 47.9551 20.6723 47.9551C9.14633 47.9551 -1.60324 53.6882 -8.01317 63.2633L-143 254.586L423.164 245.17L320.804 20.3247Z"
fill="#F6E6A4"
/>
</svg><img>를 사용했더니 이미지가 깨져 보여서 <svg>를 처음 사용해봤다. 이미지가 깨지지 않고 개별 path마다 애니메이션을 적용할 수 있고, 원하는 순간마다 커스텀할 수 있다는 장점이 있어서 문서 읽고 좀 더 공부하고 싶다는 생각이 들었다. 공부해서 정리해봐야지!
시맨틱 태그에 대한 고민은 계속된다
내가 지금 작성하는 태그가 페이지에서 무슨 역할을 하는지, 과연 지금 사용하는 태그가 적절한지, div가 아닌 더 적절한 방법이 있을지 계속 고민하고 있다. 아직 감이 잘 안오지만 계속 질문하면서 사용해보려고 한다.
시맨틱 태그 사용할 때 해야할 질문 🤔
페이지에서 무슨 역할을 하지?
머리글인가?
바닥글인가?
정렬된 리스트인가?
아티클인가?