<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML 에 대해서 첫 포스팅을 시작하겠습니다. 먼저 저의 개발환경은 WebStrom으로 실행을 하였고 프로젝트를 생성하여
첫 번째 HTML 파일을 만들어 시작을 하였습니다 ^^ !
먼저 HTML 을 만드는 가장 기본적인 항목부터 알아갈탠데요 !
HTML파일 생성시 나오는 저 구문들에 대하여 하나씩 풀어 해쳐보겠습니다 !
<!DOCTYPE html>
<!--
문서의 Type Version 명시 HTML5
- DTD(Document Type definition)는 이 문서의 버전을 나타냄
- HTML5 버전은 간단하게 <!DOCTYPE html> 표기
- DTD가 없으면 브라우저가 HTML5 로 인식 X
-->
<html lang="ko">
<!-- 브라우저가 이 문서의 언어를 인식(번역) -->
<head>
<meta charset="UTF-8">
<!-- 한국어 인코딩을 위한 UTF-8 설정 (한글 깨짐 방지) -->
<!-- meta 요소란 부가적인 설명(기능)을 써주기 위하여 기재 -->
<title>Title</title>
</head>
<body>
<h1>다음</h1>
<h2>검색</h2>
<h3>인기 검색어</h3>
<h2>주요 서비스</h2>
<h2>전체 서비스</h2>
<h2>오늘의 정보</h2>
<h2>미디어</h2>
<h3>뉴스</h3>
<h4>많이 본 뉴스</h4>
<h4>꼼꼼히 본 뉴스</h4>
<h4>댓글 많은 뉴스</h4>
</body>
<!--
HTML은 문서입니다.
- 문서이기 때문에 구조가 필요합니다.
- 그 구조(책으로 보면 목차)를 제목요소들이 담당합니다.
- 제목 요소들은 h1 ~ h6 요소가 있습니다.
- 요소는 영어로 element
-->
</html>
<!--
HTML 문서는 head, body, title 요소로 구성
-->
아 ! 한 가지 HTML 에서는 주석을 <!-- --> 이런 식으로 사용을 한답니다 !
주석이란 코멘트라고 말을 할 수있는데요 ! 개발자들이 주석을 달아 어떤 요소라던지 어떤 함수라던지 그 부분에대하여 설명을 써놓게되면 다른 개발자가 보았을때 그 프로그램을 다룰 수 있도록 혹은 자신이 후에 보았을때 유지 및 보수를 위하여 달아놓은 코멘트 라고 할 수 있습니다!
개발자가 아니더라도 개발을 하는 분들 코딩하시는 분들은 주석을 달아놓는 습관이 중요한것 같습니다 ! 저도 예전에 주석을 안달아 놓고 몇일만 지나도 까먹고 그러더라구요 !! ㅎㅎ
위 문장과 다른 것과 몇가지 추가된 사항이 있는데요? 기본적으로 다음 웹사이트를 한번 따라해 보려고 작성을 해본 것입니다.
아래 부분이 많이 짤렸는데 이 사진은 진짜 다음 이라는 사이트에 CSS를 제거하고 구조및 데이터를 보여주는 html 의 마크업 부분입니다 !!
CSS 를 제거하여 보는 툴은 많이 있는데 그중에 저는 크롬이나 파이어폭스 앱중에 WebDeveloper를 사용하고 있습니다 ㅎㅎ
이런식으로 구성이 되어있는 다음사이트를 살짝 따라하여 코드를 입력해보고 한번 실행을 해보았는데 어떤 화면이 나올까요 ?
WebStrom을 실행하는 방법은 단축키를 이용해도 되며, 원하는 브라우저 항목을 선택하시면 됩니다 !!
우리가 기재한 코드를 보면 여러 가지 많이 써놨는데
<!-- --> 이 부분은 주석으로 전혀 화면에 나타나지 않았습니다. .
하지만 요소 안에 써놓은 항목은 모두 화면에 나타나졌네요
브라우저에서 F12 키를 누르게 되면 개발자도구라고 나오게되는데
개발자 도구를 이용해서 확인을 해볼까요 ?
개발자 도구를 사용해서 확인 해본 결과
주석 부분은 써져있지만
화면에 출력은 안되는 것을 확인 해볼 수 있습니다.
이처럼 정말 주석은 많은 부분에서 활요하게 되는데요
우리가 많이 사용하는 포털인
naver.com 및 daum.net 에도
개발자 도구를 통해 보면 주석이 달린 것을 확인 할 수 있을 것입니다!
이 부분은 실제 네이버 포털에 대한 코드입니다. 아직 안배운 항목도 있지만 벌써 익숙한 여러 단어들이 보이네요 ! 그리고 네이버 역시 주석을 활용한다는 부분을 알 수 있습니다.
이번 포스팅은 html에 대하여 첫 걸음마를 내딛는 포스팅 이었습니다.
다음 포스팅 부터는 요소를 점점 추가를 하여 설명을 더 붙이고 어떤 요소들이 존재하는지 알아 보겠습니다.
'Front-end > HTML' 카테고리의 다른 글
| 5. 다음 UI 만들어보기 (0) | 2018.07.23 |
|---|---|
| 4. Form 요소 와 엔티티 기호 (0) | 2018.07.23 |
| 3. 이미지와 하이퍼링크 (0) | 2018.07.22 |
| 2. 리스트 관련 요소들 (0) | 2018.07.22 |
| 1. 제목 요소 및 p와 br요소 (0) | 2018.07.22 |