웹프로그래밍 HTML 배우기(1)

코린이서현이·2023년 7월 1일

웹프로그래밍

목록 보기

2/46

🎯오늘 배울 것🎯

1.HTML이란
2.HTML의 문법
2-1.태그
2-2.속성
2-3.태그 중첩
2-4.빈 태그
2-5.공백
2-6.주석
3.HTML 문서의 기본 구조

📕HTML이란

HyperText Markup Language의 약자,
웹페이지와 그 내용을 구조화하기 위해 사용한다.
HTML로 콘텐츠를 여러개의 문단과 글머리 목록으로 구조화 할 수 있으며, 글씨체를 작거나 크게 할 수 있다.

📕 HTML 문서의 기본 구조

공통적으로 가져야하는 태그의 구조가 있다!

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>

📖`<!DOCTYPE html>`

문서 타입 정의
브라우저에게 html로 작성되어있음을 알려줌.
가장 최상단에 있어야한다.

<!DOCTYPE html>

📖`<html>`태그

화면에 표시되지 않으며 문서의 기본설정이나 외부스타일 시트, js파일을 연결하는 역할을 한다.

<html lang="ko">

lang 속성 : 어떤 언어로 작성되어있는지 알려줌.
자식태그
- <head>태그
- <body>태그

📒`<head>`태그

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

<meta charset="UTF-8"> : 문자의 인코딩방식 정의 보통 UTF-8
<title>태그: 문서의 제목 설정

📒`<body>`태그

실제 브라우저 화면에 나타나는 내용들이 들어가는 태그이다.

	<body>
        <h1>Hello, HTML</h1>
	</body>
</html>

이 전체가 <html>로 묶이는 것에 주의!

📕HTML의 문법

<‼>개발언어의 문법이란? 개발언어를 어떻게 쓸지에 대한 규칙이다.

📖 태그(TAG)

<태그이름> 내용 </태그이름>

html은 모두 태그로 이루어져있다.
태그는 보통 시작태그와 종료태그로 이루어져있다. (두번째가 종료태그)
그렇지 않은 경우는 2-4 빈 태그에서 자세히 설명
내용은 태그로 둘러쌓여있으며 화면에 나타나는 내용이다.
태그는 중첩할 수 있다. (태그 중첩에서 자세히 설명)

👉태그헤석 > 아래 태그는 h1태그를 이용해서 Hello.HTML을 화면에 나타나는 태그이다.

<h1> Hello,HTML </h1>

📖 속성

id="title"

속성: <,>안에 같이 쓰여 추가적인 정보를 제공하고 태그의 동작이나 표현을 조절한다.

🔥HTML의 classs는 html의 속성 중 한가지 다른 코딩의 클래스와 헷길리지말자!

📒 속성 선언 규칙

선언태그안에 선언한다.
태그 이름 뒤에 공백으로 구분하고,=와 속성값을 쓴다.
속성이름과 속성값 사이에는 =을 제외하고는 어떤 공백도 들어가서는 안 된다.
속성값은 ","이나 ','으로 쓴다.

<h1 id="title"> Hello,HTML </h1>

하나의 속성에도 여러개의 태그를 쓸 수 있다.
속성의 구분은 공백으로 하며 선언순서는 상관없다.

<h1 id="title" class="test"> Hello,HTML </h1>

📒속성의 종류

글로벌속성: 어느태그에서나 사용할 수 있음
특정태그에서만 사용태그: 특정한 태그에서만 사용할 수 있다.
필수적인 속성: 꼭 써야하는 속성
선택적인 속성: 써도 되고 안써도 되는 속성

📖 태그중첩

태그는 중첩될 수 있다.
자식태그는 부모태그안에서 시작되고 끝나야한다.

⭕올바른 예

<h1>Hello, <i>HTML</i></h1>

❌잘못된 예

<h1>Hello, <i>HTML</h1></i>

<i>태그가 종료되기전에 <h1>태그가 종료되었다.

경우에 따라서 정해진 태그만 중첩이 가능한 경우도 있다. (추후에 추가)

📖 빈 태그

시작태그만 있고 종료태그는 존재하지 않음, 따라서 내용이 없음

<br>
<img scr="">

📖 공백

html은 공백을 어떻게 처리할까?
-> 한개 이상의 공백을 무시한다. 내용에서도 공백을 무시함

<h1> Hello, HTML </h1>
<h1> Hello,     HTML </h1>
<h1> Hello,
HTML </h1>

👉실행 화면

Hello, HTML

📒개행이나 공백 표시방법

개행 <br>
공백   : 추가하고 싶은만큼  추가

📖 주석

코드안에서 기능이 없는 메모
개발자들끼리의 협업과 기능설명을 위해서 사용한다.

<!-- 주석 -->

📄개발을 하면 할 수록 주석이 중요해진다. 귀찮아도 주석을 다는 습관을 들이는 것이 좋다.(👉ﾟヮﾟ)👉

🏅오늘 느낀 점🏅

사실 velog처음써보는데 아직 익숙하지는않다. 이 기능도 천천히 배워보면 좋을 것 같다. 
그리고 다른 좋은 사이트가 있으면 그걸로 옮길수도 있을 것 같고... 
html이 엄청 문법이 간단해서 좋다~(^///^)

참고
https://www.boostcourse.org/cs120/joinLectures/33586
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics

코린이서현이

24년도까지 프로젝트 두개를 마치고 25년에는 개발 팀장을 할 수 있는 실력이 되자!

웹프로그래밍 HTML 배우기(1)