-
HTML 기본 구조 심화 학습코딩으로 웹디자인/HTML 2024. 3. 6. 12:47
HTML 기본 구조 심화 학습 개요
HTML 파일 만들고 기본 구조 작성하는 과정까지의 내용을 최대한 자세히 담았습니다. HTML 문서 작성을 처음 시도한다면 이 글이 분명히 도움 될 것이라 자부합니다.
이 내용은 2016년부터 누적된 오프라인 강의를 통해 정리된 내용입니다. 그리고 그 오프라인 강의 중 어김없이 항상 만족도가 가장 높았던 강의 내용입니다. 어떤 부분이 만족스러웠는지 수강생들과 대화를 나누어보면 돌아오는 답은 거의 비슷했습니다. 그 내용을 한마디로 표현하자면 '알고 있다고 생각했었는데 사실은 알고 있는게 아니었다.'였습니다.
전문 지식을 다루는 만큼 용어 정리부터 시작합니다. 용어 정리만 잘 되어도 버거웠던 마음이 조금이나마 가벼워지고 자신감이 생깁니다. 전문 지식인만큼 결코 쉬운 내용은 아닙니다. 하지만 자신감을 가지고 차분히 학습해 나아가면 어느 날 꽤 많이 성장한 날을 만나게 될 것입니다.
0. 목차 안내
- 바탕 화면에 주제 폴더 만들기
- 폴더명 영어로 변경하기
- 주제 폴더 안에 images 폴더 만들기
- 주제 폴더 안에 index.html 파일 만들기
- index의 의미
- 기본 구조 코드 작성하기
- DOCTYPE 의미
- html의 의미
- <head>의 역할
- <title>의 역할
- <body>의 역할
1. 바탕 화면에 주제 폴더 만들기
1.1. 바탕 화면에 새 폴더를 만든다.
2. 폴더명 영어로 변경하기
2.1. 웹 페이지의 주제에 맞게 영어로 폴더명을 변경한다.
2.2. 예를 들어 웹 페이지의 주요 내용이 고양이면 ‘cats’, 꽃이면 ‘flowers’ 등으로 변경한다.
2.3. 영어는 소문자로 통일한다.
2.4. 띄어쓰기는 가급적 사용하지 않는다.
2.5. 띄어쓰기가 꼭 필요한 경우 ‘_’[underscore]를 이용한다.+ 폴더명을 페이지 주제로 작명하는 이유
예를 들어 도메인이 www.url/foldername 일 때 웹 주소에서 페이지 주제를 직관적으로 명시할 수 있다.
+ 폴더명을 영어로 변경하는 이유
모든 웹 서비스는 우리가 작성한 파일을 서버에 업로드해서 운영된다. 그리고 대부분의 서버는 영어 친화적이다. 그래서 가능하면 모든 파일명은 영어로 작성하는 것이 안전하다. 한글 지원이 되는 서버도 꽤 있지만 언어의 직관성은 한글 보다 영어가 훨씬 뛰어나다.
+ 띄어쓰기 대신 ‘_’[underscore]를 권장하는 이유
공백이나 한글 문자가 포함되었을 경우 웹 주소가 인코딩 처리 되면서 가독성이 떨어지게 된다. 한 마디로 웹 주소를 직관적으로 한눈에 알아보기 어렵다.
+ Encoding
사람이 사용하는 문자를 컴퓨터가 해석하기 좋게 변환하는 방식
예시) www.url%2F%ED%8F%B4%EB%8D%94%20%EC%9D%B4%EB%A6%84
+ Decoding
Encoding된 문자를 사람이 인식하기 좋게 변환하는 방식
예시) www.url/폴더 이름
이렇게 암호화 처리되는 것을 URL 인코딩이라고 정의한다. URL 인코딩은 쉽게 말해서 웹 주소에 들어가는 문자를 서버가 이해할 수 있는 표준 형식으로 변환하는 것이다. 이를 통해 웹 브라우저는 안전하게 URL을 해석하고 전송할 수 있다.
+ URL / Uniform Resource Locator
웹 문서의 각종 서비스를 제공하는 서버들에 있는 파일의 위치를 표시하는 표준이것은 꼭 폴더명을 작명하는 것에만 국한되는 이야기가 아니다. 웹 서버에 올려놓고 사용하는 모든 파일명을 작명할 때 염두에 두어야할 내용이다. 파일명만 보고도 무슨 파일인지 바로 알 수 있을 만큼 직관적이면 더할 나위 없이 좋다. 파일을 훑어 보는 시간도 업무에서 결코 무시할 수 없는 시간이기 때문이다. 결과적으로 직관적인 파일명은 작업 시간을 많이 아껴준다. 파일이 많아지면 많아질수록 그것을 더욱 체감하게 된다.
작명에 신경써야하는 중요한 이유가 몇 가지 더 있다. 협업할 때도 파일명은 중요하다. 내가 작업한 파일을 다른 사람이 볼 수도 있고 또는 그 반대의 경우도 있기 때문이다. 그러니 그 누가 보더라도 바로 알아볼 수 있는 직관적인 이름이 좋다.
물론 세상에는 협업을 하지 않는 사람도 있다. 협업을 하지 않고 혼자서 홈페이지를 처음부터 끝까지 만들어내는 사람도 있다. 그렇다고 할지라도 꽤 오랜 시간이 지나서 유지보수 할 일이 생겼을 때는 무엇도 장담할 수 없다. 사람의 기억력은 한계가 있기 때문이다. 시간이 오래 지나서 수정할 일이 생기더라도 파일명이 직관적이면 파일을 훑어보는데 드는 작업 시간을 많이 아낄 수 있다.
그런데 어쩌면 이제 막 시작하는 사람들은 꼭 그렇게까지 신경써야하나 싶은 생각이 들 수도 있다. 내 컴퓨터에서 코딩으로 웹사이트 만들기 연습을 하는 것은 당장 서버에 올릴 것도 아니고 그야말로 그냥 연습이기 때문이다. 그러니 지금 당장 '꼭 그렇게까지 신경써야하나?' 그런 마음이 들 수도 있다. 이해한다. 하지만 이렇게까지 글을 길게 쓰면서 작명이 중요하다고 거듭 강조하는 이유는 딱 하나다. 모든 일은 습관이 중요하다. 무엇이든지 백지 상태에서 처음 배울 때 깃든 습관이 중요하다. 습관은 무의식에 숨어있다가 갑자기 행동으로 이어지기 때문이다.
필자가 퍼블리셔로서 직장 생활할 때 있었던 일이다. 퍼블리싱 작업하고 서버에 업로드 후, 작업 페이지 테스트를 하는데 이미지가 하나도 나오지 않았다. 에러를 확인해 보니 이미지 경로에 문제가 있어 보였다. 그래서 좀 더 자세히 확인해 보니 그제야 무엇이 문제인지 깨달았다. PSD 디자인 파일에서 이미지를 추출할 때 최소 몇 십 개에서 몇 백개나 되는 이미지를 죄다 한글 이름으로 저장했던 게 문제가 된 것이었다. 무의식에 숨어있던 습관이 행동으로 이어진 상황이었다.
그 문제를 해결하기 위해 한글로 된 파일명을 하나도 빠짐없이 영어로 바꿔야 했다. 파일명을 영어로 바꾸는 것 자체는 그리 어려운 일이 아니다. 하지만 파일 갯수가 많으면 그만큼 작업 시간도 길어진다. 그리고 그 일화는 꽤나 비효율적으로 시간이 낭비된 사례로 기억에 남게 된 것이다. 좋은 습관을 가지고 있으면 실수를 줄일 수 있다. 실수를 줄이면 비효율적으로 낭비되는 시간도 아낄 수 있다.
3. 주제 폴더 안에 images 폴더 만들기
3.1. ‘주제 폴더’ 안에 새 폴더를 하나 더 만든다.
3.2. 이번에는 폴더명을 'images'로 저장한다.
3.3. 이미지를 한 곳에 모아두는 용도다.
4. 주제 폴더 안에 index.html 파일 만들기
4.1. 본인이 사용하는 코드 편집기를 연다.
4.2. Ctrl + N[window] / command + N[Mac] 단축키로 새 창을 연다.
4.3. 그리고 바로 Ctrl + S[window] / command + S[Mac] 단축키로 저장부터 한다.
4.4. 파일 저장 위치는 ‘주제 폴더’로 설정한다.
4.5. 파일명은 ‘index.html’로 저장한다.+ .html의 의미
.html은 html 문서를 의미한다. 그리고 이것을 바로 파일 확장자(Filename Extension)라고 한다. 파일 확장자는 파일의 종류를 나타내기 위해 파일 이름 바로 뒤에 붙는 문자열을 의미한다. 보통 파일명 뒤에 마침표(.)를 찍고 그 뒤에 알파벳 3자를 붙이는 형식이다. 그리하여 '파일명.OOO' 형식으로 나타낸다.
아래는 우리가 조금 익숙할 수도 있는 파일 확장자를 몇 가지 나열해 보았다.
.jpg, .png, .gif 등은 이미지 파일을 의미하고 .mp3는 음원 파일, mp4는 영상 파일을 의미한다. 그리고 .xls는 엑셀 파일, .hwp는 한글 파일, .docx는 워드 파일, .pdf는 PDF 파일을 의미한다.
5. index의 의미
5.1. index.html 파일의 "index"는 보통 웹 사이트의 루트 페이지, 즉 기본 페이지를 나타낸다. "index"는 여러 디렉토리에서 해당 디렉터리의 기본 페이지를 가리키는 데 자주 사용된다.
+ index 추가 설명
예를 들어, 사용자가 http://url.com/와 같은 주소로 접속하면 웹 서버는 해당 도메인 루트 디렉토리에서 가장 먼저 "index.html" 파일을 찾는다. 그리고 사용자에게 보여준다. 만약 "index.html" 파일이 없다면 서버는 디렉터리 내의 다른 기본 파일을 찾거나 디렉터리 목록을 보여줄 수 있다. 웹 사이트에 접속 시 자동으로 표시되는 기본 페이지를 설정하고자 할 때 파일명을 "index.html"로 저장하면 된다.
일반적으로 http://url.com/index.html 이런 주소에서 뒤에 index.html은 생략되므로 사용자는 웹브라우저 주소창에 http://url.com/ 이렇게만 입력해도 사이트에 접속이 가능한 것이다.
+ 도메인(Domain)
도메인은 웹 주소를 의미한다. 도메인은 숫자로 된 IP 주소를 사람이 인식하기 좋게 문자열로 변환한 것이다. "www.url.com"과 같은 형식을 가지며 일반적으로 도메인은 특정 웹 사이트를 가리킨다.
+ 도메인과 IP 주소가 헷갈린다면 이렇게 생각해 보자!
휴대폰에는 각 단말기마다 숫자로 된 고유한 주소가 있다. 바로 전화번호다. 우리가 전화번호를 눌러서 전화를 걸면 그 단말기에 연결된다. 그런데 사람은 숫자보다 문자를 더 쉽게 인식한다. 그래서 사람이 인식하기 좋게 문자로 바꾸어서 전화번호를 저장하는 기능이 있는 것이다. 하여 우리는 전화번호에 주로 호칭을 저장하고 전화를 걸거나 받을 때 쉽게 인식할 수 있는 것이다. IP 주소를 전화번호라고 하면 도메인은 우리가 저장한 호칭인 셈이다.
+ IP(Internet Protocol)
인터넷에 연결되어 있는 각 컴퓨터는 숫자로 이루어진 고유 주소를 갖고 있다. 이것을 IP주소라고 한다.
+ 디렉토리(Directory)
디렉터리는 파일을 구조적으로 정리하는 폴더와 같은 개념이다. 루트 디렉토리는 파일 시스템의 최상위 폴더이며, 그 하위에 다양한 디렉터리와 파일이 위치한다.
6. 기본 구조 코드 작성하기
6.1. index.html 파일에 아래와 같은 코드를 작성한다.
<!DOCTYPE html> <html> <head> <title>여기에 웹 페이지의 제목을 작성합니다.</title> </head> <body> <!-- 여기에 웹 페이지의 내용을 작성합니다. --> </body> </html>
7. DOCTYPE 의미
7.1. <!DOCTYPE html>는 일반적으로 DOCTYPE이라고 칭한다. DOCTYPE은 Document Type Definition(DTD)의 약어로, 문서의 버전을 의미한다. <!DOCTYPE html>는 한때
HTML5버전을 의미하는 것으로 통용되기도 했었다. 허나 2011년 이후에는 웹 표준을 개발하고 유지하는 두 단체 W3C(World Wide Web Consortium)와 WHATWG(Web Hypertext Application Technology Working Group)의 합의하에 'HTML Living Standard'로 일원화되었다.
HTML Living Standard는 말 그대로 '살아있는 표준'이라는 뜻이다. 그리고 새로운 기술을 도입할 때마다 실시간으로 갱신된다. 하여 DTD를 표기할 때 숫자를 명시하는 번거로움이 사라졌다. 그래서 HTML Living Standard는 현재 웹 표준을 의미하며 동시에 가장 최신 버전을 의미한다.
DTD는 html 문서 안에서 <html> 요소가 시작되기 전에 가장 먼저 선언해야 한다. 그 이유는 문서의 버전에 따라 웹 브라우저에 표시되는 결과가 다르게 나타날 수 있기 때문이다.
+ DOCTYPE 선언이 누락되면?
DTD 선언이 누락되면 웹 브라우저는 문서를 표준 모드(standards mode)가 아닌 호환 모드(quirks mode)로 렌더링 한다. 표준 모드는 현재 웹 표준에 따라 렌더링 되는 반면, 호환 모드는 이전 브라우저와의 호환성을 유지하면서 렌더링 된다. DTD 선언이 누락되면 브라우저는 문서를 올바르게 이해하지 못할 수 있고, 레이아웃 및 스타일링에 문제가 발생할 수 있다. 그러니 DTD 선언이 누락되지 않도록 항상 염두에 두어야 한다.
+ 렌더링 - 웹 페이지의 렌더링은 브라우저가 HTML, CSS, JavaScript 등을 해석하여 화면에 웹 페이지를 그리는 과정을 의미한다. 이미지, 텍스트, 그래픽 등을 포함하여 웹 페이지의 모든 요소가 화면에 표시되도록 하는 것이다.
+ 웹 표준이 필요한 이유?
웹 표준이란 쉽게 말해서 웹 사이트를 만들 때 지켜야 하는 규칙이다. 웹 표준을 따르면 다양한 브라우저와 기기에서 일관된 사용자 경험을 제공할 수 있다.
조금 더 풀어서 설명하자면, 세상에는 다양한 운영체제와 웹 브라우저가 존재한다. 그런데 웹 표준과 같은 기준이 되는 지침서가 없다면 매우 혼란스러운 일이 발생하게 될 것이다. 각 운영체제 또는 웹 브라우저마다 렌더링 하는 방식이 모두 달라질 것이기 때문이다. 그러면 똑같은 웹 사이트를 접속하더라도 어떤 운영체제에서 어떤 브라우저를 사용했느냐에 따라 모두 다르게 보일 것이다. 따라야 할 기준이 없기 때문에 생기는 최악의 상황이 될 것이다. 그리고 그런 혼란은 웹 사이트를 사용하는 사용자가 고스란히 겪게 될 것이며 최악의 사용자 경험을 제공하게 될 것이다.
8. html의 의미
HTML (Hypertext Markup Language)은 웹 페이지를 생성하고 내용을 구조화하기 위해 사용하는 언어이다.
8.1. Hypertext는 서로 연결된 문자 데이터 파일을 의미한다. 쉽게 말해 클릭하면 다른 페이지로 넘어가는 ‘링크’ 기능이다. Hyper의 의미를 찾아보면 여러 가지 뜻 중에 '초월한'이란 의미가 있다. 의미를 찾아보고 나서 바로 떠오른 생각은 '텍스트를 초월한 게 뭘까?'였다.
그러다 문득 직감적으로 '링크'를 의미한다는 것을 깨달았다. '링크'는 텍스트나 이미지를 클릭하면 다른 페이지로 이동하거나 또는 특정한 동작을 수행할 수 있기 때문이다. 이러한 기능이 바로 '텍스트를 초월한 것'이라고 직감적으로 알 수 있었다.
'링크'는 웹 생태계를 이루는 근본이나 마찬가지다. 인터넷상의 정보는 광활한 우주에 흩뿌려진 별들과 같다. 수없이 많은 문서들이 제각각 존재하지만 ‘링크’를 통해 원할 땐 언제든지 문서와 문서를 연결할 수 있다. 사용자는 그 ‘링크’를 통해 문서와 문서 사이를 쉽게 넘나들 수 있다.
책에서 목차를 보고 쪽수를 찾아 원하는 위치로 이동하는 것은 마치 이정표를 보고 길을 걸어가는 것과 같다. 하지만 ‘링크’는 차원이 다르다. '링크'는 길을 걸어가는 느낌이 전혀 아니다. ‘링크’는 사용자에게 ‘순간이동’과 같다.
자주 들어가는 웹 사이트에서 처음부터 끝까지 웹 페이지를 정독하는 사람은 아마 거의 없을 것이다. 원하는 내용이 첫 페이지에 있으면 클릭해서 바로 그 페이지로 이동한다. 그게 아니라면 검색을 통해 원하는 내용을 빠르게 탐색할 수도 있다. 검색했을 때 관련 게시물만 모아서 보여주는 것도 역시 '링크' 기능이 있기 때문에 가능한 일이다.
'링크'는 검색 엔진이 웹 페이지를 색인하고 이해하는 데 중요한 역할을 한다. 링크를 통해 웹 페이지들이 서로 연결되어 있기 때문에 검색 엔진은 이를 통해 사용자의 검색 쿼리에 적합한 정보를 찾아낼 수 있다. '링크'는 웹에서의 상호 연결성과 정보의 공유를 위해 꼭 필요한 기능이다. 따라서 '링크'는 웹 생태계를 이루는 근본이나 마찬가지다.
+ 색인(Index)
- 본문 중에 중요한 것을 뽑아 한 곳에 모아 간략하게 구분한 목록 형태
색인은 검색 엔진에서 사용되는 내부 구조로, 사용자의 검색어와 관련된 페이지의 위치를 빠르게 찾기 위한 참조 목록이다. 따라서 각 검색 엔진마다 색인의 형태와 동작 방식은 다를 수 있다.
+ 쿼리(Query)
- 정보를 요청하거나 검색하는 데 사용되는 질문이나 명령쉽게 말하면, 우리가 검색 엔진에서 검색할 때 입력하는 단어나 문장을 "쿼리(queries)"라고 할 수 있다. 사용자가 검색 엔진의 검색 창에 관심 있는 정보를 포함한 단어나 문장을 입력하면, 검색 엔진은 해당 쿼리에 맞는 결과를 찾아서 사용자에게 제시한다. 검색 쿼리를 통해 사용자는 웹상의 정보를 효과적으로 찾아볼 수 있다.
8.2. Markup은 문서의 활자·조판 지정 표시 등의 의미가 있다. Markup은 일종의 언어이며 웹 문서를 작성하기 위한 규칙이다. 이 규칙은 3 가지 중요한 역할이 있다.- 문서 구조 정의
첫 번째는 웹 페이지의 구조화이다. 예를 들어, 제목, 단락, 목록, 이미지, 링크, 표 등을 어떻게 표현할지 정의한다. - 의미 부여
두 번째는 각 요소마다 의미가 있다. 예를 들어, 'h1' 요소는 제목을, 'p' 요소는 단락을 의미한다. 이러한 의미 부여는 검색 엔진이나 스크린 리더 등이 문서를 이해하고 해석할 때 도움이 된다. - 일관성
세 번째는 일관된 사용자 경험을 제공한다. 마크업 언어는 다양한 플랫폼과 브라우저에서 일관된 서비스를 보장하기 위한 역할도 한다. 웹 브라우저는 HTML을 통해 웹 페이지를 렌더링 한다. 그리고 일관성 있는 마크업은 웹 페이지의 시각적 서비스를 일관성 있게 제공하는 중요한 역할을 한다.
+ 마크업(Markup), 웹 문서를 작성하기 위한 규칙이 필요한 이유?
사람은 웹 문서를 보았을 때 어떤 게 제목인지, 어떤 게 이미지인지, 어떤 게 단락인지 직관적으로 알 수 있다. 하지만 컴퓨터에 있는 웹 브라우저는 사람이 웹 문서를 보고 해석하는 것처럼 직관적으로 해석하지 못한다. 그렇기 때문에 친절하게 하나하나 알려주는 역할이 필요하다. 우리가 컴퓨터로부터 원하는 그림을 얻기 위해서는, 인간과 기계 사이에 정확하게 소통할 수 있는 신호와 기준이 필요하다.
이것은 ‘웹 표준이 필요한 이유’와 같은 맥락이다. 규칙이 중요한 이유는 작업 방식의 기준을 따름으로써 일관성 있는 서비스를 제공하는데 중요한 역할을 하기 때문이다. 웹 개발에서 일관성, 효율성, 호환성, 검색 엔진 최적화 등을 통해 더 나은 사용자 경험을 제공할 수 있다. 그리고 웹 개발할 때 품질 높은 웹 페이지와 애플리케이션을 구축하는 데에도 큰 도움이 된다.
8.3. Language는 말 그대로 언어를 의미한다. 각 나라의 고유한 언어가 있듯이 코딩 세계에도 언어가 존재한다. 필자는 이 코딩 세계의 언어를 2 가지 관점으로 본다. 하나는 프로그래밍 언어로서 인식한다. 그리고 나머지 하나는 컴퓨터와 사람이 소통하는 언어로서 인식한다.
프로그래밍 언어는 개발자가 컴퓨터에게 명령을 내리고 원하는 것을 컴퓨터로부터 다시 전달받는 데 사용되는 도구다. 각 언어는 특정 문법과 규칙을 가진다. 개발자가 컴퓨터에게 명령을 내리기 위해서는 언어의 문법과 규칙을 먼저 알아야 한다. 우리가 미국 사람과 영어로 대화하고 싶다면 우리가 영어 공부를 먼저 해야 하는 것과 같다.
+ HTML, 누가 만들었을까?
영국의 컴퓨터 과학자 팀 버너스리(Timothy John Berners-Lee)가 www을 고안하면서 웹의 생태계가 시작되었다.팀 버너스리 인물 정보에 대한 자세한 내용은 아래와 같이 링크 추가로 대체한다.
팀 버너스리 - 나무위키
이 사람의 이름을 제대로 쓰면 "Sir Timothy John Berners-Lee OM KBE FRS FREng FRSA FBCS" 가 된다.
namu.wiki
9. <head>의 역할
9.1. HTML에서 head의 역할은 보이지 않는 곳에서 맡은 일에 최선을 다하고 있는 우리 뇌와 같다. 중요한 일을 처리하고 있지만 시각적으로 크게 눈에 띄지 않는 일을 도맡고 있다.
10. <title>의 역할
10.1. <title>의 역할은 웹 문서의 제목을 의미한다. 도서관이나 서점에서 책을 고른다고 생각해 보자. 우리가 가장 먼저 보게 되는 것은 바로 책의 제목이다. 우리는 보통 그 수많은 책 중에 내가 찾는 정보가 들어있을 것 같은 책을 골라서 목차를 살펴본다. 검색 엔진이 웹문서를 탐색하는 과정도 사람이 책을 고르는 방식과 거의 흡사하다. 그러니 웹 문서의 제목은 웹 페이지의 목적이나 주제가 명확히 드러날수록 좋다. 그리고 이 웹 문서 제목은 웹 브라우저 상단탭에 제목이 표시된다. 그러니 탭 안에 쏙 들어갈 만큼 짧은 길이의 제목이 이상적이다.
11. <body>의 역할
11.1. HTML에서 body의 역할은 첫인상과 같다. 우리가 누군가를 만났을 때 머리끝부터 발끝까지 우리 눈에 들어오는 그 사람의 외모와 같다. 사용자에게 시각적으로 서비스되는 부분을 전적으로 담당하고 있다. 그리고 <body> 안에 들어가는 내용물이 우리가 그리는 그림이라면 <body> 자체는 도화지와 같은 역할을 한다.
커피 한 잔으로 후원하기
2016년부터 오프라인에서 입문자를 위한 웹 퍼블리싱 교육을 하고 있습니다. 강의하면서 누적된 지식과 노하우를 온라인으로 공유합니다. 후원은 양질의 콘텐츠를 제작하는 데 아주 큰 힘이 됩니다. 감사합니다.
사이트 모음
최고의 가치는 "실력을 갖추는 것"이다.
가장 이상적인 학습
배운 내용을 자유롭게 가지고 노는 것.
'코딩으로 웹디자인 > HTML' 카테고리의 다른 글
웹 퍼블리싱이란? (7) 2024.12.15 <img>는 왜 닫는 태그가 없을까? (0) 2024.03.15