220723 TIL 또 대충 할거야?

의미 있는 마크업

오늘은 또다시 HTML과 CSS에 대해 배웠다.
html은 이전에 배웠던 내용들과 다르게 어려운 느낌이다.
이전에 한 번 웹페이지 클론 코딩을 해봤기 때문에 html에 대한 내용이 이해가 안 돼서 어렵다기보다는 html에 태그가 엄청 많기 때문에 어떤 태그들을 써야 의미 있게 내용을 전달할 수 있을지에 대한 어려운 느낌이다.

알고 있는 태그는 몇 개 없었기 때문에 공부해야 할 태그가 엄청 많았다.. div, span, a, p 요런 기본적인 것들만 알고 있었다.

 

이 많은 html태그를 이용해 모든 부분에 대하여 이유를 가지고 의미를 밝혀가며 HTML을 작성을 하는 과정이 이전에는 없었다.

즉, 이전 과제로 웹 클론 코딩할 때는 의미 있는 마크업에 대해서 신경을 쓰지 않았다는 이야기다.

왜냐하면 어떤 태그를 쓰든 웹페이지에서 보이는 결과물은 똑같기 때문에 굳이 글의 내용에 따라서 고민하면서 다른 태그를 써야 하나?라는 생각을 했었기 때문에 그냥 편하게 span태그로 도배를 했었다. 

지금 다시 의미 있는 마크업에 대해 다시 공부를 하고 나니까 의미 있는 마크업을 작성하는 게 중요하다는 이유를 알았다.

의미 있는 마크업이 중요한 이유

1. 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. → 검색엔진 최적화(SEO)
2. 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.
3. 의미 없이 끊임없는 div 요소들을 탐색하는 것보다, 의미 있는 코드 블록을 찾는 것이 훨씬 쉽다. 즉 코드의 가독성이 좋아진다

특히 여기서 2번이 가장 기억에 남는다.

웹 페이지를 만들 때 시각 장애를 갖고 계신 분들까지 고려하면서 만들 수 있을지는 몰랐다. 시각 장애를 갖고 있지 않다 보니까 스크린 리더 같은 존재를 알지 못했고, 웹페이지를 볼 수 있다는 사실조차도 몰랐다.

마크업을 사용할 때 의미 있게 작성해야 스크린리더를 통해서 페이지를 탐색할 때 시각장애를 갖고 계신 분들에게 도움이 많이 된다는 걸 알았다.

 

같은 실수를 두려워하되 새로운 실수를 두려워하지 마라.

그리고 css에 대해서도 조금 공부를 했는데 이전에는 몰랐던 사실을 알게 된 게 있다.

css의 display속성에서 block, inline, inline-block에 대해서 공부를 했는데 대충 이전에 알고 있던 사실은

display의 속성을 block으로 설정하면 한 줄을 다 차지해서 다음 요소들은 무조건 줄 바꿈 돼서 나타난다는 것과 

inline으로 설정하면 block과 달리 줄 바꿈이 되지 않고 한 줄에 이어서 나온다는 사실만 알고 있었다.

 

오늘 배운 사실은 block으로 설정했을 때 그 요소는 width와 height를 지정해줄 수 있는데, inline으로 설정했을 때는 지정해줄 수 없다는 사실을 알았다. 그리고 block과 inline의 특징을 섞은 inline-block은 줄 바꿈이 되지 않지만, 크기를 지정해 줄 수 있다는 것을 배웠다. 그래서 div나 p 같은 기본값이 block인 요소들을 한 줄에 배치하고 싶을 때 inline-block으로 설정해주면 된다는 것을 알았다.

 

사실 이전에는 display에서 block, inline 으로 설정할 때 왜 설정하는지도 몰랐고 inline-block은 왜 사용하는지도 몰랐다.

진짜 조금만 검색해도 나오는 내용들인데 저번에 공부할 때는 이것조차 안 했다는 것을 깨달았다. 

얼마나 대충 공부한 건지 감이 바로 잡힌다. 

지금 당장 편하자고 대충 하지 말고 깊이 있게 공부하자 제발.. 대충 공부하면 무조건 안 좋은 결과가 생기는걸 몸소 체험했으니까..

내가 만든 프로그램 내가 사용하지 누가 사용하겠어 - 3

또 대충 공부하는 이전과 같은 실수를 하지 말자.

 

어제의 액션플랜으로 아침에 목표 설정 후 TIL 쓸 때 점검을 하기로 했었다.

오늘 아침에 설정했던 목표는 강의 한번 다 듣고 강의노트 작성 후 개념노트까지 다 작성하는 거였는데

아직 개념노트는 다 작성하지 못했다. 생각했던 것보다 mdn페이지를 볼 수록 볼게 많아서 오늘 안에 다 할 수 있을지가 의문이다.

일단 목표를 좀 수정하자면 지금 css단위에 대해서 공부하고 있는데 최소한 css단위에 대해서 정리는 다 하고 자는 걸로 하자