1. 에디터를 실행하여 새파일을 만든다.
- File > New File
새파일을 만들면, 다음과 같이 'Untitiled'라는 이름의 새 탭이 생성됨.
2. 생성된 Untitled 문서를 저장한다.
- File > Save (또는 Ctrl + S / Cmd + S)
- 저장시 파일 경로는 개인이 편한 곳으로 설정.
- 파일명 기재시 확장자 명을 html로 적어줘야 함.(예 : test.html)
- 나는 임의로 test라는 폴더를 생성 후 그 폴더 안에 test1.html 파일로 저장을 했음.
3. 에디터를 통해 test1.html 문서를 작성한다.
- 참고로 저장한 test1.html 파일을 더블클릭 하여 열어보면 브라우저 창이 뜨는데 아무것도 보이지 않을 것이다.
(해당 문서에 아무것도 작성하지 않았기 때문에..!)
- 일단 html 문서를 작성하기 위해서 다음과 같이 문서에 적어본다.
(의미는 이후에 찾고 일단 그대로 적어보도록 하자)
<!DOCTYPE html> <!-- Document type 선언 => html5를 이용한다고 선언함 -->
<html lang="ko"> <!-- html 문서의 언어 선언 : ko=한국어 -->
<head> <!-- head 안에는 meta data나 title 태그를 넣는다 -->
<meta charset="UTF-8">
<title>제목</title>
</head>
<body> <!-- 실제 브라우저에 노출되는 내용을 body 안에 담는다 -->
내용
</body>
</html>
- <head></head> 안에 있는 내용은 브라우저 상에 나타나지는 않는다.
그런데 <title></title> 태그 안에 있는 텍스트가 해당 브라우저의 제목으로 표시된다.
- 참고로 html 문서 내에 주석은 <!-- 필기내용 -->을 사용한다. 주석을 사용하면 브라우저가 해당 문서의 코드들을 읽어드릴때 해당 주석은 읽지 않는다. 그래서 문서 내에 특별히 참고사항을 적어야 할때는 <!-- --> 이 주석 안에 원하는 내용을 넣으면 된다.
일단 오늘은 이렇게 html 문서를 만들고 html 문서 작성을 준비하는 것 까지만 해 보았다.
실제로 웹퍼블리싱을 배우는 사람들은 빨리 브라우저에 예쁜 웹사이트를 구현하고 싶은 마음일텐데,
처음에는 저렇게 브라우저에 텍스트만 나오는 정도만 하다보니 답답한 부분도 있을텐데,
하나하나 배우다보면 브라우저에 웹사이트 구현을 할 수 있을 것이다.
[참고사항]
1. html은 문서라는 것을 잊지 말자. 후에 웹페이지 작업을 하다보면 그냥 화면에 예뻐보이게만 작업하면 된다고 생각할 수 있는데, html파일에 들어가는 태그,내용 모두 문서의 흐름에 따라 적절하게 사용해야됨을 기억하자!
2. 전체적으로 큰 단위부터 작은 단위로 좁혀들어가면서 쌓아간다는 생각으로 문서를 작성하면 된다.
위에 문서준비를 위한 몇가지 코드를 적어놓은 것 만 봐도 크게는 <head></head> 와 <body></body>가 있고
<head></head> 안에 일부 코드가 존재하고, <body></body> 안에도 앞으로 수많은 코드들이 들어갈 것이다.
그래서 코드를 작성할때 한편으로는 코드를 통해 블럭을 쌓아간다 생각하면 좋을 것 같다.
'지식공유 > html,css,js' 카테고리의 다른 글
| DOM(Document Object Model), BOM(Browser Object Model) (0) | 2022.07.12 |
|---|---|
| HTML 노드의 종류(웹퍼블리싱/프론트엔드/html/css/javascript/기초) (0) | 2022.07.12 |
| 코드 에디터 : Sublime Text3 (0) | 2020.06.13 |
| HTML과 CSS (0) | 2020.06.03 |
| 웹표준, 웹접근성 (0) | 2020.06.02 |
댓글