안녕, 세상!

1. HTML 개요 및 설치 본문

It공부/HTML

1. HTML 개요 및 설치

dev_Lumin 2020. 7. 19. 18:12

(1) HTML(Hypertext Markup Language)란?

웹 프로그래밍을 할 경우 기본적으로 HTML, CSS, JavaScript로 웹을 만듭니다.

그 중 HTML은 웹 화면의 보이는 부분을 표현하는 프로그래밍 언어입니다.

즉, 브라우저를 통하여 사용자에게 보여지는 문서의 내부형식을 규정하는 언어입니다.

 

 

(2) HTML 구현 환경

HTML을 시작하기 위해서 웹 브라우져와 에디터가 필요합니다.

에디터(editor) : 프로그래밍 언어의 문법에 맞게 코드를 작성할 프로그램

 

윈도우에는 메모장, macOS에는 텍스트 편집기, 리눅스에는 gedit 등 여러 가지 에디터가 운영체제에 이미 내장되어 있습니다.

하지만 이러한 에디터는 원래 코드를 작성하는 용도는 아니기 때문에 코드를 작성하는 최적화되어 있는 전문적인 도구들 중 Atom을 사용하겠습니다.

 

Atom 설치방법

https://atom.io/

 

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

atom.io

홈페이지에 접속을 한 후 위와 같은 페이지에서 download를 누릅니다.

다운로드를 받고 압출을 푼 후 프로그램을 설치하여 실행하면 Atom이 실행될 것입니다.

 

html 코드를 저장시킬 파일은 당연히 확장자도 .html 이어야 합니다.

html 파일을 생성하는 방법은 따로 바탕화면에서 원하는 폴더에 메모장 형태로. html 파일을 만들거나 위의 Atom 환경에서 [File] -> [new File] 을 통해서 만들고 저장할 수 있습니다.

 

 

 

HTML 실행

우선 간단하게 작동이 잘되는지 확인하기 위해서 html 파일을 하나 생성한 후 코드에 hello world

라고 입력을 합니다.

위와 같이 코드를 입력한 후 저장을 하고 웹페이지를 엽니다.

웹페이지의 상단의 [파일] -> [열기] 를 클릭한 후 방금만든 test.html 코드를 열면 다음과 같이 '안녕, 세상!' 이라고 써져있는 것을 확인할 수 있습니다.

크롬창에 상단의 도구틀이 없으면 윈도우는 ctrl+o, macOS는 command+o를 누르시고 html파일을 열면 됩니다.

 

 

 

(3) 기본 구성

태그(Tag)

태그는 어원 의미 그대로 꼬리표라는 뜻으로 원하는 코드부분에 꼬리표를 달아서 특징을 부여하는 역할을 합니다.

태그는 앞에있는 태그와 뒤에있는 태그를 한 쌍으로 사용하는데 앞에 있는 태그를 열리는 태그, 뒤에 있는 태그를 닫히는 태그라고 하며, 서로 구분하기 위해서 닫히는 태그에 '/' 를 붙입니다.

태그라고 표현하는 특수문자는 '< >' 입니다.

HTML은 대문자와 소문자를 구별하지 않기 때문에 태그안의 속성 값이 대소문자 상관없이 사용됩니다.

 

다음은 글씨를 진하게 하는 태그의 예시입니다.

<strong> 진하게하고싶은단어 </strong>

 

 

Html은 기본적으로 다음과 같은 3개의 태그로 구성됩니다.

 

 

<HTML>

    <HEAD>

        ....

    </HEAD>

 

    <BODY>

        ....

    </BODY>

</HTML>

 

 

속성 의미
<HTML> HTML 문서임을 나타냄
<TITLE> 브라우저의 바에 나타나는 문장을 나타냄
<HEAD> HTML문서의 설명을 나타냄
<BODY> 문서의 실제 내용부분을 나타냄

 

 

HTML 프로그래밍을 하면서 웹문서에서 색상을을 표현하는 방법은 다음과 같습니다.

색상 색상명 RGB값
검은색 Black #000000
빨간색 Red #FF0000
노란색 Yelow #FFFF00
초록색 Green #008000
파란색 Blue #0000FF
하늘색 Aqua #00FFFF
보라색 Violet #EE82EE
흰색 White #FFFFFF

(1) 표준색상 이름 : 미리 정해진 색상의 이름      ex) black, white, red ...

(2) RGB 값 : Red, Green, Blue 색상의 조합을 16진수로 표현한 값

   ex)   # FF 01 23

  # : 숫자를 나타낸다는 의미

  FF : Red를 표현하는 16진수 2자리 (00~FF : 256가지)

  01 : Green을 표현하는 16진수 2자리

  23 : Blue를 표현하는 16진수 2자리

 

 

 

 

html의 관용적 행위

문서의 맨 위에 <!DOCTUPE HTML> 이라는 코드는 이 문서에는 HTML이 담겨 있다는 뜻입니다.

 

저작자표시 비영리 변경금지

'It공부 > HTML' 카테고리의 다른 글

3. HTML 기초 문법(2)  (0) 2020.07.22
2. HTML 기초 문법(1)  (0) 2020.07.20
'It공부/HTML' Related Articles more
Comments