codepen HTML 태그 – HTML/CSS 자습서 9

codepen HTML 태그

html 을 배우는 가장 빠른 방법은 직접 해보는 것 입니다. html은 이론을 어느 정도 정립해야 다음 단계로 나아갈 수 있는 다른 프로그래밍 언어와는 학습 방식에 차이가 있는데 보통 10분 정도 설명을 들으면 자습을 20-30분 정도 하는 것을 권장합니다.

html이 이론적으로 들을 내용이 없다는 말은 아닙니다. HTML in Not a Programming Language(HTML은 프로그래밍 언어가 아니야) 라는 프로그래머 조크는 고전이지만 그 말은 HTML이 쓸모없거나 더 떨어지는 언어라는 의미는 아닙니다. HTML이 태생적으로 가진 언어로써의 한계에 대한 프로그래밍 커뮤니티의 자조적인 관점으로 이해할 수도 있습니다.

HTML이란 도구는 1980년대의 발상에서 시작했는데 시대가 흘러 웹2.0 에서 3.0으로 진화하는 지금까지도 별로 변화없이 사용하고 있으니 메이저 버전업이 되고는 있지만 좀 갈수록 난해한 언어가 되고 있다는 인상도 있습니다.

코딩을 하기 위해 그런 역사를 다 이해할 필요는 없고 충분한 연습이 필요할 뿐 입니다. 코드팬(codepen)은 html 과 css 그리고 javascript 코드 스니펫을 편리하게 작성하고 테스트할 수 있으며 SNS처럼 공유할 수도 있는 웹사이트입니다. 팔로워 시스템이 있어서 필요한 코드를 참고하기도 좋습니다.

html은 창을 여러개 띄워놓고 작업하는게 번거로운데 코드펜에서는 처음부터 창을 다 띄워주기 때문에 쉽게 할 수 있습니다. 깃허브, 트위터, 페이스북 계정으로도 가입할 수 있습니다. 무료 버전으로도 충분히 쓸만합니다.

아래 사이트에 무료가입 후 바로 사용가능합니다.

CodePen Free Sign Up

가입이 완료되었으면 바로 시작해보겠습니다.

Heading 헤딩 태그

헤딩 태그는 h1~h6까지 여섯개입니다. 헤딩은 보이는 가독성도 있지만 이 문서의 중요도를 의미합니다. SEO 관점에서 검색 엔진에 유리한 것은 h1은 중심 주제를 가진 키워드로 페이지당 하나 h2는 그 아래 서브주제들로 문서를 구성하는게 좋습니다. 사람에 따라 h1은 무조건 문서당 하나여야 한다고 주장하기도 합니다.

기본이지만 의외로 예전에 만들어진 사이트나 블로그의 경우 잘 안지키는 사이트가 많은데 신경 쓰는게 좋습니다. 다만 문서를 구조화한다고 억지로 나머지 태그들을 (h4, h5, h6같은) 사용하려 하지 않아도 됩니다.

See the Pen Untitled by jayonk (@jayonk) on CodePen.

보통 태그는 한쌍을 이룹니다. 시작 태그(opening tag)가 있고 <태그> 종료 태그(closing tag)가 있습니다. </태그> 모든 태그는 html 태그안으로 중첩되는데 계층 구조를 이루고 있습니다. 양파껍질 처럼 안쪽을 위쪽 껍질들이 감싸는 구조인데 CSS 선택자와 DOM 요소를 사용할 때 이 관계를 사용합니다.

p 와 br 태그

p는 paragraph(문단)로 html 문서는 제목의 heading 태그 문단의 p 태그가 기본이라 할 수 있습니다. p 태그의 다음 라인은 space입니다. 글이란 제목과 문단으로 이루어져 있습니다. 제목은 계층관계에 따라 h1부터 h6까지 사용할 수 있는데 깊은 구조의 문서라고 딱히 읽기 좋은 건 아니기 때문에 보통 h3 정도까지 사용해도 충분합니다.

br은 break의 줄임말로 다음 라인으로 Carriage Return 합니다. 닫을 필요가 없는 단독 태그이며 p태그 등 인위적으로 줄바꿈을 해야 하는 상황 등에 사용합니다. html 문서에서 Enter 키로 여러줄을 띄워놓아도 브라우저에 출력될 때는 반영이 안됩니다. 그것은 브라우저가 Carriage Return 을 인식하지 않기 때문입니다. html 파일은 일반 텍스트 파일의 처리 과정과 다르기 때문에 br 등 별도의 태그를 사용합니다.

다만 br을 많이 사용하면 안그래도 복잡한 html 의 가독성이 좋지 않기 때문에 적당히 사용하는게 좋습니다.

See the Pen basic html 2 – p and br tags by jayonk (@jayonk) on CodePen.

font 적용 – CSS

CSS로 html 파일을 꾸며줄 수 있습니다.

처음 html 을 배우면 CSS의 역할이 무엇인가 궁금합니다. html 파일에서 중요한 정보를 다 전달했는데 왜 또 CSS가 필요한가? 한번 쯤 의문을 가질 수 있는데요. 모질라 유튜브 영상인 mdn demystified css에서는 CSS를 메이크업에 비유하기도 했습니다. 현대의 웹에서 메이크업은 대단히 중요합니다.(사람들이 메이크업을 중요시하는 것 이상으로)

어떻게 보면 메이크업에 따라 회사의 신뢰도나 인기가 달라질 수도 있다 – 메이크업 스타일링에 따라 인기가 달라지는 연예인과도 비슷합니다. CSS의 뜻은 cascading style sheets 으로 케스케이딩은 부모 요소로 부터 스타일을 상속받는 규칙입니다. 즉 html에 스타일을 적용하는데 여러개의 스타일을 동시에 적용받는 복합적인 메이크업 기술이라고 할 수 있습니다.

html 문서만 따로 떼어놓고 보면 천편일률적이라 개성이 없습니다. 그러나 CSS 적용에 따라 전혀 다른 웹사이트 혹은 UI를 창조할 수 있습니다. 사람에 대한 비유가 제일 쉽기 때문에 메이크업의 예시가 이해가 빠를텐데요. 연예인들이 (남녀노소를 가리지 않고) 어떤 메이크업을 하고 무대에 나가냐 어떤 스타일링을 하느냐에 따라 분위기가 완전히 새롭게 변하는 것과 같습니다. 유명 연예인은 머리에 염색만 해도 화제가 됩니다. CSS도 비슷합니다. 사람들은 보이는 것에 대해서 가장 많이 반응합니다. CSS가 없다면 아무리 좋은 내용을 담은 HTML 문서도 좀 뭐랄까 호응이 적다고 할까요.

다만 지나친 CSS는 페이지 로드 속도나 트래픽 등의 문제가 있습니다. 한국은 인터넷이 빨라서 잘 못느끼지만 예를 들어 인터넷이 아주 느린 나라에서는 일부러 CSS를 기본만 적용해서 최소화하고 최대한 텍스트로 문서를 만드는 경우도 있습니다. 정부기관 등에서 이를 중요시 하는데요. 아무리 사이트가 아름답게 보여도 페이지 로딩이 길어지면 사람들은 좋아하지 않습니다. 온라인 민원을 넣으려고 정부 사이트에 접속했는데 오래 걸리면 짜증나는 원리입니다. 그건 온라인이나 오프라인이나 마찬가지이죠.

아래 코드는 CSS 로 font-family (폰트 종류)를 적용합니다. CSS로 html을 꾸미는 방법에는 수만가지가 있는데 그 중에 첫번째는 font 변경일 겁니다. 사람들은 웹에서 대부분 시간 글자를 읽기 때문에 글자의 변화만으로도 벌써 차이가 큽니다. 주의할 점은 웹은 클라이언트의 폰트를 사용합니다. 인터넷을 사용하는 컴퓨터에 폰트가 없으면 다운로드 받게할 수도 있는데 페이지 로드 시간을 높이는 주범입니다.

See the Pen basic html 3 – apply font by jayonk (@jayonk) on CodePen.

한글에는 매우 아름다운 폰트가 많습니다. 글자 조합이 1만개가 넘기 때문에 다채롭기도 한데요. 다운로드 받아야 할 때는 용량의 부담으로 작용하기도 합니다. 영어는 알파벳 대소문자를 합쳐서 52개 밖에 안되니까 훨씬 부담이 적습니다. 즉 웹폰트의 사용이 활발합니다. 하지만 한글같이 무거운 언어는 가급적 이 부담을 줄이는 쪽으로 CSS를 설계해야 타당합니다. 웹페이지의 용량이 50K 인데 이를 위해 4메가 짜리 폰트를 다운로드 받는 것은 조금 생각해 볼 문제입니다. 물론 웹폰트를 캐시로 재사용하는 방법도 있습니다만 재방문률이 낮은 사이트라면 트래픽과 실효성을 따져봐야 합니다.

요약

html을 시작하는데 다소 많은 내용을 이야기한 것 같습니다. html 을 잘하는 방법은 이론은 조금 듣고 연습을 많이 하는 것 입니다. 뭐든 좋으니까 만들어 보는 것 입니다.

코드팬(codepen)은 나만의 펜(pen)을 만들고 저장할 수 있으므로 초보자에게도 충분한 동기부여가 됩니다. 한번 작성해서 저장해 놓은 코드들은 오랜 시간이 지나서 봐도 분명히 남는게 있습니다. 좀 기억이 가물가물하더라도 다시 하면 또 기억이 납니다. 더 좋은 방법은 나만의 프로젝트를 연달아서 만드는 것 입니다. HTML/CSS 웹개발은 개인 프로젝트를 하기에 가장 좋은 환경입니다. 그것이 토이 프로젝트로 작게 시작하건 큰 뜻을 품고 장기 프로젝트로 계획하건 상관없이 좋습니다. 요즘 같이 발달한 시대에도 열정만 있다면 시작 할 수 있는 일입니다.

*여담으로 이 블로그에서는 html 과 웹을 거의 다루지 않았는데 원래 사이트의 취지가 웹 프로그래밍 보다는 일반 응용 프로그래밍과 컴퓨터 시스템 쪽에 좀 더 원리적으로 접근을 해보자는 이유였습니다.

좀 심오한 내용, 즉 잘 이해하기 어렵고 아직도 이해가 안되는 프로그래밍의 원리에 대해서 나름의 방식으로 기술해 보자는 아이디어 였습니다. 일반 프로그래밍에 대해서 포스팅을 하다 보면 어떤 때는 언어의 이름만 다를 뿐 같은 내용을 반복해서 설명하는 느낌이 드는데요. 결국은 같은 일을 하는 CPU와 OS를 어떻게 사용하느냐의 차이지 언어들은 공통 본질이 있습니다. 반면 웹은 좀 다른 세상인데요. 짧은 시간동안 많은 역사가 일어났고 현재 진행형입니다.

웹의 역사는 짧지만(전통의 C계열 언어에 비해 상대적으로) 이제는 상당히 심오한 세계가 있는 것 같습니다. 앞으로는 웹에 대한 포스팅도 조금씩 늘릴 생각입니다.

참고링크

w3school css tutorial

Leave a Comment