비전공자 HTML ② - Title&Body
텍스트를 작성하여 웹에 구현하기, 그리고 Tag의 필요성
1. VS Code에서 폴더 열기
VS Code - 파일 - 폴더 열기를 눌러 문서 작성을 시작할 폴더를 열어준다.
나는 바탕화면에 html-css라는 폴더를 미리 만들어 두고 열었다.
2. index.html 파일 만들기
폴더가 열렸으니, 새 파일 추가하기 버튼을 누르고 index.html을 입력하고 엔터를 눌러준다.
3. Emmet 명령어 사용해보기
Emmet 명령어는 HTML의 기본틀을 불러와주는 명령어라고 이해하면 된다.
문서에 !를 입력하면 위 사진과 같은 토글이 나타난다. 이상태에서 Tab 키를 바로 눌러주자.
Emment 명령어 요약: 우측 공간에 ! 입력 -> 바로 Tab 누르기
그럼 위와 같이 잘 불러와지는 것을 확인할 수 있다.
두 번째 줄을 보면 <html lang="en">이라고 적혀있을 것이다. 여기서 en(영어)를 ko로 바꾸어 입력해주자.
해당 작업은 문서의 언어를 명시하는 과정이다. 폰트와 접근성 등에도 영향을 미치고, 나중에 내가 만든 웹페이지가 구글&네이버에 잘 노출되기 위해서도 중요하니 변경해주자.
<Body> 아래에는 웹에서 나타났으면 하는 텍스트를 한 줄 써보자. 나는 비트코인 떡상 기원이라고 작성했다.
모두 변경했다면, 윈도우는 Ctrl + S, 맥북은 Command + S 한번 눌러주고.
이전 편에서 설치하라고 언급했던 플러그인들을 다 설치했다면, 화면 좌측의 index.html을 우클릭해보자.
그리고 "Open with Live Server"를 클릭하자.
웹에서 내가 입력한 텍스트가 잘 구현된 것을 볼 수 있다.
ㅊㅋㅊㅋ. 이제 어디가서 웹페이지 만들어 봤다고 해도 그짓말 아니다.
이번에는 <body> 아래에 기존에 써두었던 텍스트를 작성하고 아래 내용을 복사하여 붙여 넣거나, 직접 입력해보자. 띄어쓰기와 줄 바꿈까지 똑같이 옮겨 보자.
<아래 내용 복사 혹은 따라 쓰기>
body 아래에 쓰는 내용들에는
이렇게 줄 바꿈도 들어가 있을 것이고
어떨 때는 띄 어 쓰 기도 들어가겠죠.
하지만 브라우저는 쿨하게 무시 해버린답니다.
<위 내용을 복사하거나 따라 쓰고 기존과 똑같이 index.hmtl 파일을 우클릭하여 Live Server로 열어보세요.>
ㅋㅋ. 줄바꿈이고 띄어쓰기고 Tab이고 다 무시해버리는 모습.jpg
킹받는다.
Tag(태그)/구문 사용하기
이제 Tag에 대해 배울텐데, 아까 썼던 body의 내용들도 다 지우고, 이번엔 아래 텍스트를 복사하거나 따라 쓴 뒤 열어보자.
<아래 내용 복사 혹은 따라 쓰기>
body 아래에 쓰는 내용들에는<br><br>
이렇게 줄 바꿈도 들어가 있을 것이고<br><br>
어떨 때는 띄어 쓰기도 들 어가겠죠.<br><br>
이번에는 잘 되죠.
<위 내용을 복사하거나 따라 쓰고 기존과 똑같이 index.hmtl 파일을 우클릭하여 Live Server로 열어보세요.>
이번에는 잘 된다.
줄바꿈과 공백(스페이스)을 통한 띄어쓰기 뿐만아니라, 제목의 단계를 설정하거나 문단을 바꾸는 태그들 역시 존재한다.
다음 장에서 다양한 태그와 구문에 대해 배워보자.
