Contents
시작 전!!!
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> - 줄 바꿈
Share article
