비주얼 스튜디오 코드를 설치해 보았으니 본격적으로 html을 만들어 보는 시간을 가져보도록 하겠습니다.
복사하여 붙여 넣기 하시지 마시고 직접 작성하여 html 이 손에 익도록 하셔야 합니다. 저번 포스팅에서는 기본적인 구조를 만들어 보았습니다. 비주얼 스튜디오 코드를 실행하여 html을 작성하여 보도록 하겠습니다.
file - new file - ex01.html 로 저장하고 시작하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
브라우저에게 이것의 타입이 HTML 웹 페이지라고 알려주는 문장입니다. 선언한다고도 합니다.
<html></html>
html 태그로 모든 내용이 이 구문안에 작성이 됩니다.
※태그(tag)는 <> 안에 둘러싸여 있는 형식입니다. <tag>내용</tag> 의 규칙으로 되어있습니다.
<head></head>
head 태그는 웹 페이지에서 안 보이는 정보들을 작성하는 영역입니다.
<meta charset="UTF-8">
html 에서 utf-8는 유니코드를 위한 가변길이 문자 인코딩 방식중 하나입니다.
html 에서는 여러가지 인코딩 형식이 있습니다. utf-8 을 설정하지 않고 브라우저를 실행하면 인터넷 브라우저 마다 한글이 깨질 수도 있고 안깨질 수도있습니다. 이러한 한글이 깨지는 현상을 막기위해 작성하는 코드입니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
반응형 웹 뷰포트 입니다. 사용자의 화면에 때라 크기를 바꾸기 위한 사전작업입니다. 아직 사용하지 않는 기능이니 현재는 삭제하시고 진행하셔도 무방합니다.
<title></title>
웹페이지의 제목을 나타내는 태그입니다. 브라우저의 상단 탭부분에 이름을 적을 수 있도록 할 수 있습니다.
<body><body>
웹 페이지에 직접 보여주는 내용을 작성하는 영역입니다. 웹페이지 안에 내용들을 모두 여기에다가 작성하시면 됩니다.
body 태그 안에 한번 작성해 보겠습니다.
<body>
안녕하세요. 반갑습니다.
열심히 화이팅!
</body>저장을 하신 다음 크롬으로 실행하여 보겠습니다. 저장된 위치에서 파일을 찾아 더블클릭하거나 비주얼 스튜디오 코드에서 웹브라우저로 끌어다 놓으면 자신이 만든 코드를 확인할 수 있습니다.
코드에서 작성했던 내용과 브라우저에서 실행된 내용이 조금은 다르다는 것을 볼 수 있습니다.
html에서의 들여 쓰기와 띄어쓰기는 아무리 많이 입력하더라도 웹페이지에서는 단 한 칸 띄어 쓰는 것으로 출력됩니다. 그렇다면 어떻게 해야 들여쓰기와 띄어쓰기가 가능해 질수 있을지 한번 알아보도록 하겠습니다.
<br /> 혹은 <br>
안녕하세요 반갑습니다. <br>
열심히 화이팅!
br 태그는 내용을 둘러싸지 않고 하나만으로 끝이 납니다. 이런태그들을 'Self Closing Tag' 라고 하는데 하나만 사용하는 태그라고 보시면 되겠습니다.
자 이제 <br>태그를 넣고 실행해 보도록 하겠습니다.
윗부분생략
<body>
안녕하세요. 반갑습니다. <br>
br 를 사용하였습니다.
</body>
띄어쓰기는 태그가 아닌 다른 방식으로 나타납니다. 다른 포스팅에서 다룰 것이며 여기까지 html에 본격적인 첫걸음을 내디뎠습니다. 오늘은 여기까지이며 다음 포스팅에서 더 유익한 내용으로 찾아뵙겠습니다. 감사합니다. 또 만나요!
'IT' 카테고리의 다른 글
| 03.HTML 기본,요소,속성 (0) | 2020.03.25 |
|---|---|
| 02.Eclipse 설치 (JAVA 개발환경 구축) (0) | 2020.02.11 |
| 01.JAVA 개발 사전 준비 (0) | 2020.02.10 |
| 00. JAVA 를 시작하기앞서서 (0) | 2020.02.09 |
| 01.HTML 개발준비하기(Visual Studio Code 설치) (0) | 2020.02.07 |
댓글