![001_HTML의 기초](https://inblog.ai/_next/image?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog%3Ftitle%3D001_HTML%25EC%259D%2598%2520%25EA%25B8%25B0%25EC%25B4%2588%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3Dchodong&w=1920&q=75)
Contents
시작 전!!!
VSCode로 진행 할 것인데 조금 더 편하게 진행하기 위해 Live Server를 플러그인 해줍니다.![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fb1939378-3cd6-4f1f-9032-6c4df0711232%2F34ad0798-c43a-4afb-95a5-bf357db6fb56%2FUntitled.png?table=block&id=c5d84017-cbcd-4ffd-9bb8-3622bd7b2cde&cache=v2)
→ 툴에서 못 알아 듣는 코드를 이해 하도록 만들기 위해서 플러그인을 한다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fb1939378-3cd6-4f1f-9032-6c4df0711232%2F34ad0798-c43a-4afb-95a5-bf357db6fb56%2FUntitled.png?table=block&id=c5d84017-cbcd-4ffd-9bb8-3622bd7b2cde&cache=v2)
HTML 알아보기
- HTML로 간단한 출력 해보기
<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <h1>Hello World</h1> </body> </html>
출력 결과
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fb1939378-3cd6-4f1f-9032-6c4df0711232%2F0c2c2791-88fa-4659-9708-facda5443833%2FUntitled.png?table=block&id=55070df3-9a49-47c4-80f7-a3caa9936ca6&cache=v2)
- 인라인 더 블락(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>
출력 결과
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fb1939378-3cd6-4f1f-9032-6c4df0711232%2F5845e9c4-3ea7-41f6-b66d-8b37fa1bd8a5%2FUntitled.png?table=block&id=d04629db-185d-42b3-b657-ffefa16ef6f5&cache=v2)
- 인라인 더 블락(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>
출력 결과
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fb1939378-3cd6-4f1f-9032-6c4df0711232%2F14266dad-1838-45ac-a147-a8cff789865b%2FUntitled.png?table=block&id=5288c3e0-1ba2-4b42-9d6f-2460e6130ba3&cache=v2)
html 태그의 종류는 2개로 나뉜다! (display: inline;) or (display: block;)![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fb1939378-3cd6-4f1f-9032-6c4df0711232%2Faea3eac1-7593-4410-a6ec-f799459859fe%2FUntitled.png?table=block&id=59c61b05-6f61-4c3e-9b27-e37ec074f7af&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fb1939378-3cd6-4f1f-9032-6c4df0711232%2Fa601ca0f-da9a-4438-adee-e7938d7400d1%2FUntitled.png?table=block&id=a0847227-0473-4c4f-8535-8bfe5b16f7f1&cache=v2)
인라인(inline) 속성을 가진 애들은 자기 자신의 크기 만큼만 사이즈를 가진다 → span
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fb1939378-3cd6-4f1f-9032-6c4df0711232%2Faea3eac1-7593-4410-a6ec-f799459859fe%2FUntitled.png?table=block&id=59c61b05-6f61-4c3e-9b27-e37ec074f7af&cache=v2)
블락(block) 속성을 가진 애들은 행을 통째로 사이즈로 가진다 → div
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fb1939378-3cd6-4f1f-9032-6c4df0711232%2Fa601ca0f-da9a-4438-adee-e7938d7400d1%2FUntitled.png?table=block&id=a0847227-0473-4c4f-8535-8bfe5b16f7f1&cache=v2)
우리가 이제 배울 내용!
html의 속성은 “어트리뷰트(Attribute)”라 한다.
우리가 배우는 건 “어트리뷰트”와 “태그”와 “태그가 block인지 inline인지 확인” 이다!
HTML의 파일 이름을 설정 할 때는
기본적으로 모두 소문자로 사용하거나 하이픈(-)을 붙여서 진행한다.
팀 프로젝트를 할 때는 어떻게 할지 결정 해야 하는데 이를 “컨벤션(Convention)”이라 한다.
컨벤션은 코드 사용 규칙이라 이해하면 될 것 같다.
마지막으로 태그 중에 여는 태그만 있는 태그와 닫히는 태그까지 있는 태그가 존재한다.
간단한 코드!
<b></b> - 두꺼운 글씨
<hr> - 줄 긋기
<br> - 줄 바꿈
Share article