웹개발 스터디 : 2화 - HTML 기본상식
HTML 태그의 구조, HTML 기본 문서규격, 헤드와 바디
기본 웹개발 관련 상식을 검증하고, 웹개발 입문자들을 위한 자료용 문서입니다. 추후 부트스트랩과 워드프레스, 자바스크립트 프레임워크 등으로 연결되는 문서가 될 예정입니다.
문서 목록
1화 : https://brunch.co.kr/@clay1987/156
2화 : https://brunch.co.kr/@clay1987/157
프론트엔드 웹개발
HTML 알아보기 (Introduction to HTML)
1. HTML은 기본적으로 데이터를 다루기 위한 언어다.
2. HTML = Hyper Text Markup Language. 간단히 하이퍼텍스트 기능을 제공하는 마크업 기반 언어라는 얘기다.
3. 하이퍼텍스트 기능은 지금 이 단어에 연결된 링크처럼. 문서와 문서를 연결하는 기능. 인터넷의 아주 기본적인 기능이다.
4. 마크업 언어라는건. 간단히 말해서 '사람'을 위한 언어가 아니라. 기계가 이해하기 위한 언어를 사람이 편집하기 위해 만들어진 언어다. 그래서 바로 보면 이해할 수 있는 방식이 아니고, 사전지식이 필요하다. 이러이러하게 쓰면 기계가 '어떻게' 이해하는지를 알아야한다.
5. 사실, 언어라고 해도 별로 걱정할건 없다. HTML은 외국어보다 단순하고, 여러 번역자료들이 많이 나와있다. 게다가 HTML을 위한 입력도구들은 내가 틀린 문법을 사용할 경우, 어디가 어떻게 틀렸는지에 대해서도 자세히 이야기해준다.
6. 사실 나중에 보게되면 HTML은 그냥 기초중에 기초라서. 깊게 파고들기보다는 '기본만 알아두어도 충분한' 녀석이다. 그러니 너무 고민하지말고, '이런 언어가 있구나~'하고 넘어가면 된다.
세줄정리
- HTML은 '구조'를 만들기 위한 언어이고, 특정한 구조나 결과를 만들기 위해 '따로따로 명령'을 내려줘야한다.
- HTML은 구조를 만들 때, '특정 단어를 통한 명령'을 인식하여 구조를 만들어준다. 이런 명령들을 '태그' 라고 부른다.
- HTML을 배울때, 가능하면 '모든 태그를 외우려고 노력하지 말자.' 꼭 필요한 내용만 배우는 것이 나중을 위해서 더 좋다.
Codepen.io 를 통한 실습
Codepen.io는 텍스트 에디터를 따로 설치하지 않더라도, 바로바로 그 결과를 확인할 수 있는 온라인 에디터다. 그래서 특정 소스와 그 결과값을 다른 사람들에게 공유하거나, 스스로 실험을 할 때 쓰기 좋은 온라인 에디터다.
HTML 알아보기
HTML 태그의 구조 (The Anatomy of an HTML Tag)
HTML 언어에서 사용되는 태그에 대해 알아보자.
1. HTML은 영어로 만들어져있지만, 영어의 문법과는 전혀 상관이 없다. 그냥 새로운 외국어라고 생각하자.
2. HTML 태그는 기본적으로 HTML에게 '특정한 기능을 사용하라고 지시하는 명령어'다.
3. 태그의 종류는 크게 세가지로 나뉜다.
- 시작점과 끝점이 있고, 안에 내용을 넣는 - 열려있는 타입
- 명령어 하나로 끝나는 - 닫힌 타입
- 명령어와 상태값을 가지는 - 상태값 타입
4. 태그는 항상 여러 기능을 붙여, 온갖 응용이 가능하다. 그러나 모든 응용방식을 알아야할 필요는 없다.
5. 다시 이야기하지만, 모든 HTML 태그를 외울 필요는 없다. 작업할 때 꼭 필요한것만 배우자. 앞으로도 배울건 많으니까, 미리 힘빼지 말자.
Codepen.io 를 통한 실습
HTML 언어가 인식하는 텍스트 타입의 종류 세가지
1. 일반 텍스트 : 아무 기능이 없다. 우리가 읽을 수 있는 기본적인 언어와 동일하다.
2. 태그 명령어 : 특정 명령을 내리면 거기에 맞는 결과값을 보여준다.
3. 주석처리된 언어 : !<-- --> 이 사이에는 어떤 내용을 넣어도 일반 텍스트로 인식하게된다. 주로 설명서를 쓰거나, 기존 HTML 내용을 보존하며, 새로운 내용을 입력할 때 자주 쓰인다.
온갖 명령어의 태그와 명령어들을 모아둔 목록사전. 물론 영어로 되어있으다.
https://devdocs.io
HTML 알아보기
HTML문서의 기본규격 (What is the HTML Boiler Plate?)
Atom 에디터를 사용해 HTML 규격 만들기
기본폴더를 설정하고, 신규 문서를 만들고나면 - 텅 빈 문서를 발견할 수 있다. 이때, 프로젝트가 HTML 문서라고 인식을 하지 못한 상태이기 때문에, 이 문서를 HTML 규격으로 만들어주어야한다.
최종적으로는 이런 형태가 만들어져야한다.
문서창 하단에 보면 Plaintext라고 써있는 부분이 있다. 이 부분을 눌러주면 검색창이 뜨는데,
여기서 HTML을 입력해 문서타입을 HTML로 바꿔주자
그러고나면 HTML 규격으로 문서가 인식되었음을 알 수 있다.
이전 게시글에서 기본적으로 설치해야할 내용들을 모두 설치했다면. 문서창에 html이란 텍스트를 입력할 때 자동완성 검색어가 뜰 것이다. 이떄 그냥 ENTER 키를 누르지말고, 목록을 마우스로 클릭해주자. (엔터키로는 인식이 안됨)
그러고나면 이런 결과가 나오는걸 볼 수 있다.
Boilerplate 라고 말하는 - 이런 기본규격은, HTML 문서라면 어디든 쓰이는 기본규격이다. 그러니 하나하나 입력해주기보다는 그냥 복사붙여넣기하거나, 이렇게 기본규격 생성을 사용하면 편리하다.
이외에도 emmet 패키지를 설치했을 경우, HTML 태그 규격을 간단하게 생성해주는 기능을 사용할 수 있다. 이외에도 HTML 태그 규격을 사용할 때 사용되는 기본 규격 (보일러 플레이트) 관련 내용은 다음 자료를 통해서도 확인할 수 있다.
https://docs.emmet.io/cheat-sheet/
기본 HTML 문서 규격의 속성 구분 (보일러 플레이트 속성)
<!DOCTYPE HTML>
- HTML 버전을 설정하는 문서타입 정의. 최신버전인 HTML5로 인식이 된다.
- HTML5 도 완벽한 언어가 아니고, 계속 발전중인 언어이기때문에, 언젠가 신규버전이 나올 수도 있다.
<head> </head>
- HTML 문서의 중요 내용을 담고있는 내용. 주로 외부 모듈이나 기능들을 연결하는 위치다.
<meta charset="utf-8">
- 문서 코드들을 어떤 문서규격 형식으로 재해석할것인지를 선택할 수 있는 규격이다.
- 일반적으로 UTF-8로 쓰는 경우가 많고, 특수한 경우에는 내용을 정리할수도 있다.
- 영상의 인코딩과 디코딩 개념을 알면 이해가 쉽다. 특정 코덱을 통해 영상을 렌더링할 경우, 해당 코덱 없이는 영상을 볼 수 없는 상황과 동일하다.
- meta 태그의 경우 검색엔진이나 SEO에 연관된 내용이므로. 가능하면 최대한 해당 내용을 반영하는 것이 좋다.
HTML 알아보기
HTML로 문서구조 만들기 (How to Structure Text in HTML)
HTML문서에서 텍스트로 구조를 만드는 방법
<head> </head>
외부에서 가져올 기능과 타이틀에 대한 부분은 HEAD 안에 넣어주자.
<body> </body>
내부에 들어갈 데이터에 대한 내용은 BODY 안에 넣어주자.
HTML 코딩과 그 결과물
H1 태그 / P태그 / Strong태그 / br 태그 / hr 태그 / Ul, li 태그가 쓰였다.
- 기본적으로 구글 DOCS나 트렐로 등, 마크업 기반 문서편집기를 써본 사람이라면, 생각보다 쉽게 적응할 수 있다.
- 만약 본인이 개발 언어를 처음 다뤄보는 사람이라면, 지금까지 써왔던 문서편집기들에 비해 직관성이 떨어진다고 느낄거다.
- 사실 이 부분부터가 디자이너들이 웹개발 언어를 다룰 때 가장 복잡하게 느끼게되는 부분이다.
- 결국, 텍스트 문서를 내가 원하는대로 나오게만들기 위한 태그를 찾고, 쓰는 방법을 배워야한다.
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
