우선 index.html이라는 파일을 만들어야 합니다. 다른 편집기를 사용하신다면 상관없지만 메모장을 사용하신다면 파일형식에는 모든파일 , 저장 옆에 있는 인코딩에는 UTF-8을 선택해서 저장해주세요.
잘 따라오셨다면 사용하는 브라우저 모양으로 파일이 형성되어 있을겁니다.
이제부터는 여기에 내용을 하나씩 채워보면 됩니다! 우선 맨 위에 적어야 하는 것은 html 선언입니다.
<!DOCTYPE html>
버전별로 사용하는 태그가 약간씩 다르기 때문에 우리가 html5를 사용한다는 것을 미리 알려줘야 합니다. 맨 위에 저런식으로 적는 이유입니다.
html문서는 html이라는 태그 안에 다른 태그들을 채워넣는 형식입니다. 즉, 이제 html5를 사용한다는 선언이 끝났으니 <html>태그를 밑에 추가하면 됩니다.
html /*에러때문에 꺽쇠를 넣지 못했습니다 ^^;*/
다른 태그들은 이 사이에 옵니다.
/html
html태그 사이에 들어가야하는 태그들이 또 2개 있습니다. 바로 <head>태그와 <body>태그입니다.
html /*에러때문에 꺽쇠를 넣지 못했습니다 ^^;*/
<head>
</head>
<boby>
</body>
/html
이런식으로 작성하시면 됩니다. 웹페이지에서 실제적으로 우리 눈에 보이는 것들은 모두 <body>태그 안에 들어가고 그 문서에 대한 설명을 나타내는 메타데이터들은 <head>태그에 들어갑니다.
이 부분은 지금 페이지가 어떤 페이지인지 나타내는 역할을 합니다. 그래서 헤드 태그 안에 <title> 태그를 쓰시고 사이에 내용을 넣으면 됩니다.
<title>이 부분이 그림에서 표시한 부분으로 나타납니다.</title>
또 한글로 작성하면 글자가 깨져보일수도 있습니다. 그럴땐 <head> 태그 밑에 <meta charset="utf-8">을 적어주면 깨지지 않습니다.
<head>
<meta charset="utf-8">
<title>....</title>
</head>
문자열 인코딩 방식에 utf-8을 사용하겠다는 것입니다.(메모장을 다른 이름으로 저장했던 분들은 이부분이 기억나실겁니다!)
이제는 <style>태그를 <title>태그 밑에 추가해주세요. 스타일 태그는 말 그대로 문서를 꾸미는 요소들을 안에 넣을 수 있는 태그(css 부분)입니다.
이제 <body>태그에도 내용들을 채워볼까요 ? <h1>태그는 큰 제목을 나타냅니다.(저번 포스팅에서 #과 똑같다고 했습니다 ㅎㅎ)
<body>
<h1>tic tae toe Gazua!</h1>
</body>
라고 적어주세요 !
잘 따라오셨다면 여기까지 완성입니다 ㅎㅎ !
다음 포스팅에서는 <body>태그의 나머지 부분을 채우고 id와 class를 알아보도록 하겠습니다.