네이버 빈 화면에 마우스 오른쪽 버튼→검사
네이버 웹페이지는 어떻게 되어 있는 지 한 번 보기!
Always match Chrome’s language 파란 버튼 누르면 한글로 보인다.
- ?
- 웹 표준
-웹사이트를 만들 때 지켜야 하는 약속
- HTML 기본 문서 구조
- 태그
- 간단한 HTML 문서 만들기
- HTML 문서 기본 구조 살펴보기
- <body> </body> → 눈에 보이는 출력하는 기능, 사이트에 대한 정보가 담겨져 있다. 정보를 정의한다.
- <html>~</html>
- → /는 생략 가능 ex) <meta/> → <meta>
- 여는 태그 닫는 태그
- 웹 문서에서 특수 문
< 실습 >
d 드라이브 조정인 폴더에 1. 웹표준 기술 폴더 만들고 그 안에 01 폴더 하나 더 만들기
VSCODE=visual studio
vscode 키고 파일에 오픈 폴더로 01 폴더 열기
ex01.html 파일 하나 만들기
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
→ html 기본 구조
<!DOCTYPE html> → HTML 문서 버전을 알려준다. 이건 HTML5 버전이다.
<html>
<head>…</head> → 보이지 않는 부분 정의/웹 페이지 정보(meta태그→닫는 태그 없이 하나로 있다.)/자원정의(css, js)
<body>…</body> → 보이는 부분을 정의/
</html>
하이퍼텍스트 : 웹 사이트 링크를 클릭해 다른 문서나 사이트로 즉시 이동하는 기능
마크업 : 태그(tag)
meta 태그 → 정보를 알려준다.
VSCODE 실행 = F5키 누르면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body></body>
</html>
→ 보이지 않는 부분인 head에 코드를 넣었기 때무에 결과 값이 아무 것도 안 나온다. 빈 화면이 나온다. 그 화면 마우스 오른쪽 버튼, 검사 누르면 내가 쓴 코드가 나온다.
VSCODE 실행 끌 때 위에 있는 빨간 네모 누르면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>제목!</h1>
</body>
</html>
보이는 부분인 body에 코드를 넣었기 때문에 결과값이 제목! 으로 나온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습!</title>
</head>
<body>
<h1>제목!</h1>
</body>
</html>
그러나 head 태그 안에 유일하게 보이는 부분이 있다. title 태그는 본문에는 안 보이지만 웹 타이틀로 이름이 보인다.
- 웹 문서에서 특수 문자 및 특수 기호 사용하기 (엔티티 문자)
<명칭> → 태그
a>10 을 입력하고 싶은데 태그 안에 넣으면 **<a>**10> 안에 있는 >를 태그로 인식한다. 그래서 엔티티 문자를 사용해야한다.
< → < less than(작다)
> → > greater than 많다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습!</title>
</head>
<body>
<h1>제목!</h1>
<a> 10
</body>
</html>
→ 실행 결과
제목!
<a> 10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습!</title>
</head>
<body>
<h1>제목!</h1>
<a> 10
<h1> 내용1 내용2 </h1>
</body>
</html>
두 번째 h1에 내용 1과 내용 2 사이에 공백 여러개를 1 개로만 인식한다.
공백 여러개 → 공백 1개로 인식
→ 공백 1개
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습!</title>
</head>
<body>
<h1>제목!</h1>
<a> 10
<h1> 내용1 내용2 </h1>
</body>
</html>
요렇게 써줘야 공백이 생긴다.
특수 기호 정리
Entity Name Result
| 공백 1개 | |
| < | < |
| > | > |
| & | & |
| " | " |
| ' | ' |
| ¢ | ¢ |
| £ | £ |
| ¥ | ¥ |
| € | € |
| © | © |
| ® | ® |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습!</title>
</head>
<body>
<h1>제목!</h1>
<a> 10
<h1> 내용1 내용2 </h1>
©
</body>
</html>
→ 실행결과
제목!
<a> 10
내용1 내용2
©
한글 자음+한자키 ⇒ 특수문자가 나온다.
보통 ㅁ 입력하고 한자키 누름 밑에 하트 누르면 아이콘과 이모지도 나온다. → 버전에 따라 하트 누르는 거 없을 수도 있다. → 윈도우버튼(시작버튼) + . 하면 나온다.
오류는 아니고 해결한 것!
한글 자음+한자키 ⇒ 특수문자가 나온다.
보통 ㅁ 입력하고 한자키 누름 밑에 하트 누르면 아이콘과 이모지도 나온다. → 버전에 따라 하트 누르는 거 없을 수도 있다. → 윈도우버튼(시작버튼) + . 하면 나온다.
구글 검색으로 해결!!!
'WEB > HTML5+CSS3' 카테고리의 다른 글
| 6. 텍스트 관련 스타일(HTML5+CSS3) (2) | 2024.03.26 |
|---|---|
| 5. CSS 기초(HTML5_CSS3) (0) | 2024.03.25 |
| 4. 폼 관련 태그들(HTML5_CSS3) (0) | 2024.03.22 |
| 3. 이미지와 하이퍼링크(HTTP5+CSS3) (0) | 2024.03.21 |
| 2. 텍스트 관련 태그들(HTML5+CSS3) (0) | 2024.03.20 |
