HTML 기본

HTML 기본 구조

<!DOCTYPE html> 
<html>
  <head>
    <!-- metadata elements -->
  </head>
  <body>
    <!-- page contents -->
  </body>
</html>

<head>에 문자 인코딩 선언을 하자

명시적으로 페이지에 인코딩 방식을 알려주지 않으면 문자가 깨지는 문제가 발생할 수 있다.

이를 방지하기 위해서 <head>태그 안에 meta태그로 인코딩 문자를 알려 주도록 하자

HTML5에서 사용되는 설정방법은 아래와 같다

index.html

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

Inline(인라인)형식으로 css와 Javascript 넣기

예제

index.html

<html>
    <head>
        <title>인라인 형식의 CSS & JS 예제</title>  
    ## Inline CSS 시작
    <style>
        body{background: #f5f5f5;}
        a{color: #24890d; text-decoration: none;}
        h1{font-size: 26px;line-height: 1.3846153846;}
    </style>
    ## Inline CSS 끝
</head>
<body>
body 내용입력...
## Inline JavaScript 시작
<script>
    JavaScript code...
</script>
## Inline JavaScript 끝. body 최하단에 위치함을 확인 
</body>
</html>

<body></body> 내부 최하단 부분에 작성 (로딩속도 향상 목적)

웹 브라우저 화면 표시 이전에 콘텐츠를 제어해야 하는 경우 <head></head> 사이에 삽입할것

위와 같이 HTML 내부에 <script></script> 로 감싸고 넣는 인라인 방식은 코드가 길어지면 가독성이 떨어지고 유지/보수에 어려움이 있다. 이런 경우에는 독립적인 js 파일에 작성하고 이 파일을 불러오는 방식을 사용한다.

PreviousIntroduction Next이미지 파일 태그

Last updated 5 years ago