HTML+CSS 기초 강의 - 5. 텍스트 태그로 기본 HTML 문서 만들기
이제 몇가지 기본 HTML 태그를 사용해 기본 HTML 문서 구조를 만드는 방법을 알아보도록 하겠습니다.
그전에 HTML 문서를 작성하기 위한 2가지 준비를 해야 합니다.
- 텍스트 편집기, 또는 웹에디터 프로그램
본인 취향이나 편의성에 맞춰서 잘 쓰는 에디터를 추천합니다.
과거에는 디자이너를 중심으로 어도비 드림위버를 많이 사용했지만, 이런 웹에디터 프로그램들이 불필요한 추가 코드를 붙이는 경우가 많다보니 HTML 문서가 지저분해져서 추가 작업을 해야 하는 경우가 많았습니다.,
또, 최근의 웹페이지 제작 추세인 반응형 웹, 부트스트랩, 그리고 모바일 웹 환경 등 다양한 환경을 지원하지 못하기 때문에 텍스트 에디터를 기반으로하는 웹에디터가 주로 사용되고 있습니다.
무료로 배포되는 좋은 텍스트 에디터들이 워낙 많아서 어떤걸 써도 무방합니다.
대표적인 웹페이지 제작에 특화된 텍스트 에디터로는 아톰,(ATOM) 서블라임(Sublime), 브라켓(Bracket), 비주얼스튜디오 코드(Visual Studio Code), 노트패드++(Notepad++) 등이 있습니다.
이중에서 하나만 추천하라면 저는 마이크로스프트 비주얼스튜디오 코드(Visual Studio Code)를 추천합니다.
위의 에디터들을 모두 써봤고, 노트패드++과 브라켓은 꽤 오랫동안 사용해봤지만, 비주얼스튜디오 코드가 가장 뛰어납니다.
각 에디터들을 다운로드 받을 수 있는 곳은 다음과 같습니다.
에디터 |
홈페이지/다운로드 |
지원플랫폼 | 특징 |
아톰(ATOM) |
https://atom.io/ 다운로드 https://github.com/atom/atom/releases/tag/v1.32.1 |
윈도우 맥OS | 오픈소스(무료) 원격협업코딩지원 IDE환경지원 깃/깃허브 지원 자동완성지원 HTML, CSS. Javascript, NODE.js에 최적화 기능확장 패키지 지원 |
서블라임 텍스트(Sublime Text) |
https://www.sublimetext.com/ 다운로드 https://www.sublimetext.com/3 |
윈도우 리눅스, 맥OS | 무료사용가능(유료) 기능 확장 플러그인 지원 다중선택, 이동기능등 편집에 최적화된 기능 제공 |
브라켓(Bracket) |
http://brackets.io/ 다운로드 https://github.com/adobe/brackets/releases |
윈도우 리눅스, 맥OS | 오픈소스(무료) 라이브 프리뷰 프리프로세서 지원 확장프로그램 지원 프로그램이 실행/동작이 가벼움 기능 다소 부족 업데이트 느림 |
비주얼스튜디오 코드(VisualStudio Code) |
https://code.visualstudio.com/ 다운로드 https://code.visualstudio.com/download |
윈도우 리눅스, 맥OS | 오픈소스(무료) 코드컴플리션지원 확장프로그램 지원 다양한 언어지원 IDE 환경지원 콘솔환경 지원 |
노트패드++(Notepad++) | https://notepad-plus-plus.org/ 다운로드 https://notepad-plus-plus.org/download/v7.5.9.html | 윈도우 | 무료 강력한 텍스트 편집기능 폴더단위 찾기/바꾸기 지원 자동완성지원 한글UI지원 플러그인으로 기능 확장 구문하일라이팅지원 |
웹디자이너라면 비주얼 환경을 제공하는 구글 웹디자이너 사용이 더 친숙할 수도있겠지만, 현재 웹페이지 제작 환경이 단순 HTML만이 아니라 반응형 웹, 모바일 웹, 프론트엔드 프레임워크, 부트스트랩 같은 다양한 환경을 지원해야 하기 때문에 웹에디터만으로는 부족한 면이 많이 있습니다.
요약하면 코드 소스 보기 상태에서 HTML 및 CSS 직접 코딩 작업이 가능해야 최신의 웹 문서 제작 환경에 맞는 HTML 문서 제작이 가능합니다. 구글 웹디자이너를 사용하더라도 HTML 소스 보기 상태에서 HTML 문서 작업하는 기본 정도는 반드시 할줄 알아야 합니다.
- 웹브라우저
일단 크롬 설치! 윈도우 사용자는 크롬 필수. 맥OS 사용자는 사파리도 사용 가능하지만 크롬을 추천합니다. 크롬은 새롭게 추가되는 HTML5 표준 스펙 및 CSS 에 대한 지원이 가장 빠르기 때문에 새로운 표준 미지원으로 인한 문제를 겪을 가능성이 가장 낮고, 새롭게 추가될 기능들에 대한 테스트를 빠르게 적용시켜 볼 수 있습니다.
나중에 배우겠지만 사파리의 경우 표준으로 완전히 확정되지 않은 일부 고급 CSS 속성들의 경우 사파리 전용 속성을 지정해야 CSS가 적용되어 보이기 때문에 간혹 착오로 인해 HTML 문서에 적용한 CSS 미적용 문제의 원인을 찾는데 시간을 버리게 되는 경우가 생깁니다.
또한 강력한 개발자 도구를 지원하기 때문에 HTML 문서 작성 및 CSS 작성과정에서 발생하는 문제를 빠르게 확인하고 해결할 수 있습니다.
파이어폭스, 마이크로스프트 엣지, 인터넷익스플로러11 등은 호환성 체크를 위해서 최종적으로 확인하는 단계에서만 HTML 문서를 띄워보는 정도로만 사용하면 됩니다.
참고로 2018년 10월 기준 전세계 크롬 브라우저의 점유율은 65% 입니다.
사파리는 3.5% 정도, 마이크로소프트는 IE 와 엣지 모두 합쳐 15%, 모질라 파이어폭스는 10% 내외의 점유율을 나타내고 있습니다.
크롬은 점유율이 계속 늘고 있고, 나머지 브라우저들은 점점 줄어들고 있습니다. 이 추세면 크롬은 70%를 무난히 넘을 것으로 예상됩니다.
구버전 HTML 스펙과의 호환성을 유지하는게 큰 의미가 없어지고 있지만, 우리나라는 아직 IE 구버전들이 액티브액스와 공공기관을 등에 업고 살아 숨쉬는 좀비 브라우저로 살아남아 있습니다.
우리나라는 전세계 추세와는 10~15% 정도의 점유율 차이가 있고, 이 차이는 모두 IE 구버전(IE 9,10,11) 들이 차지합니다.
기본적으로 이 강의는 크롬 웹브라우저를 기본으로 하며, 비주얼스튜디오 코드로 HTML 및 CSS를 직접 작성하는 것을 전제로 진행이 됩니다.
기본 HTML 문서를 간단히 만들어서 저장한 후 웹브라우저에서 확인하는 과정을 진행해보겠습니다.
에디터에서 빈 텍스트 문서를 하나 열어서 index.html 파일 명으로 저장합니다.
파일명은 아무거나 사용해도 무방합니다.
아래 내용을 그대로 입력합니다.
<!DOCTYPE html><html><head> <title>아주 간단한 HTML 문서 예</title></head><body> <h1>문서제목을 요기다 입력</h1> <p>아주 아주 간단한 HTML 문서를 보여주는 예 입니다.</p></body></html>
이 문서에 사용한 태그 종류는 총 6개입니다.
이중 4개(<html>, <head>, <body>,<title>)는 HTML 문서의 구조를 정의하는데 사용하는 태그이며,
2개만(<h1>, <p>)는 내용을 표현하는데 사용하는 태그입니다.
<!DOCTYPE html><html><head> <title></title></head><body></body></html>
이 구조는 HTML 문서를 만들다보면 자주 입력하면서 자연스럽게 외워지게 되겠지만, 아얘 지금 외워놓는 것을 추천합니다.
에디터에 반복해서 입력하다보면 자연스럽게 외워집니다.
HTML 문서에 익숙해지면 아무것도 아닌 태그들이지만, 처음 배우는 입장에서는 혼돈의 카오스일 수 있습니다. 그래서 그냥 일단 HTML5 의 최소 구조라고 생각하고 외우시기 바랍니다.
그리고
<!DOCTYPE html>
은 HTML5 문서임을 표시하는 최상위 표시 태그입니다. 많이들 누락하고, 가끔 빼먹고도 사용합니다만, HTML5 표준에는 반드시 명시하도록 되어 있습니다.
저장한 파일을 크롬을 실행 후 빈 창에 드래그엔드롭으로 떨굽니다.
또는 키보드 단축키 Ctrl+O 를 누르면 열 HTML 파일을 선택하는 대화상자가 표시됩니다.
아무것도 없는 빈 페이지 상태 그대로일 것입니다.
왜냐하면 표시할 내용과 태그를 아무것도 입력하지 않았기 때문입니다.
이제 브라우저 탭에 문서의 제목이 표시되도록 타이틀을 입력해봅니다.
<head>와 </head> 사이에
<head><title>요기에문서제목입력</title></head>
요렇게 타이틀을 입력합니다.
하는김에 문서 내용도 입력합니다.
<body>와 </body> 사이에
<body><p>아주 아주 간단한 HTML 문서를 보여주는 예 입니다.</p></body>
이런식으로 <p>태그를 사용해 내용을 입력합니다.
파일을 저장한 후 조금 전에 index.html 파일을 열었던 크롬 브라우저 탭을 활성화해서 F5 키를 누릅니다.(F5키는 현재 화면을 다시 로딩하는 단축 명령어입니다.)
새로 입력한 내용들이 적용된 것이 확인될 겁니다.
참고로 <p> 태그는 Paragraph(문단)의 첫 철자를 따서 만든 태그입니다.
문단을 표현하는데 사용하는 태그라는 뜻입니다.
모든 HTML 태그는 해당되는 단어를 줄여서 태그로 사용을 하기 때문에 원 단어를 이해하고 태그를 사용하면 조금더 빠르게 태그를 외울 수도 있습니다.
예를 들어 <div> 태그는 Division(영역, 디비전), <a>는 Anchor(앵커, 닻) 과 같은 식으로 영어 단어의 앞 일부를 따서 태그 명칭이 정해졌습니다.