001. 프론트엔드 개발 HTML 기본개념 알아보자

Game/게임개발

by 듀_77 2020. 4. 26. 08:54

게임 개발공부에 앞서, 뭐부터 공부해야할지 모르겠어서

유튜브에 공부방법을 찾아보았다.

프론트엔드 개발(Front-end) 쪽을 먼저 손대보려고

"클론 코딩" 검색하다가, 좋은 강의를 발견해서

오늘부터 따라가보려고한다.

오늘은 프로그래밍의 종류는 어떤 것이 있는지,

뭘 배워야 하는지, 그리고 그 시작인 HTML을

공부하는 방법에 대해 작성할 예정이다.

프론트엔드 개발은 화면에 코딩한 결과물이

그대로 나오는 편이고 상대적으로 개발하기 쉬워서

입문자가 많이 선택한다.

HTML/CSS/JAVASCRIPT 이 세 개를 공부하면 된다.

(플러터랑 리액트네이티브같은 프레임워크도 있고

배우기 쉽지만, 나온지 얼마 안돼서 자료가 부족하기 때문에

일단 정석부터 공부하기로 함)

*프레임워크(Framework): 개발을 쉽게 도와주는 도구

(C언어를 깊게 몰라도 가능)

[프로그래밍 종류]

*프론트엔드(Front-end): 화면을 구성하는 작업 (Cleint side)

→ 실제로 눈으로 확인할 수 있고, 정보를 받을 수 있음.

*백엔드(Back-end): 화면에 출력되는 정보를 (Server side)

저장하고 처리, 가공하는 부분

쉽게 말해서 화면에 어떻게 나오게 할 건지

디자인하는 작업이 프론트엔드다. (HTML, CSS, JAVASCRIPT를 배워야함)

HTML은 구조를 만들어서, 스케치하는 작업이고

CSS는 글자나 배경등에 색을 입히고, 위치를 수정하여

그럴듯하게 보이게끔 만드는 작업이다.

JAVASCRIPT는 위의 작업을 거친 결과물에 생명을 불어넣는 작업.

플립북처럼 동작할 수 있도록 해준다.

HTML(Hyper Markup Language)는 웹을 이루는

가장 기본적인 빌딩 블록이다.

쉽게 말하면 어디에 뭘 배치하고, 넣을 건지

그 구조의 밑그림을 그리는 것이다.

기획으로 보자면, UI쪽 기획의도와 연관성이 있다.

웹 브라우저상에서 어떻게 보일지 디자인하는 문서가 바로 HTML!

HTML의 기본 구성은 위 사진과 같다.

소설을 예시로 들어봤는데, 크게 소설을 아래와 같은

형식으로 나눈다고 보면 된다.

<소설> 제목/ 목차/ 시놉시스 <소설>

<ㅇㅇㅇ> ← 빨간 박스 쳐둔 요 꺽쇠 부분을 '태그'라는 개념으로 부른다.

(<novel>이라는 태그 안에 총 3가지 종류의 태그가 들어가 있는 형태다.)

</novel> ← 슬러시가 들어가면, 문단의 '마침표'와 같은 기능을 한다.

그리고 태그 가운데에 들어가 있는 검은 글씨가 바로 콘텐츠.

이런식으로 콘텐츠를 구성하는데 이를 '주석'(annotate)을 단다고 표현한다.

Html은 그러니까 끊임없이 제목, 소제목, 부제목 등을

구분하는 작업에(구조화) 의미가 있다.

→마크업(MARK-UP) 언어기 때문에 '태그'를 이용해서

구조를 짜서 작성하는 것이 HTML이다.

글쓰기를 할 때 '구성'을 먼저 잡고 하는 것과 비슷하다.

건물을 그릴 때 설계도를 그리는 것처럼

어디에 뭘 넣을지 배치하는 작업이다.

*프론트엔드(Front-end) 백엔드 전부 다 다룰줄

알면 풀스택 개발자가 된다.

그리고 에치티엠엘이 구동하는 걸 확인하기 위한 툴로

'JS BIN'이라는 사이트가 있다.

원래는 프레임워크를 다운로드해서 깔아야하지만

이 사이트를 이용하면,

별다른 설치 없이! 바로 확인할 수 있어서

연습장으로 활용하기 좋다.

https://jsbin.com/?html,output

JS Bin

Sample of the bin:

jsbin.com

하나씩 구조를 뜯어보자면,

가장 위에 뜬 <!DOCTYPE html> 이것은

"Document type(문서 타입)이 html입니다" 라는 뜻이다.

그냥 관용적으로 어떤 브라우저에서든 html이

지원된다는 뜻 정도로 해석되면 좋을 것 같다.

에치티엠엘 안에 HEAD와 BODY로 또 나뉘어져 있다.

Head 부분에는 ui적 요소가 들어가지 않는다.

(사용자에게는 보이지 않음)

head 파트에는

타이틀, 부가설명, 아이콘이 들어가고

css를 연결하는 역할을 한다.

(데이터를 위한 '데이터'인 메타데이터가 들어간다.)

body 파트가

실질적으로 사용자에게 보여지는 부분이다.

예시로 명령어인 '태그'를 입력해서

몇 가지를 구현해보자.

body 안에 들어갈 내용인 해리포터, 마법사의 돌을

<h1>해리포터</h1> 이런 식으로 작성했더니

오른쪽 화면에 다음과 같이 뜬다.

button 명령어를 사용하고 </button> 마침표를

찍어주었더니 '바로가기' 버튼이 구현되었다.

HTML은 어떤 브라우저에도 쓸 수 있도록

약속이 되어 있다고 한다.

한 마디로 HTML 기반으로 만들어진다는 것.

월드 와이드 웹 컨소시엄 (W3C) 이라는 기구가

웹 브라우저와 기술의 표준화를 추구해서

이뤄진 결과라고 한다.

프로그래밍은 결국 수능 언어 지문 분석하듯이

하나하나 다 뜯어가면서

이게 뭔 기능을 하는지 알아가는 과정인 것 같다. (일단 입문에서는)

저기 박스쳐놓은

"글자의 포맷을 utf-8으로 하겠다."는 뜻.

(참고로 utf-8은 모든 언어에서 지원이 가능한 상태)

그리고 바로 밑에

컴퓨터의 보임창 (viewport)의 너비를

디바이스 스크린만큼 다 쓰겠다는 의미.

*html 문단 하나에 head/body라는 구조가 들어간다.

head에는 상세설명인 메타데이터,

body는 실질적으로 유저에게 보여지는 부분.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML elements reference

This page lists all the HTML elements, which are created using tags.

developer.mozilla.org

그리고 실질적으로 명령어 부분인

"태그"의 기능들을 살펴볼 수 있는 사이트가 바로 위의

MDN 웹사이트이다.

HTML의 구성요소 레퍼런스를 얻을 수 있는데,

이걸로 현재 사용 가능한 "태그"들을 전부 살펴볼 수 있다.

이런 식으로 <strong> 기능을 쓰면 그게 어떻게

구현되는지 바로 output 화면을 통해 확인이 가능하다.

'글자 진하게' 기능이 있다는 사실 정도만

알아두면, 다음에 내 웹 사이트에 그걸

써먹을 수 있을 것이다.

(처음부터 완벽하려고 하지 말자)

그리고 HTML compatibility(호환성)을 체크하는

기능도 원래 이 사이트에 있었는데

어디있는지 못 찾고 있다.

(못 찾으면 따로 구글링해서 살펴보든가 해야할듯)

html의 어떤 기능이 크롬에서는 안 돌아간다던가

할 수도 있기 때문에.

이 태그가 모든 브라우저에 지원되는 기능이 맞는지

꼭 체크를 해봐야 한다.

지금은 작동하지 않는 태그 기능들에

대해서도 따로 분류를 하고 있다.

(이미 하고 있는 프로젝트들에 저 태그가 있다면

죄다 수정해야함)

그리고 저 사이트에는 한국어 번역 기능이 있다.

영어를 잘하는 것은 프로그래머가 가져야할

기본소양이긴 하지만

일단 머리가 아프므로 한국어 버전으로

보는 것도 방법이다.

이상한 태그를 입력해도, 어떻게든 돌아가고 있는 모습이다.

~~마치 내 인생처럼..~~

이건 브라우저가 에러를 대충 예견해서

스스로 회복해서 보여주기 때문이다.

멀쩡한 태그를 썼는지 안 썼는지 제대로 확인하고 싶다면,

https://validator.w3.org/

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

위 사이트에 들어가서 확인할 수 있다.

1. URL 2. 파일 업로드 3. 코드 복붙해서 바로 확인

총 3가지 탭이 있는데, 확인하고 싶은 방법대로

선택하여 하면 된다.

1번 Warning은 에러는 아니다.

2번은 아예 Body쪽에 쓸 수 없다고 명시해주는데,

상세하게 위치를 표시해줘서 편하다.

*정리: 웹사이트를 볼 때, 이런 식으로 구조를 파악하면

굉장히 도움이 많이 된다.

배너는 어디에 넣을 거고, 아이콘은 어디 위치에 넣을 건지.

위 사진처럼, 구조를 나누어서 보는 연습이 굉장히 중요하다고 하는데

블로그를 운영해보면 자동으로 안다.

(광고를 어디에 배치할건지, 배너나 위젯은 어디 넣어야할지

계속 고민하게 되기 때문)

일단 처음으로 프론트엔드 개발(Front-end) 입문과정인

HTML을 공부해봤는데, 생각보다 어렵지 않다.

마크업언어라 그런지 프로그래밍보다는

뭔가를 배치한다는 느낌에 가깝다.

*위 포스팅은 아래 유튜브 강의를 바탕으로 작성되었습니다.

https://www.youtube.com/watch?v=i0FN-OwJ7QI

'Game > 게임개발' 카테고리의 다른 글

파이썬 반복문 for문 개념 및 예제 풀이 (0)	2020.09.18
004. CSS(Cascading style sheet) 개요 알아보기 (0)	2020.09.17
Scanf에러 C4996해결에 대한 메뉴얼 (0)	2020.05.06
003. HTML요소 (Attribute,속성)을 알아보자! (0)	2020.04.29
002. HTML필수태그 개념과 각 기능 이해 (0)	2020.04.28