비전공에서 취업까지!! [3화] front 첫걸음! HTML, 화면을 만들어보자! -입니다.-
안녕하세요 SsunDev입니다.
오늘은 드디어 코드! 라는걸 쳐보겠습니다.
자 저번시간에 이어서 설치해둔 VSCode를 켜보겠습니다.
왼쪽에 사이드부터 설명드리자면
1번은 프로젝트파일들을 보는 창입니다. 어느 개발 툴을 켜더라도 현재 진행되는 프로젝트의 구성을 보는 창이 있습니다. 2화에서 만들었던 HTML01 폴더가 보이는군요? 이 아래에 이제 새로운 파일들을 만들어보겠습니다. 그러면 어제만든 HTML01폴더안에 파일들이 생기게 됩니다.
2번은 검색입니다. 프로젝트에서 검색합니다.
3번은 깃허브라고 하는걸 연결할 수 있게 해주는건데 나~중에 배우겠습니다. 쉽게 일단 설명드려보자면 내가 짠 코드를 깃허브라는 인터넷에 올려서 저장해두었다가 그걸 내려받아서 중간에 다른팀원이 추가수정을 할 수 있고 팀원이 수정한 그코드를 올리면 또 나도 받아서 또 덧붙여 작업하고... 이런 공동작업을 도와주는 어플(?) 쯔음으로 보시면 됩니다.
4번은 디버그라고, 모든 개발툴에는 디버그라는게 있습니다. 사람이 코드를짜면 오류가 나는 부분이 생기기 마련인데 코드를 한 줄씩 혹은 한 그룹씩 진행시키면서 오류가 생기는 부분을 포착하게 도와줍니다. 이 역시 나~~중에 배워보겠습니다.
5번은 툴 내부에서 필요한 추가기능을 다운받을수 있게해주는 탭입니다. 스마트폰에서 플레이스토어 같은 개념으로 생각하시면 됩니다.
5번에서 open in browser라고 검색해서 첫번째를 다운받겠습니다.
이걸 다운받아두면 단축키로 손쉽게 만든 페이지를 열 수 있습니다.(아래 사용법 나옴)
6번은 신경쓰지마십시오 제가 5번을 통해 받아서 생긴거라서 지금 필요없는겁니다.
초반인 지금은 거의다 사용안하고 1번만 주로 사용하겠습니다.
그 다음 우리가 어떤 파일들을 열게되면 7번 상단에 탭들이 생기게 됩니다. 겟 스타트를 닫아버리겠습니다.
해당 부분에서 우클릭을해서 뉴 파일을 눌러보겠습니다.
html01.html 이라고 확장자를 html로 꼭 넣어주셔야합니다! 에이치티엠엘공일 쩜 html!!
이게 우리가 앞으로 할 웹 브라우져 확장자파일입니다.
잠깐! 여기서 HTML이란 !?
H.... 하입보이요..
가 아니고
HT = Hyper Text, 문서와 문서가 링크로 이어져있다!
M = Markup, 테그로 이루어져있다. = <> </>
L = language 언어로 이루어져있다.
하나하나 봐 보자면
HT 우리가 보는 페이지 하나하나를 문서라고 하는데 원래 브라우져의 용도가 지금처럼 다양한 기능을 하는(영상도 나오고, 게임도 되고, 쇼핑도 되고 등등) 홈페이지등의 역할이 아닌
나무위키마냥 문서,서류화 하는 용도로 탄생했다고 합니다. 그래서 각 페이지를 문서라고 설명한거고 링크! 우리가 주소,링크를 통해 다른 페이지, 다른사이트등등으로 넘어갈 수있죠? 이걸 말하는겁니다.
(알아만두시고 이런거 뭐 면접볼때나 앞으로 코딩하면서 이론물어보는데 없으니 안외우셔도 됩니다. 시험보듯이 html은 하이...퍼...텍....스트 마....크....업 랭...기쥐... 하실필요 음슴)
그 다음 우측 화면에서 이제 드디어 코드를 쳐보겠습니다.
따라 쳐보겠습니다.
<!DOCTYPE html>
도큐먼트(문서) 타입은 html 이다!!! 라고 선언하는 선언문입니다.
웹브라우져 페이지를 만들기 위해서는 이를 처음에 꼭 선언해주어야합니다.
그 다음줄에 <html> 이라고 쳐보겠습니다. 그럼 자동으로 </html>이라고 한개가 더 완성이 됩니다.
이처럼 대부분의 코드는 <>열고 , </>닫는 테그가 존재합니다.
***그리고 처음<!DOCTYPE html> 을 제외한 앞으로의 모든 테그들은 소문자로 작성해주셔야합니다.***
엔터를 한번 쳐서 닫는 테그를 아래로 내려보겠습니다.
이제부터는 부모코드와 자식코드라는걸 알아야합니다.
어려울것 없습니다.
어떤 코드 안에 속해있으면 자식코드, 그 코드를 품고있으면 부모 코드입니다.
오늘안에 설명할테니 지금 이해안가셔도 일단 계속해봅시다.
<html>, </html>사이에 <head>와 <body>라는 코드를 쳐보시겠습니다.
이런 모양이 나옵니다.
여기서 <html>이라는 코드가 부모코드가되고 그 안에 <head>와 <body> 코드는 자식코드가됩니다.
<html> </html>이라는 코드 사이 안쪽 영역에 우리가 코드를 짜야 브라우져가 인식을합니다. 이처럼 어느 테그 안에 속해서 코드를 짜야할 때 부모코드와 자식코드라는 관계가 성립하게 됩니다.
그러면 <!DOCTYPE html>과 <html>은 어떤관계일까요? 서로 속해있지 않는 독립적인 관계이기때문에 같은줄에 있는 이런 관계를 형제코드라고합니다.
그럼 <html> </html> 안에 있는 <head>, <body>는 어떤 관계일까요? 정답은 서로가 속해있지않는 형제코드입니다.
여기서 앞으로 개발인생에 있어서 알아야할 아주 중요한 게 있습니다.
중요한건 바로 부모코드 아래 있는 자식코드는 *텝 Tab* 을 통해서 항상 들여쓰기를 해주어야한다는겁니다!
이 들여쓰기가 버릇이 안되어있으면 코드를 분석하기도 힘들어지고
업무 들어갔을때는 욕을 야물딱지게 얻어먹을 수 있습니다.
특히 스페이스바를 통한 띄어쓰기로 하면 안되고 !!!절대적!!!으로 탭을 사용해 해주어야한다는겁니다.
만약 부모>자식>자식>자식>자식 이런 구조로 있다면? 텝텝텝텝으로 한참 밀어주셔야합니다!
예쁘게 보이려고 부모 자식관계인데 일부로 같은 줄로 맞추거나 스페이스로 맞춰주거나 하는 그런 행위를 해서는 안됩니다!
사람이 인식하기위한 약속이기때문에 꼭 이 규칙을 지켜주셔야합니다.!
결론! 자식코드는 텝을 통해 꼭 들여쓰기를 해주자!
자 다시 돌아와서 <head>, <body>도 각각 엔터를 쳐서 그 안에 또 코드를 적기위해 띄어주겠습니다!
이번엔 <head> </head>안에 <title></title>을 쳐보겠습니다.
그리고 <title> </title>사이에 각자의 이름 최초페이지 라고 적어보겠습니다 전 SsunDev 최초페이지 라고 적겠습니다.
이 상태로 Alt + B 를 눌러보겠습니다.
Alt + B 는 처음 우리가 다운받은 Open in browser의 기능입니다!
만들고있는 파일을 C:/javaStudy2/Study_Front/html01/html01.html 로 직접 폴더를 타고타고 들어가서 파일을 더블클릭해서 열어야 하는 번거로움을 단축키 한번으로 해결해줍니다!
어머나 세상에 우리의 웹 페이지가 만들어졌습니다!
각각 사용하시는브라우져(엣지, 파이어폭스,구글 등등)으로 웹 페이지가 열어질것입니다.
1번은 우리가 <title></title> 안에 넣은 값이 페이지의 이름이 되었습니다.
이런식으로 <></>테그와 테그사이에 또다른 코드(테그<>)를 넣기위해선
엔터를 통해 닫는테그를 아래로 내려주어야하고
테그안에 그 테그에 대한 데이터(내용물)을 채우기 위해서는 엔터없이 한줄로 안에 값을 채워주면 됩니다.
2번은 우리가 연 지금 현재 페이지의 경로입니다! C:/자바스터디2/스터티_프론트/html01/html01.html 파일이군요!
자~ 우리가 만든
자~ 이 코드가 기본 화면을 구성하는 뼈대입니다.
여기서 <head> 부분이 우리가 열었던 웹페이지의 1번에 해당하는 헤더부분입니다!
우리가 만든 브라우져 화면에는 나오지 않지만 숨겨진 부분으로써 타이틀뿐만아니라 다른 코드들도 넣을수 있습니다.
주로 화면에대한 어떤 선언문등을 입력할때 주로 이용합니다.(나중에 차차 알게됩니다. 걱정노노)
그 다음 <body>에 해당하는 부분이 우리가만든 웹 페이지의 3번부분에 해당합니다. 인터넷을 켜면 화면에 보이는 모든 요소들이 모두 다 이 <body> </body>라는 테그 안에 존재하게됩니다.
앞으로 이 양식을 계속 사용할거고 실제개발도 이 뼈대를 기본으로 만들어 지기 때문에
이건 달달달 손에 익혀두심이 좋습니다!
오늘은 드디어 3화만에 첫 코드를 짜 보았는데요?
어떠셨나요? 할만 하셨나요?
개발.. 할만 하죠? 너무 어려워마시고 앞으로도 더 쉽게 설명해드릴테니 여기까지 오시면서 궁금한거 어려운거 모르는거 뭐든지 항시 댓글로 남겨주세요!
여러분의 댓글을 기다리고 있겠습니다!
아 추가로 칸츄롤 + S 를 통한 저장을 습관화 합시다 수시로하면 좋아요 수시로!!! 물론 난 정시로 입학함 수고