Section 1/2/3: HTML: The Essentials

Zvezda89·2022년 5월 2일

bootcamp cording html

[Udemy] The Web Developer Bootcamp 2022

목록 보기

2/11

2022.04.30 9:08 PM ~ 2022.05.01 01:33 AM

Section 1: Course Orientation
Section 2: An Introduction to Web Development
Section 3: HTML: The Essentials

＊ 글속 태그들 < >는 ( )로 대체

* Crucial : 중대한, 결정적인

tip : 태그 이름을 쓰고 'tab'을 누르면 바로 생성됨

Mozilla Developer Network => MDN
=> 소스 코드에 대한 여러 설명을 얻을 수 있음

<< Tag & Attributes >>

Tag : (h1)(/h1) 이런 거

Attributes(속성) : (a href="")(/a)에서 href="" 같은 부가적으로 붙인 거

<< Paragrah(단락 지정) / p></p 태그 >>

단락과 단락을 나눌 수 있음
자체 블록을 사용하고, 그 뒤에 오는 모든 항목을 강제로 시작

<< Heading(제목) h숫자 시리즈 태그 >>

페이지에는 오직 하나의 H1만 있어야 하며,
항상 최상위 메인 제목이어야 함
단락처럼 한 줄을 차지함

<< LOREM (더미 데이터) >>

VSCODE나 ATOM 등에는 'Lorem'이라는 Dummy Text가 탑재되어 있음 !!

-> 그냥 lorem 이라고 입력하면 밑에 상자가 나옴. 그대로 enter!
-> 여러 줄 입력하고 싶을 시, lorem*원하는 배수 입력 후 enter!

<< HTML 표준 양식 >>

-> HTML SKELETON (HTML의 뼈대)

-> 상용구로 'boilerplate(보일러 판 / 표준 문안)' 이라고 함
-> ! (느낌표) 입력하고 TAB 누르면 바로 뜸 or html 입력후 TAB

<< HTML 요소 중, title >>

-> HTML 문서의 제목을 정해줌.
-> 인터넷 탭 위의 뜨는 문서의 제목이나 검색시에 나오는 문서의 제목.
(ex: (title)Chickens - Coltipedia(/title) )

<< 유용한 VSCODE 명령키 >>

한줄 복사 Shift + Alt + ↑ Shift + Alt + ↓
한줄 삭제 Ctrl + shift + k.
한줄 이동 Alt + ↑ Alt + ↓
같은 텍스트 선택 Shift + Ctrl + L

<< 정렬된 & 비정렬 목록 >>

-> (ol)(/ol) : Ordered List. 하위 li 태그들이 1, 2, 3...으로 나옴.
-> (ul)(/ul) : Unordered List. 하위 li 태그들이 검은 동그라미로 나옴.
-> ol이나 ul의 하위 li 자식태그 속에 또다른 ol이나 ul을 펼칠 수 있음.

ex:

<ul>
      <li>
        Bantam
        <ul>
          <li>Silkie</li>
          <li>Polish</li>
        </ul>
      </li>
     </ul>

<< Anchor(앵커) 태그 >>

-> 다른 웹페이지, 이메일 주소, 파일 또는 위치에 연결할 수 있는 방법

ex:

<a href="./about.html">about</a>

<< IMG (이미지 삽입) 태그 >>

-> (img src="" /)로 씀.
-> 뒤에 닫는 태그가 따로 없음

※ alt="" : 이미지를 보여줄 수 없을 때 해당 이미지를 대신할 텍스트를 명시함.
요소는 화면에 나타나지 않지만, 'screen reader'에는 읽힘
(screen reader : 시각 장애인용)