내용 요약

HTML(HyperText Markup Language) : 웹 페이지를 만들기 위한 기본적인 마크업 언어

HTML 학습 사이트 : MDN, W3school

아래는 기본적인 html 파일의 틀이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

! (느낌표)나 html:5를 입력하고 enter를 누르면 기본적인 틀을 자동완성해준다...

html 문서 안에는 크게 <head> 요소와 <body>요소로 구분되어 있다.

<head> : 웹 문서에 필요한 설정

<head>
    <!-- meta 태그 : 해당 문서에 대한 정보인 메타데이터를 정의함 -->
    <meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 UTF-8로 설정 -->
    <!-- ↓ 웹브라우저가 서버에 명령을 내림 / ie 브라우저에서 가장 최신 버전 선택 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- ↓↓ 뷰포트를 설정한다 / 브라우저의 너비를 장치의 너비로 설정 / 초기 확대/축소 값 -->
    <!-- ↓ 즉 모든 기기에서 적절한 뷰포트를 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> <!-- 브라우저 탭에 표시되는 문서의 제목 -->
</head>

개인적으로 메타 태그는 잘 몰라서 찾아봤다 → https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name

<body> : 실제로 사용자에게 보여지는 부분

<body>
    <h1>오늘 할 일</h1> <!-- 문서 내에서 제목의 역할, 1은 크기를 의미하며 큰 순서대로 1~6까지 있음. -->
    <ul> <!-- 리스트 정렬 -->
        <li>공부하기.....</li> <!-- 리스트 항목 -->
        <li>먹기.....</li>
        <li>자기.....</li>
    </ul>
</body>

아래와 같은 코드를 브라우저에 렌더링했을 때

<!DOCTYPE html> <!-- 이 문서가 HTML5로 작성되었음을 선언 -->
<html lang="en"> <!-- HTML 문서의 시작, lang은 문자의 언어를 지정하며 그 내용은 english를 의미 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>오늘 할 일</h1>
    <ul>
        <li>공부하기.....</li>
        <li>먹기.....</li>
        <li>자기.....</li>
    </ul>
</body>
</html>

오늘 할 일

공부하기.....
먹기.....
자기.....

다음과 같이 <body></body> 내에 있는 내용만 브라우저에 보여진다.

실습 과제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 이론학습</title>
</head>
<body>
    <h1>
        <a href="https://ozcodingschool.com/">오늘의 할 일</a>
    </h1>
    <ul>
        <li>a. HTML 예습하기</li>
        <li>b. MDN 사이트 접속하기</li>
        <li>c. w3school 사이트 접속하기</li>
        <li>d. 실습 도전하기</li>
    </ul>
    <h2>글씨 강조하기</h2>
    <p><i>HTML</i> 예습하기</p>
    <p><b>MDN</b> 사이트 접속하기</p>
    <p><u>w3school</u> 사이트 접속하기</p>
    <p><em>실습</em>도전하기</p>
</body>
</html>

'오즈코딩스쿨 프론트엔드 10기 > 베이스캠프' 카테고리의 다른 글

워밍업 칼럼 3 - 아토믹 해빗 (0)	2025.02.20
비기너 트랙 8 - CSS 이론 (1) (0)	2025.02.16
비기너 트랙 6 - Git과 GitHub (0)	2025.02.14
비기너 트랙 5 - CLI(Command Line Interface) (0)	2025.02.13
비기너 트랙 4 - VSCode (0)	2025.02.11

hykim

비기너 트랙 7 - HTML 이론

오늘 할 일

'오즈코딩스쿨 프론트엔드 10기 > 베이스캠프' 카테고리의 다른 글

티스토리툴바

비기너 트랙 7 - HTML 이론

오늘 할 일

'오즈코딩스쿨 프론트엔드 10기 > 베이스캠프' 카테고리의 다른 글

'오즈코딩스쿨 프론트엔드 10기/베이스캠프' Related Articles

티스토리툴바