HTML의 모든것 1부 - HTML이란 무엇인가
HTML을 프로그래밍 코드라고 말하면, 많은 개발자들이 이상하다고 생각할 것 입니다. 하지만, front-end와 관련된 일을 하다보면, 반드시 알아야 하는 내용이 html이기도 합니다. 본 포스팅에서는 html과 관련해 공부하고 정리한 내용을 적어두려고 합니다. 많은 분들도 좋은 참고자료가 되었으면 합니다.
1. HTML이란 무엇인가
A라는 사람이 Microsoft Word로 어떤 문서를 작성했다고 합시다. 이 A라는 사람이 B라는 사람에게 Word로 작성된 문서를 전달하고 싶은데, 만약 B가 아래아한글 소프트웨어만 사용하는 사람이라면, B는 해당 문서를 열어볼 수 없을 것 입니다. 이는 당연하게도 두개의 software가 형식이 다르기 때문에 발생하는 문제로, 호환성에 문제라고 생각할 수 있습니다.
이러한 문제는 전세계에서 사용하는 web문서에는 더 큰 문제가 됩니다. 그래서, 어떠한 web browser를 이용하더라도 동일하게 내용이 표시될 수 있도록, 서식표준이 필요한데, 이것이 바로 Hyper Text Markup Language (HTML) 이다. 특히 주목할 부분은, ‘Markup’으로, “서식을 표현하기 위해 tag를 사용하여 mark(표시)한다”라고 생각하면 됩니다. 그래서, HTML에 대해 공부한다는 것은 결국 tag에 대해 공부한다는 것을 의미 합니다.
HTML은 Tim Berners-Lee가 1991에 발표한 이래로, 2014년에 발표한 버전5 (HTML5)까지 이어졌습니다. HTML5에서는 많은 기능이 추가되었는데, 단순히 웹문서를 넘어서 게임과 같은 응용소프트웨어, 즉 web application까지도 편리하게 만들 수 있는 운영체제로서의 위상을 가지게 되었습니다.
2. 간단한 웹페이지 만들어 보기
그럼 이제, 간단한 웹페이지를 만들어 보도록하겠습니다. 일단, 아래의 내용을 아무런 text 편집기를 열어서 작성하고, .html파일로 저장합니다.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
</head>
<body>
<h1>Welcome!</h1>
<p>Hi, Thank you so much for visiting my website.</p>
</body>
</html>
원래는 위의 파일을 인터넷상의 web server 컴퓨터에 저장해야 합니다. 그래야 누구든지 위의 파일을 열어서 page에 접근할 수 있습니다. 하지만, 간단히 테스트할때는 그냥 개인 컴퓨터에 저장한 후, web browser로 열어서 확인할 수 있습니다. 아래 그림은 위의 html파일을 web browser를 통해 열어본 모습 입니다.
그림1. 처음 만들어 보는 web page
위의 html문서를 보면 어느정도 형식이 있는 것을 알 수 있습니다. 맨 처음으로나오는 것은 <!DOCTYPE html>으로, 이것은 web browser가 해당 파일이 html문서라는 것을 알려주는 역할을 합니다. 그 다음은 html tag인 <html> </html>이 나옵니다. 해당 tag를 보면, 시작 테그와 end tag로 구성되어 있는데, <html>은 시작 tag </html>는 끝 tag를 의미합니다. html tag로 구성된 내부는 head tag와 body tag로 구성되어 있습니다. head tag내에서는 title tag를 이용하였는데, 이를 이용하면 문서의 제목을 기입할 수 있습니다. title tag를 기입하면, web browser를 열었을때 상단에 뜨는 text를 기입할 수 있습니다. body tag는 web browser상에서 실제로 보이는 부분을 나타냅니다. h1 tag와 p tag는 추후 더 자세히 다루겠지만, 각각 제목과 내용을 의미하는 tag로 생각하면 되겠습니다.
3. Layout(배치) 과 HTML tag에 대응하는 요소들
Web page의 layout은 크게 header, navigation, sidebar, footer 그리고 main content로 구성되며, main contetn내부에는 여러 article들이 존재한다. 상황에 따라 다르지만, 각 영역에는 아래의 요소들이 들어갈 수 있습니다.
- 문자
- 제목
- 본문단락
- 목록
- 표
- 그림
- 오디오
- 비디오
- 하이퍼링크
- 입력양식
- 영역분할
위의 내용 대부분 직관적으로 어떤 내용인지 알수있지만, 입력양식의 경우 어떤 내용인지 알기 어려울 수 있습니다. 입력양식은 사용자가 특정한 정보를 입력할 수 있도록 해놓은 tag라고 입니다. 가령, 네이버에 접속해서 아이디와 비밀번호를 입력하는 부분이 있는데, 그곳을 입력양식에 해당하는 tag로 구성되어 있다고 생각하면 된다. 여하튼, 위의 리스트들 요소들은 전부 tag에 대응되며, 각 요소들을 html tag를 이용하여 불러서 사용할 수 있다.
다음으로는 tag와 관련된 내용을 정리해 보려고 합니다.
HTML 시리즈