본문 바로가기
교육/HTML

HTML 개발자 수업 49일차 - Visual Studio Code(VSC) 설치, HTML

by yhyuk 2021. 6. 7.
728x90
반응형

1. Visual Studio Code 설치

2. HTML

1. Visual Studio Code 설치

https://code.visualstudio.com/#alt-downloads

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

위 사이트 접속 후 운영체제에 맞게 다운로드 한다.

 

2. HTML

[ 정의 ]

- Hyper Text Markup Language (하이퍼 텍스트 마크업 언어)

- Hyper Text: 링크(Link)

- Markup Language: 태그(Tag)를 사용해서 문법을 표기하는 언어 (SGML, XML, HTML, XHTML 등....)

- 프로그래밍 언어가 아닌 표현 언어 이다. (브라우저 화면에 무언가를 출력하는 기능만 있는 언어)

- HTML 1.0 ~ 현재 HTML5 까지 나왔다.

- 앞으로 배울 수업은 HTML 4.01 + XHTML 1.0  + HTMLS 이다.

 

[ 웹 브라우저, Web Browser ]

- 웹 서버에 접속해서, 필요한 자원(HTML 페이지, 이미지, 동영상 등등)을  다운받아서 처리 후에 화면에 결과를 출력하는 프로그램.

- HTML 언어를 실행하는 환경(HTML 언어분석 + 언어 + 파싱 + 번역 + 실행 + 참조)

- Java에 비교하자면 JDK + JRE와 유사하다. 

 

[ 기본 문법(골격) ]

<!-- html 입력 후 Ctrl + Space 해서 html:5 선택하면 자동 생성 된다. -->


<!DOCTYPE html>
<html lang="en"> <!-- html 태그 -->

    <head> <!-- head 태그 -->
        <meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    </head>

    <body> <!-- body 태그 -->
    
    </body>
</html>

<html> 태그
    - 문서의 모든 내용을 감싸는 역할 > 문서 자체

    - 문서의 시작과 끝을 담당한다.
    - 루트 태그, Root Tag

 

<head> 태그
    - 문서의 정보를 담고 있는 태그
    - 브라우저에게 전달하는 정보이다.
    - 화면에 보이는 출력정보가 아니다. -> 사람이 보는 정보가 아니다.
    - 문서의 머릿말

 

<body> 태그
    - 브라우저에 출력될 내용을 담는 태그
    - 이 안의 내용은 화면에 출력된다.
    - 텍스트, 이미지, 동영상, 음악 등....

 

[ 공백 문자, Whitespace ]

- 스페이스, 탭, 개행 문자

- HTML 페이지 소스상에 존재하는 공백 문자열을 실행기(브라우저)가 처리하는 규칙

- 거의 모든 브라우저가 동일한 규칙으로 처리한다.

- 브라우저는 소스상의 연속된 공백 문자(종류와 상관없이)를 딱 1개의 스페이스로 치환해서 화면에 출력한다.

- 예시)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    하나       둘   셋
    넷                             다섯 
    여섯
</body>
</html>

- 위와 같이 아무리 스페이스와 탭, 개행문자(Enter)를 입력해도 브라우저에서는 스페이스 한개만 취급 하게 된다.

 

[ 공백 문자를 원하는 모습으로 화면에 출력하는 방법 ]

 1) 스페이스 출력(Space)

   - 스페이스 1개당 > 엔티티(Entity) 1개 > &nbsp; (non-break space)

 

 2) 개행 문자 출력(Enter)

   - <br> 태그 사용

 

 3) 탭 문자(Tap)

   - 없다.

   - 브라우저 창은 편집기가 아니라서 탭이 존재하지 않는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    하나&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;둘 셋
    <br>
    넷              다섯
    <br>
    여섯
</body>
</html>

 

 

[ HTML 구성 요소 6가지 ]

 1) 태그 (Tag), 요소 (Element)

 2) 속성 (Attribute)

 3) 텍스트 (PCDATA)

 4) 주석 (Comment)

 5) 선언문 (Declaration)

 6) 엔티티 (Entity)

 

[ 1. 태그(Tag), 요소(Element) ]

- 예약어(명령어)를 <>로 묶어놓은 요소

- HTML의 문법을 구성하는 주요 요소

- HTML 문서의 골격(뼈대)을 만드는 역할(레이아웃을 잡는 역활) + 데이터(문자열 + 이미지 등)를 출력하는 역할

- 각 태그마다 역할을 부여한다. > 출력 되는 형태나 기능이 다르다.

- ex) <html></html> , <head></head> , <body></body>

 

[ 2. 속성 (Attribute) ]

- 데이터의 쓰임: 태그의 성질을 정의하는 역할

- 태그가 가지는 데이터의 한 종류

- 속성 표기법

<시작 태그 속성명 = "값"> </끝 태그>  기본 따옴표
<시작 태그 속성명 = "값" 속성명 = "값"> </끝 태그> 속성이 여러개 일 때 ( 스페이스로 구분)
<시작 태그 속성명 = '값'> </끝 태그> 호 따옴표 가능
<시작 태그 속성명 = 값> </끝 태그> HTML에 한해서 따옴표 생략 가능(XML에서 에러) > 금지
<시작 태그 속성명 = "값"> 단독 태그
<시작 태그 속성명 = "값 값 값"> 속성값을 여러개 갖는 경우 ( 스페이스로 구분)

 

[ 3. 텍스트, 문자열 (PCDATA) ] 

 

- 데이터의 쓰임: 주로 화면에 출력 된다.

- 태그가 가지는 데이터의 한 종류

- 시작 태그와 끝 태그 사이의 모든 문자열

 

[ 4. 엔티티 (Entity) ] 

- 미리 정해져 있는 표현을 소스에 표기하면, 브라우저와 약속된 표기법을 통해 표현하는 요소

- 해석하면 안되는(파싱 하면 안되는) 문자들을 화면에 출력하는 역할

- &엔티티명; (Built - in Entity)

&nbsp; 공백 문자 표현
&lt; '<' 표현
&gt; '>' 표현 
&amp; '&' 표현
&qout; "(쌍 따옴표)
&apos; '(호 따옴표)
&copy; Copyright 표현
&#문자코드; 문자코드 표현

MEMO>

# Visual Studio Code에는 엄청나게 도움을 주는 수 많은 plugin이 있다. 오늘 수업에서 몇가지만 다운 받아봤지만, 이것저것 써보고 판단해서 앞으로 개발하는데에 불편함이 없도록 하자!

 

# 웹 개발은 이클립스에서도 개발이 가능하지만, 부가 기능이 더 많은 Visual Studio Code를 수업에서 사용한다.

 

# http://w3schools.com 에서 무료로 웹에 관련된 언어들을 공부 할 수 있다. 선생님 피셜 ) 사실상 책보다 이것 보는게 더 도움된다고 하심

 

# Visual Studio Code의 왼쪽 상단에 있는 톱니바퀴 (Setting)에서 거의 모든것을 사용자의 입맛대로 수정 할 수 있다.

    --> 다만 폰트설정은 직접 입력해야함... (font family) 

 

# HTML는 트리구조랑 똑같다, 태그와 요소가 거의 90% 이며, 앞으로 배울 것들이 body문에서 모든것이 쓰인다.

 

# 오늘 첫 WEB 수업이 시작 되었다. 커리큘럼중에서 가장 난이도가 낮다고는 하지만 그날 배운건 꼭 그날 복습 하자

 

728x90
반응형
저작자표시

'교육 > HTML' 카테고리의 다른 글

HTML 개발자 수업 52일차(2) - frame, html5  (0) 2021.06.10
HTML 개발자 수업 52일차(1) - form  (1) 2021.06.10
HTML 개발자 수업 51일차 - image, table  (0) 2021.06.09
HTML 개발자 수업 50일차 - body  (0) 2021.06.08

관련글

댓글

티스토리툴바