[The Web Developer Bootcamp 2024] section 3: HTML 기초

Programming/JavaScript

[The Web Developer Bootcamp 2024] section 3: HTML 기초

yuri lee 2024. 11. 4. 21:46

이 글은 udemy의 The Web Developer Bootcamp 2024 강좌를 바탕으로 정리한 내용입니다.

19. 섹션주제

skip

20. HTML 개요

HTML은 웹 페이지의 명사 같은 것으로 콘텐츠의 구조를 규정하는 것입니다.
It’s just about marking up a document
HTML은 웹 펭이지라는 문서에 마크업을 하기 위한 언어 또는 구문입니다.

21. 우리의 첫 HTML Page

skip

22. Tip 모질라 개발자 네트워크

https://developer.mozilla.org/ko/docs/Web/HTML
MDN Web Docs(Mozilla Developer Network Web Docs)는 웹 개발자들이 HTML, CSS, JavaScript 및 웹 기술과 관련된 정보를 얻을 수 있는 포괄적인 온라인 문서 사이트입니다. Mozilla 재단이 관리하고 있으며, 웹 표준 기술에 대한 깊이 있는 자료와 튜토리얼을 제공합니다.

23. 단락요소 <p>

p tag를 이용하면 독립된 단락을 만들 수 있습니다.

24. 제목요소 <h1> ~ <h6>

<h1>–<h6>: The HTML Section Heading elements
모두 정해진 크기가 있지만 css로 조절할 수 있습니다. 하지만 조절하지 않는 게 좋습니다.
한 페이지에는 최상위 주제가 두가지일 수 없기 때문에 최상단에 딱 하나만 있어야 합니다.
Lorem 입력 후 tab 누르면 랜덤 text 자동 생성됩니다.
Lorem*5 + tab : 5번 입력됩니다.

25. Chrome 인스팩(inspector) 개요

elements tab: html 요소 확인 가능

26. HTML 상용구 (SKELETON)

필수적인 구조 필요
<!doctype html> : html5를 사용하고 있다는 표식, html의 최신 규격을 사용한다는 뜻
<html>
<head> : 실제로 문서에 나타나는 건 아니지만 모든 메타 정보를 담고 있습니다.
<title> : 브라우저 탭 상에 표시되는 정보
<body> : 하나의 head에는 하나의 body가 필요
느낌표 + tab을 누르면 자동 생성됩니다.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

27. VSCode 팁: 자동 포맷

shift+option+F : 단축키
Setting > Format On Save > check!

28. 목록 요소

<ul> : 점으로 표시되는 목록
<ol> : 숫자로 표시되는 목록
<li> : 목록 내의 단일 아이템을 표시하는 태그
<ul> 과 <ol>의 직속 자식 요소로는 <li> 만 올 수 있지만 <li> 태그 안에는 다양한 태그를 넣어도 됨.
중첩되게 만들 수 있다.

29. 앵커 태그<a>

하이퍼링크를 만드는 데 쓰는 요소
HTML의 속성이란 태그에 부여할 수 있는 작은 정보를 의미함.
앵커 태그로 만드는 모든 하이퍼링크에는 Href를 사용함.
I am Link! :: 파일 프로토콜을 사용한 거라 google.com으로 링크하면 google.com이라는 파일이 있다고 생각함. 실제로는 웹 사이트로 가려는 거니까 HTTP를 넣어줘야 한다.
<a href="about.html">about page</a> 처럼 사용할 수도 있음.

30. 이미지

다른 태그들은 안에 콘텐츠(내용) 이 있었지만 이미지 태그의 경우 이미지가 있는 URL만 제공하면 됨.
닫기 태그도 없음
alt 라는 특수 속성 사용 가능 : 텍스트로 된 이미지 설명, 필수 요소는 아님

31. 주석

Cmd + /

'Programming > JavaScript' 카테고리의 다른 글

[The Web Developer Bootcamp 2024] section 2: 웹 개발이란? (0)	2024.10.15
[The Web Developer Bootcamp 2024] section 1: 코스 소개 (1)	2024.10.15
패키지 매니저 Yarn Berry 란? (+ pnp system) (0)	2023.06.19
[모던 자바스크립트 Deep Dive] 16장 프로퍼티 어트리뷰트(property attribute)란? (1)	2023.06.04
[모던 자바스크립트 Deep Dive] 15장 let, const 키워드와 블록 레벨 스코프란? (0)	2023.06.03

현재글[The Web Developer Bootcamp 2024] section 3: HTML 기초

Dev Diary 💻

[The Web Developer Bootcamp 2024] section 3: HTML 기초

19. 섹션주제

20. HTML 개요

21. 우리의 첫 HTML Page

22. Tip 모질라 개발자 네트워크

23. 단락요소 <p>

24. 제목요소 <h1> ~ <h6>

25. Chrome 인스팩(inspector) 개요

26. HTML 상용구 (SKELETON)

27. VSCode 팁: 자동 포맷

28. 목록 요소

29. 앵커 태그<a>

30. 이미지

31. 주석

'Programming > JavaScript' 카테고리의 다른 글

'Programming/JavaScript'의 다른글

티스토리툴바

[The Web Developer Bootcamp 2024] section 3: HTML 기초

19. 섹션주제

20. HTML 개요

21. 우리의 첫 HTML Page

22. Tip 모질라 개발자 네트워크

23. 단락요소 <p>

24. 제목요소 <h1> ~ <h6>

25. Chrome 인스팩(inspector) 개요

26. HTML 상용구 (SKELETON)

27. VSCode 팁: 자동 포맷

28. 목록 요소

29. 앵커 태그<a>

30. 이미지

31. 주석

'Programming > JavaScript' 카테고리의 다른 글

'Programming/JavaScript'의 다른글

관련글

티스토리툴바