반응형
안녕하세요 위키드 스마트입니다.
오늘은 웹 페이지의 기본 구조를 알아보겠습니다.
지난 번 강좌에서 기본 구조를 간략히 알아봤었는데요,
[이전 글 보기: https://sharingknowledge.tistory.com/180 ]
다시 한번 말씀드리면 모든 HTML 페이지는 아래와 같은 기본 구조로 되어 있습니다.
<!DOCTYPE html> 이것은 우리가 사용하는 문서가 html 임을 선언하는 문구입니다.
<html> html 문서는 <html> </html> 로 둘러싸여, 이 안에서만 입력된 내용들이 처리가 됩니다.
<head> 헤드는 <head> </head> 태그로 구성되는데, 웹 페이지에 대한 정보를 저장하는 곳입니다.
<title>Page Title</title> 헤드태그 안에 이렇게 타이틀 태그를 넣으면, 인터넷을 열 때 탭에 타이틀태그가 적힌 내용이 표시가 됩니다.
</head>
<body> 웹 페이지의 모든 내용이 여기에 표시가 됩니다. 브로우저 안에 표시되는 부분입니다.
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
자~ 위의 태그를 작성했을 때 나오는 화면은 다음과 같습니다.
아래 화면 보시면, 타이틀 태르 안에 page title 이라고 입력했던 부분이 웹 브라우저의 탭에 표시가 되는 것이 보이시죠?
그리고 웹 브라우져 본문 화면에 this is a heading 과 this is a paragraph 라고 잘 쓰여져 있는 것이 보이실 겁니다.
This is a Heading 은 헤더태그를 써서, 제목임을 강조했기 때문에 굵게 글자가 나온 것이고,
This is a paragraph 는 패러그래프 태그를 써서 단락임을 표시했기 때문에 바로 앞줄과 뒷줄이 모두 한칸씩 띄어져서 표기가 된 것을 보실 수 있을 겁니다.
html 문서 작성 시엔 다음을 주의하시길 바랍니다.
- 태그 이름은 대소문자를 구별하지 않습니다. 즉, <head> 나 <HEAD>나 같기 때문에 쓸데없이 대문자, 소문자 구분하시느라 불필요하게 애쓰시지 마시길 바랍니다.
- 시작태그와 종료 태그 사이의 연속된 공백은 하나의 공백으로 취급하오니, 띄어쓰기한다고 여러번 스페이스바 누르시지 말기를 바랍니다.
- 일부태그는 종료태크를 생략하더라도 올바르게 표시됩니다. 예를 들면 <p> 태그는 시작태그만 작성해도 제대로 표기됩니다. 그러나 많은 경우, 종료 태그를 생략하면 잘못된 결과를 초래하므로, 종료태그까지 꼭 작성해주시길 바랍니다.
html 코드 작성 시, 내가 꼭 기억하고 싶은 내용이 있다던가, 이 코드를 보는 다른 사람에게 꼭 전달하고 싶은 내용이 있다면
주석을 이용하시면 됩니다. 주석을 이용하시면, 코드 상에는 표시가 되나, 브라우저에는 표시가 안됩니다.
주석은
<!-- 내용 입력 --> 을 사용하시면 <!-- -->안에 입력된 내용은 브라우저에 표기되지 않습니다.
다음 글에서 텍스트 표시하는 방법, 이미지 표시하는 방법, 하이퍼 링크 이용하는 방법을 알아보겠습니다.
오늘은 빠이~
반응형
'웹프로그래밍' 카테고리의 다른 글
| HTML 리스트와 링크 만드는 법 (0) | 2019.02.10 |
|---|---|
| html 텍스트 표시 방법 (0) | 2019.02.08 |
| HTML 문서 구조 (0) | 2018.01.20 |
| 웹 프로그래밍 공부하는 순서 (0) | 2018.01.20 |
| 개발자 테크 트리 (0) | 2017.12.21 |