[HTML#01] 도구 설치(brackets), 기본 페이지 작성
이제부터 학원에서 화면을 만드는 방법을 배운다.
그에 앞서 어떤 가벼운 TMI?를 말해주자면 버전이라는게,
보통 버전이라 함은 1.14.2 와 같다고 하면
major version 은 1
minor version 은 14
release version 은 2
이다.
major version은 대단히 큰 변화가 발생한 횟수
minor version은 기능들이 새로 생기거나 없어지는 소규모 변화가 발생한 횟수
release version은 오류가 수정되는 등의 자잘한 변화가 발생한 횟수 이다.
버전만 보아도 어떤 역사가 있는지 알 수 있다.
0.0.1부터 시작하도록 되어있으며, 정식 배포는 1.0.0 부터 인정해준다.
0.x.x는 정식 서비스를 시작하지 않았다는 뜻이다.
1.14.2는 정식버전중 14번의 작은업데이트 후 2번의 작은 변화가 있었다는 것이다.
자, 그럼 다음으로 brackets.io를 들어가서 HTML을 시작하기 위한 도구를 다운받자.
다운 후 시스템 허용을 해주고, 프로그램을 실행시켜준다.
우선 왼쪽창에 폴더를 지정해준다. 자신이 저장할 폴더를 설정해주고, 선택해준다.
그럼 깨끗한 화면이 나오는데, 왼쪽 검은 화면은 폴더를 여는, 이클립스로 치면 네비게이터와 같은 폴더목록이 나오는 화면이고, 오른쪽 하얀곳은 당연하게도 코드를 작성하는 화면이다.
왼쪽에 파일을 하나 추가해주면, 코드를 작성할 수 있는데,
혹시나 글씨크기가 작아보인다면 상단 메뉴에 [보기]-[테마]에 들어가서 화면색부터 글씨크기, 글씨체등 바꿀 수 있다.
기본적으로
코드창에 처음 쓰라고 배우게 된 것은
<html>
<head>
<title>Hello HTML!</title>
</head>
<body>
<h1>Hello HTML~</h1>
</body>
</html>
이다.
그럼 <title></title>사이에 적은 Hello HTML! 은 제일 위(프로그램창 명?)에 표시가 되고,
<h1></h1>사이에 적은 Hello HTML~은 본 화면에 표시가 된다.
head와 body의 차이인것 같다.
<html></html>은 태그라고 한다.
그리고 보통 인터넷 아무창이나 열고 F12를 누르게 되면 이런 HTML 코딩식을 볼 수 있다.
Elements를 눌러보면 어떤 영역의 코드가 창을 이루었는지 알 수 있다.
이러한 글자(텍스트)를 렌더링 하면 화면이 나온다고 이해하면 된다.
렌더링은 브라우저가 해주는 것이다(브라우저는 인터넷익스플로러, 마이크로소프트엣지, 사파리, 구글 크롬 등)
HTML은 컴파일할 필요가 없다. 때문에 바로바로 코드창에 글을 쓰면, 예상출력창에 바로바로 입력이 된다.
예상출력창, 즉 미리보기는 오른쪽에 번개모양?이 있는데 그걸 눌러주면 창이 새로 뜬다.
여기서 HTML이란
-HyperText Markup Language
-하이퍼텍스트 구조를 만드는 언어
-태그(tag)형식으로 구성되어 있다.
브라우저
-텍스트 형태의 HTML 코드를 그럴싸한 화면으로 바꿔주는 프로그램
-그럴싸한 화면으로 바꾸는 작업을 "렌더링"이라고 함
-크롬, 파이어폭스, 오페라, IE, 엣지, 웨일, 수윙, ...
하이퍼 텍스트
-연결되어 있는 텍스트를 말한다. 어떤 텍스트를 눌러서 새로운 창의 텍스트가 출력될 때,
이 형태를 하이터텍스트라고 한다.
-텍스트 페이지간에 연결되어 있는 큰 구조
-연결되어 있으므로 상호간에 이동이 가능
태그
-<???></???> 형태로 되어 있는 기호
-???에 적혀있는 글자가 태그의 이름
-일반적으로 세트로 존재(시작태그, 종료태그)
-시작태그와 종료태그가 영역(그 사이가)을 나타낸다.