잠깐! 시작하기 전에
이 글은 wecode에서 실제 공부하고(이제 사전 스터디는 아닙니다.), 이해한 내용들을 적는 글입니다. 글의 표현과는 달리 어쩌면 실무와는 전혀 상관이 없는 글일 수 있습니다.
또한 해당 글은 다양한 자료들과 작성자 지식이 합성된 글입니다. 따라서 원문의 포스팅들이 틀린 정보이거나, 해당 개념에 대한 작성자의 이해가 부족할 수 있습니다.
설명하듯 적는게 습관이라 권위자 발톱만큼의 향기가 조금은 날 수 있으나, 엄연히 학생입니다. 따라서 하나의 참고자료로 활용하시길 바랍니다.
글의 내용과 다른 정보나 견해의 차이가 있을 수 있습니다.
이럴 때, 해당 부분을 언급하셔서 제가 더 공부할 수 있는 기회를 제공해주시면 감사할 것 같습니다.
서론
wecode가 시작된지 벌써 하루가 지났습니다.
월요을 어떻게 보냈는지, 무슨 일들이 있었는지 모를만큼 빠르게 시간이 흐르네요.
오늘은 HTML-CSS에 대해 생각해볼까 합니다.
물론 오늘 배웠으니 정리한다는 느낌이 드실 수 있습니다. 정답입니다.
시작해보겠습니다.
Semantic ? Semantic HTML ?
사실 처음 딱 보면 이게 뭔 말인가 싶습니다.
대학교 때 생각이 나면서 당시 논문을 해석할 때, 인공지능 기술에 관련된 얘기인데 의미론적이다? 라는 말이 참 와닿지 않았던 것 같습니다.
그런데 지금은 그것보다는 낫지 않을까, 생각이 듭니다.
우리의 친절한 MDN은 모든 것을 설명해주니 한 번 읽어보도록 합시다.
개인적으로 저는 여태껏 고민해본 적 없는 내용이고, 새로운 접근이라 읽는게 참 즐거웠습니다.
Semantic Tags
예로, 같은 content를 가지는 하나의 HTML element를 나의 web에 추가하는 데에는 다양한 방법이 존재합니다.
div, span, p, 특징은 있지만 세 tag 내의 content가 같고, CSS를 좀 섞어주면 외부에서 바라보기에는 같은 기능을 하는 코드조각이 됩니다.
그럼에도 다양한 상황마다 보다 올바른 방법이 존재하는 이유는 무엇이며, 어째서 해당 방법이 권장되는지 생각해야 합니다.
예시 (img - div & CSS : background-image)
img와 div tag 또한 약간의 CSS 작업을 거치면 뷰포트에서는 동일하게 보일 수 있습니다.
그러나 img tag로 구현한 이미지 파일은 비시각 브라우저를 거칠 경우에도 시각 장애인 또한 해당 이미지가 존재한다는 사실을 알 수 있습니다.
img tag의 alt attributes 를 통해서요.
하지만, div의 경우 해당 속성이 존재하지 않기에 무엇이 있는지 알 수 없게 됩니다.
그것은 결국 우리의 web을 만들 때, 누가 대상인지를 분명히 해야만 하는 과정이 추가될 수 있겠다는 생각이 들었습니다.
알게 모르게 코드 내부에 차별이 존재하는 web이 되는 것은 아닐지 생각 또한 듭니다.
그 외에도, 사용자가 이미지를 원치 않을 때, 불러올 수 없을 때 img는 alt 속성으로 대비할 수 있습니다.
그러나 div의 경우에는 해당 상황에 대비할 수 없죠.
그렇다고 해서 무조건 img tag만이 정답은 아닙니다.
때로는 비율을 유지하지 않으면서, 내가 원하는 크기의 이미지를 보여주고 싶을 때가 있기 때문입니다.
그럴 때는 분명 div과 background-image 조합이 더 옳을지도 모르겠습니다.
img tag의 경우 크기 조절에 관해서는 상당히 까다로운 tag이니까요.
비율을 유지하거나, 가로에 맞추거나, 세로에 맞추거나, 상당히 번거로운 경우가 많습니다.
그럼에도 내가 원하는 크기의 이미지를 외부에 보여줄 수 없는 상황 또한 존재하기도 합니다.
이전에 만들었던 자기소개 페이지에서 그것을 해결하고자 script 내에 함수를 만들었던 기억이 떠올랐습니다.
결론
하나의 tag, 코드를 작성하는 것은 위처럼 분명 상황에 따라, 나(개발자)의 기준에 따라 올바른 방법이 존재합니다.
또한, 이번 공부를 통해 같은 기능을 하는 것으로 보일 수 있는 코드조각이 전체적인 웹의 퀄리티를 떨어뜨리거나, 올릴 수 있다는 사실을 알게 되었습니다.
기존에는 그냥 내 입맛대로 이게 더 끌려! 하는 마음으로 사용을 했던게 조금은 부끄럽습니다.
이번에는 이걸 해봐야지, 저걸 해봐야지, 혹은 이번 페이지는 전부 다 div 으로만 만들어봐야지 와 같은 단순했던 생각들이 조금은 후회되네요.
또한 오늘은 span, p, div의 차이점도 오늘은 분명 일부 알게 되었습니다.
과정에서 줄바꿈에 <br> 만을 이용하던 제가 부끄럽기도 했습니다.
당장 뒤로 미루었던 tag끼리의 차이점도 모르면서 말이죠.
그러니 앞으로는 HTML도 소홀히 하지 않고, 매 태그의 특별한 속성이 무엇인지 구글링해보면서 코드를 작성해야겠습니다.
또한 HTML 뿐 아니라 CSS, JS 모두 마찬가지로 Semantic에 입각하여 작성해야겠다는 생각이 들었습니다.
적고 보니 참회할 일만 많이 있던 것 같아 씁쓸하네요.
다음에는 멋진 글로 돌아오도록 열심히 공부하겠습니다. 감사합니다.
