안녕하세효.
오늘부터 HTML강의를 시작할 그저그런 사람입니다.
디테일한 부분(메타태그, sass 등등)은 후반에 따로 다루도록 하고 지금은 화면에 그려나가는걸 강의해보려고 합니다.
아마.. css를 메인으로 다룰 것 같습니다.
사실 마인크래프트 내에서는 크게 쓸 일이 없지만..
blog, tistory, github.io 등등 커스텀이 가능한 사이트에서 입맛대로 바꾸고 수정할 수 있습니다.
먼저 제가 사용하는 툴은 Visual Studio Code입니다. 줄여서 VS Code라고 하지요~
그외에도 atom, edit puls 등등 많은데.. 저는 아톰이나 vs code를 추천드립니다.
그리고 우리는 이 강의를 따라하면서 수시로 작업물을 확인해야 합니다.
그래서 vs code 확장기능을 설치해주도록 하겠습니다.
좌측 메뉴에서 저 네모로 생긴 버튼을 눌러주고 검색에 open in browser를 설치해줍니다.
같은 방법으로 한글 패치가 가능합니다.
korean이라고 치면 되겠습니다.
서론이 길었습니다.
그럼..
시작해보도록 하겠습니다!!!
먼저 폴더를 만들고 html파일을 만들어주도록 하겠습니다.
맨 왼쪽에 있는 문서 형태의 버튼을 눌러주고 파일명은 index.html을 써줍니다.
여기서 주의 할 점!
***반드시 ' .html ' 이라는 확장자가 들어가야합니다!***
그 후 기본틀을 잡아 주도록 합니다.
여기서 중요한점!
<!DOCYPE html> 은 이 문서가 html문서라고 선언을 해주는 것입니다.
html5가 되면서 이렇게 간략하게 적을 수 있게 바뀌었습니다.
전버전까지 이야기를 하게 되면 길어지니까 패스하고 궁금하시면 구글신이 기다려주고 있습니다.
<html>과 </html>은 html 문서의 시작과 끝을 이야기합니다.
<head></head>안에는 메타태그와 title, style(css), java script, 각종 링크가 들어가게 됩니다.
메타태그는 종류가 너무 많아서 구글신에서 물어보도록 합시다.
<title></title>은 브라우저를 켰을 때 최상단에 있는 탭의 이름입니다.
위의 사진처럼 말이죠.
자. 틀이 잡혔으니 텍스트를 써보겠습니다.
우리가 인터넷을 들어갔을 때 눈에 보이는 요소들은 모두 <body>태그안에 들어가 있습니다.
<head>태그 안에 열심히 글을 써도 보이지 않습니다.
그럼 <body>태그 안에 글을 적어주도록 하겠습니다.
HELLO WORLD! 를 적어주고 브라우저로 확인을 해보겠습니다.
확인 방법은 아래 이미지와 같이 하시면 됩니다.
html 파일을 우클릭하면 open in browser가 있습니다.
이걸 클릭하면 컴퓨터에서 기본 설정으로 되어있는 브라우저 창이 열리게 됩니다.
(제가 사용하는 브라우저는 오페라GX 입니다.)
위의 이미지처럼 보인다면 웹사이트 제작에 한발자국 다가가셨습니다.
고생 많으셨습니다.
다음 강의 부터는 본격적으로 태그를 사용해서 작성하는 방법과 css를 사용해서 style을 넣어 꾸며보도록 하겠습니다.
궁금하신점은 언제든 질문해주세요~
댓글이 없습니다.
새로운 댓글을 등록해 주세요!