HTML의 기초 강좌 1. HTML 파일을 만들어보자!

HTML의 기초 강좌 1. HTML 파일을 만들어보자!

HTML의 기초

HTML을 업무용으로 사용하기 위한 기초부터 시작을 하려고 합니다. HTML이란 Hyper Text Markup Language의 약자로 WWW의 초기부터 인터넷 상에 정보를 보다 간단하게 표시하기 위한 규약으로 자리 잡았습니다.
참고문헌(위키페디아) : https://ko.wikipedia.org/wiki/HTML

시작하기 전에

HTML 편집 툴은 다양하게 있고 심지어는 윈도우의 메모장 등 기초적인 텍스트 편집기만 있으면 편집이 가능합니다.
하지만 여기서는 프로젝트로서 서버와의 연동까지 생각해서 만들고 있으므로 github 프로젝트와 같이 하는 것으로 하겠습니다.
아래 사이트에서 편집기인 Visual Studio Code(무료) 및 Git for windows(무료)를 다운 받으시기 바랍니다.
Visual Studio Code : https://code.visualstudio.com/download
Git for windows : https://gitforwindows.org/
Git for Windows는 설치시에 물어보는게 많은데 그냥 디폴트로 다음다음 넘어가도 문제가 없습니다. 상세 선택은 고급 사용자가 하는 걸로 ...

편집기의 기초

vscode를 설치하면 아래와 같은 화면이 뜹니다.
일반적으로 프로젝트 단위로 열곤 하는데 저의 경우는 다양한 프로젝트를 일괄 관리를 하다보니 project라는 폴더를 만들고 하위에 각각 git에서 다운 받은 레포지터리가 있고 vscode에서는 상위 폴더인 project 폴더를 열어서 크로스 프로젝트로 관리하고 있습니다.
이건 얼마나 프로젝트끼리 연동해서 사용하느냐에 따라 다르기 때문에 좋아하는 형태로 열어서 사용하시기 바랍니다.

github에서 프로젝트를 만들자

Github(https://github.com) 에 가입하는 것은 생략하겠습니다.
github에 로그인을 한 뒤에 오른쪽 위의 자기 프로필 사진 아이콘 옆에 `+` 를 눌러 나오는 메뉴에서 Create Repository를 선택하여 레포지터리를 만듭니다.
레포지터리가 생성이 되었으면 레포지터리 홈에서 URL을 복사합니다.
그리고 vscode에서 clone repository 링크를 클릭해서 나온 입력창에 붙여넣기를 합니다.
이렇게 하면 바로 서버에서 하드 디스크로 내려 받아서 작업이 가능하게 됩니다.
폴더 위치를 정리하고 싶다면 왼쪽의 레포지터리 이름에 오른쪽 버튼을 누른 뒤에 `Reveal in File Explorer` 를 선택해서 파일 위치가 표시되면 vscode를 닫고 폴더채로 이동 후에 vscode를 다시 열면 변경된 디렉토리에서 작업이 가능합니다. (vscode를 닫지 않으면 vscode에서 디렉토리를 lock걸고 있기 때문에 이동이 안됩니다.)
이렇게 작업 준비가 끝났으면 본격적으로 시작을 해봅시다!

기본 형식

vscode의 레포지터리 이름에 오른쪽 버튼을 눌러 New File을 선택, index.html이라고 적습니다. 그리고 오른쪽에 빈 화면이 뜨면 거기에 아래 내용을 입력후 ctrl + s로 저장을 합니다.

<html>
  <head> 여기쓰면 탭에 표시되요. </head>
  <body>
    요기가 내용이지요.
  </body>
</html>

이런 형식으로 <> 에서 시작해서 </> 로 끝나게 하는 태그 형식으로 HTML이라고 합니다.

에디터 또는 메모장에서 위 내용을 입력하고 html이라는 확장자로 저장한 뒤 더블클릭 하면 브라우저에서 표시 됩니다.

공부를 위해서는 먼저 평소에 하는 메모를 HTML로 적어보는 연습을 하는 것이 중요합니다.

그리고 그 HTML을 휴대폰 등에서 보면서 수정해 나가면 충분히 빠른 시간내에 숙지하게 됩니다. ^^

`<BR>` - 줄바꿈

HTML 파일에 메모를 하다보면 줄바꿈이 안되는 것을 볼 수 있습니다. 소스에서는 줄바꿈이 되어도 브라우저에서는 줄바꿈 표시가 되지 않죠.
줄바꿈을 하고 싶은 곳에 `<BR>` 이라고 입력해보세요. 그 위치가 줄바꿈이 된 것이 보일 겁니다.
이렇게 HTML은 특수 문자코드나 기호는 직접 입력을 못하기 때문에 여러가지 표현을 사용하게 됩니다.
특수기호 참조표 : https://github.com/LowyShin/KnowledgeBase/wiki/HTMLCharEncode

`<A>` - 링크

내용을 적다보면 특정 문자를 클릭하면 관련 파일 또는 URL, Google Drive file, Chat등으로 이동을 시키고 싶을 겁니다.

그럴 때 사용하는 것이 <A> 태그 입니다.

<a href="https://giipasp.azurewebsites.net/"> giip 홈페이지 </a>입니다.

이렇게 입력하면 giip 홈페이지 라는 부분만 색깔이 바뀌어 있을 겁니다. 이게 링크 태그이구요, href안에 google drive의 링크를 넣는다거나 line 챗방의 링크를 따서 넣으면 모바일 유저는 라인 메신저를 바로 열 수도 있습니다.

활용도는 상상하는 만큼 자유롭게 사용할 수 있습니다!

마우스 오버 옵션을 위한 alt 등의 속성들도 있고 다양하지만, 이번에는 초심자용이므로 가볍게 이 정도만 설명합니다.

팁

vscode에서 github에 업로드

vscode는 github 연동을 지원하기 때문에 github 연동 부분을 클릭해서 바로 연동시킬 수 있습니다.
아래 이미지에서 왼쪽의 1이라고 표시된 github마크를 클릭하면 수정된 내용이 확인 됩니다. 1이란 숫자는 1개의 파일이 수정되었다는 표시 입니다.
두 번째 빨간 박스 안에 수정 내용을 기입(나중에 디버그하거나 팀 프로젝트시에 중요하니 입력하는 버릇을 들여야 합니다!)하고 `ctrl + enter`를 입력하면 commit이 됩니다.
commit은 어디까지고 소스에 덮어쓰기 완료.. 까지 이므로 서버에 올리는 작업을 해야 합니다.
commit이 되면 아래 이미지 처럼 동기화가 필요한 파일 갯수가 표시됩니다. 그 숫자나 숫자 왼쪽의 동기화 마크를 클릭하면 서버에서 동기화가 완료 됩니다.
동기가 완료 된 것은 github의 자신의 레포지터리에서 확인할 수 있습니다.

계속 추가해서 업데이트 하겠습니다. ^^

giip :: Free mixed RPA orchestration tool!

https://giipasp.azurewebsites.net/

수정용 : https://github.com/LowyShin/KnowledgeBase/wiki/HTML-kr

댓글