[HTML&CSS] 1. HTML의 큰 뼈대와 head 영역

2022. 8. 5. 14:46

728x90

HTML의 뼈대

html은 이런 뼈대를 가진다. 각 코드의 의미를 설명하자면,

<!DOCTYPE html>
<html lang="ko">
    <! 문서의 정보를 작성하는 영역>
    <head>
    
    
    </head>
    
    <! 사용자에게 실제로 노출되는 영역>
    <body>


    </body>
</html>

html 버전을 웹 브라우저에 알려주는 코드이다.

<!DOCTYPE html>

html 영역을 표시하는 코드이다. 주로 사용하는 언어가 한국어라는 뜻이다.

<html lang="ko">

</html>

html에서 한 줄의 주석을 작성할 때는

<! 주석으로 인식하는 내용>

주석이 여러 줄일 때는

<!--
    주석으로 인식하는 내용
    주석으로 인식하는 내용
-->

과 같이 작성한다.

head 태그는 html의 정보를 구현하는 영역이다.
body 태그는 웹 페이지 상에 보이는 글자들을 구현하는 영역이다.

<! 문서의 정보를 작성하는 영역>
<head>

</head>

<! 사용자에게 실제로 노출되는 영역>
<body>

</body>

그럼 head 영역에는 어떤 정보들을 어떻게 작성할까?

head 영역에서 작성하는 것들

1. title 태그

<head>
    <title>Title</title>
</head>

이렇게 작성하면,

페이지에 띄울 제목을 바꿀 수 있다.

2. meta 태그

<head>
    <meta charset="UTF-8">
</head>

UTF-8로 인코딩을 한다는 말인데, 한글이나 특수문자로 입력된 웹페이지가 깨지지 않도록 하는 태그이다.
charset 속성 외에도 name, content 속성이 있는데 이들은 웹에서 보이는 영역을 바꾸지는 않고, 웹페이지의 정보를 작성하여 검색엔진에 도움을 준다.

3. style, script 태그

html 내부에서 css, javascript를 작성하고 싶을 때는 head 영역에서 style, script 태그를 사용해 작성한다. style 태그와 script 태그를 사용한다면,

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport">
        <title>CSS/JS</title>
        
        <!--
            내부 스타일 시트: html 내부에 css 코드 작성
        -->
        <style>
            h1{color:greenyellow;}
            h2{color:rgba(255,0,200,0.5);}
            h3{color:#0000ff}
            p{color:blue;}
        </style>
        <!--
            내부 스크립트: html 내부에 js 코드 작성            
        -->
        <script>
            const judgeName = () => {
                let name = prompt("환영합니다. 이름을 입력하세요");
                if (name != null && name.length == 3) {
                    let res = confirm(`${name}님이 확실합니까?`);
                    if (res) {
                        alert(`${name}님, 인증되었습니다.`);
                        return;
                    }
                }
                alert("인증에 실패했습니다.");
                judgeName();
            }
            judgeName();
        </script>
    </head>
    
    <body>
        <h1>css 실습 기초</h1>
        <h2>css 실습 기초입니다.</h2>
        <h3>css를 배워봅시다.</h3>
        <p>안녕하세요. ggyuchive입니다.</p>
    </body>
</html>

이 코드를 이해 못해도 좋다. 그래도 어떤 코드인지 궁금해할 사람들을 위해, 실행 화면을 보여주자면

대충 이런 간단한 기능을 구현했다.

이렇게 작성해 <style> </style> 사이의 코드를 css로, <script> </script> 사이의 코드를 js로 작성할 수 있다는 것만 알면 된다. 이렇게 html에서 css와 js를 쓰는 것을 내부 스타일 시트/내부 스크립트라고 부른다. 보통 프로젝트급 웹 페이지를 만들 때는 이렇게 3개의 언어를 짬뽕해 한 페이지에 적는 것은 어지럽고 유지보수도 어렵기 때문에 .html, .css, .js로 파일을 나눠서 작성한다.

위 코드를 3개로 나눈다면,

html 파일

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport">
        <title>CSS/JS</title>
        <!--외부 스타일 시트-->
        <link href="style.css" rel="stylesheet">
    </head>
    
    <body>
        <h1>css 실습 기초</h1>
        <h2>css 실습 기초입니다.</h2>
        <h3>css를 배워봅시다.</h3>
        <p>안녕하세요. ggyuchive입니다.</p>
        <!--외부 스크립트-->
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

style.css

h1{color:greenyellow;}
h2{color:rgba(255,0,200,0.5);}
h3{color:#0000ff}
p{color:blue;}

main.js

const judgeName = () => {
    let name = prompt("환영합니다. 이름을 입력하세요");
    if (name != null && name.length == 3) {
        let res = confirm(`${name}님이 확실합니까?`);
        if (res) {
            alert(`${name}님, 인증되었습니다.`);
            return;
        }
    }
    alert("인증에 실패했습니다.");
    judgeName();
}
judgeName();

와 같이 나눌 수 있다. html 상에서 style.css, main.js 파일을 연결해야 이 코드들이 실행 가능하다. 외부 스타일시트 코드는 head 영역에, 외부스크립트는 body 맨 끝부분에 적는 것이 좋다고 한다. (이유는 나도 모른다.)

다음 글에서는 body 영역에서 쓰는 태그들에 대해 알아보겠다.

728x90

저작자표시

'Web' 카테고리의 다른 글

Freecodecamp 사용 후기 (0)	2023.03.25
[HTML&CSS] 2. body 영역과 여러 태그들 (0)	2022.08.05
웹 개발 온라인 IDE 환경 구축하기 (사지방에서 웹 공부하기) (0)	2022.07.17

구상과 구현