|
[Intro] 시작하기 전에 하고 싶은 말을 조금만 했어야 하는데 너무 길지는 않았는지요... 하지만 앞으로 할 이야기들이 더 많이 남아있습니다.
이번에는 HTML 개발 시 주의해야할 개념들에 대해서 이야기 하고자 합니다. 물론 몰라도 페이지를 만드는데에 지장은 없습니다. 하지만 개념을 제대로 이해하고 주의를 기울인다면, 좀 더 깔끔하고 수정하기 쉬운 페이지가 될 것입니다.
HTML 페이지가 깔끔하다는 말은 간결함, 즉, 페이지의 용량과 어느 정도 관련되어 있습니다. 모바일환경에서는 1k도 아쉬워 그 크기조차 줄이려는 노력들을 많이 하는데, 가장 좋은것은, 큰 용량의 페이지를 억지로 줄이는 것 보다 처음 만들때부터 간결하게 만드는 것입니다.
[HTML의 스타일을 해체하자!] HTML 코딩을 할 때 가장 많이 실수 하는 부분이 바로 HTML태그가 가진 원래의 스타일을 이용하려는 것입니다. 좀 더 정확히 이야기하자면, 내가 원하는 스타일이 있기 때문에 그 스타일에 맞는 HTML의 태그를 선택하는 경우를 말합니다. 하지만 HTML의 태그들은 스타일을 위해 쓰여지면 안됩니다.
HTML의 본질은 문서를 표현하기 위해 만들어졌습니다. 문서의 형식을 표준화 하기 위해서 만들어졌기 때문에 각 엘리먼트들은 의미를 가지고 있습니다.
*태그와 엘리먼트 엘리먼트는 의미를 담는 그릇이고, 태그는 그 엘리먼트를 표현하는 마크업입니다. 엘리먼트는 시작태그와 종료태그로 표시할 수 있으며 엘리먼트와 태그는 다른 개념입니다.
예를들면, H1 엘리먼트는 가장 처음에 나오는 제목을 의미하는 엘리먼트입니다. 하지만 두껍고 큰 글씨가 필요해서 H1 태그를 사용해버리고 맙니다. (물론 H1은 너무커서 H4나 H5쯤 써본 경험 한번쯤 있으실 겁니다.)
CSS는 HTML 태그의 스타일을 모두 없애고 흰 도화지 위에 태그들을 내 마음대로 다시 그려넣을 수 있게 도와줍니다.
HTML의 기본 스타일을 해체해야 합니다. 다르게 말하면 HTML의 엘리먼트가 각자 가진 의미를 표현할 수 있는 코딩을 해야합니다. CSS를 통해 하나의 태그는 완전히 다른 스타일을 가질 수 있기 때문에, 더 이상 태그의 기본 스타일은 의미가 없습니다.
[의외로 완벽한 MVC패턴] HTML이 별것 아니라고 이른바 막코딩을 하셨던 분들이라면 주의깊게 보셔야 합니다. HTML과 CSS, 그리고 Javascript가 뭉치면 의외로 완벽한 MVC패턴을 띕니다.
HTML이 Model, CSS가 View, Javascript가 Controller 생각보다 허접하지 않습니다!
HTML의 태그들은 그대로 둔 채 CSS만 변경하여 전혀 색다른 View를 만들어 낼 수 있고, Javascript를 사용하여 HTML을 변경하면 동적으로 변하는 HTML 페이지를 얻을 수 있습니다.
MVC패턴을 가지고 있기 때문에 HTML의 스타일은 전적으로 CSS에게 맡겨야 합니다. 그리고 동적으로 스타일을 변경해야할 일이 있을 때 Javascript가 직접 스타일을 건드리는 것이 아니라 HTML만을 변경하여 미리 만들어진 스타일을 씌우게 만들면 됩니다.
[Outro] HTML과 CSS, Javascript를 자신의 역할에 충실하게 코딩하는 일은 매우 중요합니다. CSS만 잘 사용하더라도 불필요한 스타일의 중복을 없애 HTML 코드의 양을 줄일 수 있습니다. 더 나아가서는 스타일의 재사용도 가능하지요.
HTML태그 안에 스타일을 가지고 있거나 Javascript에서 스타일을 고치게 된다면 나중에 수정할때나 디버그할 때 매우 힘들어 질 수도 있습니다. Javascript 에서 스타일을 수정하는 코드 때문에 CSS를 수정해도 스타일이 왜 안 바뀌는지 찾기 힘들어지는 경우가 있기 때문입니다.
다음부터는 본격적인 개발이야기에 들어갈 예정입니다. 에고... 지루한 글 읽어주셔서 감사합니다. | 
HTML as App #2 - 주의해야 할 것!
들풀
붕어싸만코
