웹서버 (프로그램)
설치 위치:
C:\Program Files\Microsoft VS Code시작 메뉴 폴더:
Visual Studio Code추가 작업:
아이콘 추가:
바탕 화면에 바로가기 만들기(D)
기타:
"Code(으)로 열기" 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가
"Code(으)로 열기" 작업을 Windows 탐색기 디렉터리의 상황에 맞는 메뉴에 추가
PATH에 추가(다시 시작한 후 사용 가능)
줄바꿈여부 > on
설정 > click open > dubleClick으로 설정하면 더블클릭해야 파일이 열린다.
설정 > setting > 주석 색상, 글씨타입설정
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "comment",
"settings": {
"foreground": "#CCCCCC",
"fontStyle": "normal"
}
}
]
}
<!-- 주석 -->
<!--
XML -> DTD언어
- 현재 문서가 어떤 종류의 문서인지(문서유형)를 알려주는 역할
- 브라우저에게 알려줌
선언문(Declaration)
- HTML 선언
-->
<!DOCTYPE html> <!-- HTML5 -->
<!--
<head></head>
- 문서의 모든 내용을 감싸는 역할> 문서 자체
- 문서의 시작과 끝을 담당
- 루트 태그, Root Tag
<html> 자식
1. <head> 태그
2. <body> 태그
-->
<html lang="en">
<!--
<head> 태그
- 문서의 정보를 담고 있는 태그
- 브라우저에게 전달하는 정보(O), 화면에 보이는 출력 정보(X)
- 문서 머릿말 (일반사람이 볼 필요 없는 내부적으로 필요한 정보)
- 사람이 보는 정보(X)
-->
<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>
<!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>
<!--
ex02.html
HTML 문서 확장자
1. *.html
2. *.htm
공백문자, Whitespace
- 스페이스, 탭, 개행문자
- HTML 페이지 소스상에 존재하는 공백 문자열을 실행기(브라우저)가 처리하는 규칙
- 거의 모든 브라우저가 동일한 규칙으로 처리한다.
- 브라우저는 소스상의 연속된 공백 문자(종류와 상관없이)를 딱 1개의 스페이스로 치환해서 화면에 출력한다.
공백문자를 원하는 모습으로 화면에 출력하는 방법
1. 스페이스 출력
- 스페이스 1개당 > 엔티티(Entity) 1개 > (non-break space)
2. 개행문자 출력
- <br> 태그 사용
- line-break
3. 탭문자
- 없음
- 브라우저 창은 편집기가 아니라서 탭이 존재하지 않기 때문에
-->
하나 둘 셋
<br>
넷 다섯
<br>
여섯
<!--
교재 대용 사이트
- https://www.w3schools.com/
-->
</body>
</html>
<!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>
<!--
HTML 구성 요소
---------------------
1. 태그(Tag), 요소(Element)
2. 속성 (Attribute)
3. 텍스트 (PCDATA)
--------------------- 1,2,3번이 가장 중요
4. 주석 (Comment)
---------------------
5. 선언문 (Declaration)
6. 엔티티 (Entity)
--------------------- 5,6번은 비중이 거의 없음
1. 태그(Tag), 요소(Element)
- 예약어 (명령어)를 <>로 묶어놓은 요소
- HTML의 문법을 구성하는 주요 요소
- HTML 문서의 골격(뼈대)을 만드는 역할(레이아웃을 잡는 역할) + 데이터(문자열, 이미지)를 출력하는 역할
- 각 태그마다 역할 부여 -> 출력되는 형태나 기능이 다르다.
HTML 태그 표현 방식
a. <태그명></태그명>
- 쌍태그
- <태그명> : 시작 태그
- </태그명> : 끝 태그
- 영역을 가지는 태그({}역할)
ex) <html></html>, <head></head>, <body></body>
b. <태그명>
- 단독태그, 빈태그
- 영역을 가지지 않는 태그
- 표기법
1. <br>
2. <br></br>
3. <br/>
- HTML 4.01: 태그를 <BR> 대문자로 적도록 권장함. -> 옛날 자료
- XHML 1.0: 태그&속성 모두 소문자로 적도록 권장함. -> 모든 태그는 시작태그와 끝태그를 적도록 권장 <br></br>은 너무 길어서 -> <br/> -> <br />
- HTML5: <br>로 쓰기로 정착 <br />로 써도 무방함.
HTML 태그 내용의 형식, Content Type
- <시작태그>내용</끝태그>
- 내용이 가질 수 있는 패턴
a. 자식 태그
- 내용의 영역에 또 다른 태그가 올 수 있다.
- 텍스트는 올 수 없다.
ex) <html>, <head>
b. PCDATA(= 문자열)
- Pased Character Data
- 브라우저에 의해서 해석되는 데이터(문법 검사의 대상이 되는 데이터)
- 내용의 영역에 문자열만 올 수 있다.
- 자식 태그는 올 수 없다.
ex) <title>
c. Empty
- 내용의 영역에 아무것도 오지 않는다.
- 자식 태그(x), 문자열(x)
- 빈태그, 단독 태그
ex) <meta>, <br> : 사용 가능한 표현
ex) <meta></meta>, <br></br> : 사용 가능한 표현 -> 귀찮아서 안씀
d. Mixed, 혼합형
- 내용의 영역에 모두 포함한다.
- 자식 태그(O), 문자열(O), Empty(O)
- 1 + 2 + 3
ex) <body>, 대부분의 태그
2. 속성 (Attribute)
- 데이터의 쓰임 : 태그의 성질을 정의하는 역할
- 태그가 가지는 데이터의 한 종류
- 속성 표기법
a. <시작태그 속성명="값"></끝태그>
b. <시작태그 속성명="값" 속성명="값" 속성명="값"></끝태그>
c. <시작태그 속성명="값"></끝태그>
d. <시작태그 속성명='값'></끝태그>
e. <시작태그 속성명=값></끝태그> : HTML에 한해서 ""생략가능 (XML에서는 에러)-> 사용금지!
f. <시작태그 속성명="값"> : 단독태그
g. <시작태그 속성명="값 값 값"> : 속성값을 여러개 갖는 경우
3. PCDATA, 문자열, 텍스트
- 태그가 가지는 데이터의 한 종류
- 데이터의 쓰임 : 주로 화면에 출력된다.
- 시작태그와 끝태그 사이의 모든 문자열
5. 엔티티(Entity)
- 미리 정해져있는 표현을 소스에 표기하면, 브라우저와 약속된 표기법을 통해 표현하는 요소
- 해석하면 안되는(파싱하면 안되는) 문자들을 화면에 출력하는 역할(일부 기능)
- &엔티티명; //Built-in Entity
a. // 공백문자표현
b. < // '<' -> less than
c. > // '>' -> greater than
d. & // '&'
e. " // "
f. ' // '
g. © //©
h. &#문자코드;
-->
<!--
HTML 4.01 -> HTML5
- 추가된 태그(다량)
- 소멸된 태그(소량) -> legacy tag -> 앞으로 소멸 예정이니까 사용하지 말라고 권고.
-->
외부문자열 <font color="red" size="7">폰트입니다.</font> 외부문자열
<div>오늘은 <a>태그에 대해서 수업을 합니다.</div>
<div>©Copyright 2021 test.com All right reserved.</div>
<div>A</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!--
<head>태그
- 문서의 내부 정보를 가진다.
- 브라우저에게 전달한다.
<head> 태그의 자식
1. <meta>
- 페이지와 관련된 여러가지 정보를 저장한다.(인토딩, 장치 정보, 저자, 키워드, 제작 툴..)
2. <title>
- 문서의 제목
- PCDATA만 가질 수 있다.
- 반드시 기입해야한다.
- 역할
a. 브라우저의 타이틀바(제목표시줄)에 출력된다.
b. 검색 사이트의 결과 제목으로 사용된다. + 검색 사이트의 수집 대상이 된다.
c. 브라우저의 북마크 제목으로 사용된다.
3. <style>
- css
4. <script>
- Javascript
5. <link>
- css
6. 기타 등등
검색 사이트(엔진)
1. 디렉토리 서비스
- 야후 > 각종 국내 사이트
2. 키워드 검색 서비스
- 알타비스타 > 심마니, 엠파스 > 대부분 사이트(구글)
- 전 세계 사이트들을 돌아다니면서 정보를 수집하는 프로그램 > Bot, Spider > 정보 수집 > 정형화 > DB 저장(키워드 + URL)
-->
<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">
<meta name="author" content="홍길동"> <!-- 개발자명 -->
<meta name="keyword" content="HTML,태그,수업,예제"> <!-- 페이지 키워드 -->
<meta name="description" content="head 태그 예제입니다."> <!-- 문서에 대한 설명 -->
<meta name="generator" content="Visual Studio Code"> <!--개발 도구 -->
<title>제목입니다.</title>
</head>
<body>
<!--
ex04_head.html
-->
예제입니다.
</body>
</html>