기발자의 개발 노트

이번 장을 마지막으로 HTML 기초 설명을 모두 마무리했다. HTML 언어를 처음 접하는 독자라면 개발 언어치고 의외로 쉽다고 느꼈을 것이다. HTML 언어는 각 태그의 종류와 역할을 아는 것부터 학습이 시작된다. 영어 단어를 공부하는 방식과 비슷해서 입문자 대부분은 다른 개발 언어에 비해 깊이가 낮다고 느낄 수 있다. 필자도 그랬다.

하지만 영어 단어만 가지고 문장을 만들기 어려운 것처럼 HTML 언어를 배울 때도 어느 순간 어려운 지점을 만난다. 웹 표준, 웹 접근성, 크로스 브라우징, 검색 결과 등을 고려하여 HTML 태그를 작성해야 하는데, 이때 체감 난이도가 급격히 상승한다. 이러한 이유 때문에 규모가 큰 개발 회사는 HTML 언어만 다루는 부서와 개발자 부서를 따로 둘 정도이다.

HTML 언어를 다루는 작업을 ‘마크업 작업’이라고 하고, 마크업 작업을 하는 사람을 ‘마크업 개발자’라고 부른다. 회사마다 마크업을 정의하는 범위가 조금씩 다르지만 보통은 HTML 언어에 국한해서 얘기할 만큼 전문 영역이므로 가볍게 생각해서는 곤란하다.

물론 입문 단계에서는 HTML 언어를 배울 때 너무 깊게 고민할 필요가 없다. 입문자라면 HTML 태그 자체를 깊게 학습하기보다는 눈에 보이는 결과물을 빠르게 만드는 편이 더 유용하다. 그래야 강한 동기가 유지되기 때문이다.

이 단계에서 주의 깊게 살펴봐야 할 내용이 있다. 바로 레이아웃 작업에 직접 영향을 미치는 Block 요소와 Inline 요소이다. 내가 원하는 위치에 특정 요소를 배치하고 정렬하는 레이아웃 작업은 생각보다 어렵다. 실제로 웹 사이트를 제작할 때 가장 많이 좌절하는 단계이다. 다른 개발 언어를 공부했던 개발자도 똑같이 겪는 문제이기도 하다.

처음 키즈가오 웹 사이트를 작업했을 때는 Block 요소와 Inline 요소를 전혀 모르는 상태였다. 독학을 했던 터라 물어볼 사람도 없었다. 당시 보던 책이나 동영상 콘텐츠에서도 Block 요소와 Inline 요소가 왜 중요한지 설명해 주지 않았다. 이는 앞에서 간단히 언급했던 CSS 언어의 display 속성의 존재 이유를 이해하는 데도 영향을 미쳤다.

덕분(?)에 키즈가오 웹 사이트를 작업할 때 엄청난 고난을 만났고 직접 몸으로 부딪히며 배울 수 있었다. 수십 번을 수정한 경험 덕분에 이제는 웹 사이트 디자인 시안만 봐도 레이아웃 구조를 어떻게 잡아야 하는지 견적(?)을 낼 수 있게 되었다.

필자와 같은 고난과 시련을 겪고 싶지 않다면 CSS 내용을 보기 전에 Block 요소와 Inline 요소의 성격을 지닌 태그의 종류를 꼭 숙지하기 바란다.