001_HTML의 기초

Jan 19, 2024

☝

시작 전!!! VSCode로 진행 할 것인데 조금 더 편하게 진행하기 위해 Live Server를 플러그인 해줍니다.

→ 툴에서 못 알아 듣는 코드를 이해 하도록 만들기 위해서 플러그인을 한다.

HTML 알아보기

HTML로 간단한 출력 해보기


<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

출력 결과

인라인 더 블락(Iiline the block)에 대해 알아보기 1번 → 기본적인 출력은 엔터나 스페이스를 통해 위치를 변경하긴 힘들다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    HelloWorld
    Bye
    Hello  My name is cos
</body>
</html>

출력 결과

인라인 더 블락(Iiline the block)에 대해 알아보기 1번 → 평문을 어디에 사용하는지와 “span”과 “div”의 사용


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>Hello</span>
    <div>Bye</div>
    <div>World</div>
</body>
</html>

출력 결과

☝

html 태그의 종류는 2개로 나뉜다! (display: inline;) or (display: block;)

인라인(inline) 속성을 가진 애들은 자기 자신의 크기 만큼만 사이즈를 가진다 → span

블락(block) 속성을 가진 애들은 행을 통째로 사이즈로 가진다 → div

☝

우리가 이제 배울 내용!

html의 속성은 “어트리뷰트(Attribute)”라 한다.

우리가 배우는 건 “어트리뷰트”와 “태그”와 “태그가 block인지 inline인지 확인” 이다!

HTML의 파일 이름을 설정 할 때는 기본적으로 모두 소문자로 사용하거나 하이픈(-)을 붙여서 진행한다.

팀 프로젝트를 할 때는 어떻게 할지 결정 해야 하는데 이를 “컨벤션(Convention)”이라 한다. 컨벤션은 코드 사용 규칙이라 이해하면 될 것 같다.

마지막으로 태그 중에 여는 태그만 있는 태그와 닫히는 태그까지 있는 태그가 존재한다.

☝

간단한 코드!

<b></b> - 두꺼운 글씨

<hr> - 줄 긋기

<br> - 줄 바꿈