HTML 요소와 속성들

💡<태그>내용</태그>

• 요소(Element)
• 왼쪽 태그 : 시작(열린)태그
• 오른쪽 태그 : 종료(닫힌)태그
• 내용(contents)

<h1>Hello HTML~</h1>

💡부모와 자식 관계의 이해 <태그><태그>내용</태그></태그>

• <태그><태그>내용</태그></태그>
  • 부모 요소
• <태그><태그>내용</태그></태그>
  • 자식 요소

<div>
  <div></div>
</div>

💡빈 태그

• <태그></태그>
• 빈 태그라고 부른다
• <meta charset = "UTF-8>
• 사용방법
  • <태그>
  • <태그/> 엄격한 문법 → 주로 이걸 사용
  • <태그 속성(Attribute) = "값(Value)">내용</태그>
    • 속성, 값 == 기능의 확장
  • 사용자가 데이터를 입력하는 요소(태그)!

<input type="checkbox"/>
<input type="button"/>
<input type="text"/>

---

💡 글자와 상자

• 요소가 화면에 출력되는 특성

💡 인라인(Inline)요소

• 글자를 만들기 위한 요소
  • Hello World 요소가 수평으로 쌓임
• 자신이 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
• 글자는 가로,세로 사이즈를 지정할 수 없다.
• 대체적으로 Inline 안에는 Block을 집어넣을 수 없다.

<span>Hello</span> <span>World</span>

💡 블록(Block)요소

• 상자(레이아웃)을 만들기 위한 요소
• 요소(Element)가 수직으로 쌓인다.
• 부모 요소의 크기만큼 가로는 자동으로 늘어난다.
• 부모 요소의 크기만큼 세로는 자동으로 줄어든다.
• Block 요소 안에는 Inline, Block 둘다 집어 넣을 수 있다.

---

💡 전역 속성

• title
  • 마우스를 가져다 되었을 때 Tip 이 출력 됌.
  • 요소의 정보나 설명을 지정
  <a href = " " title = "설명"></a>
• style
  • 요소에 적용할 스타일(css)을 지정
  <a href = " " style = "스타일"></a>
• class
  • 요소를 지칭하는 중복 가능한 이름

  <a href = " " class = "이름"></a> 
  

  .이름 {
    color : red;
  }
  

• id
  • 요소를 지칭하는 고유한 이름

  <a href = "" id = "이름"></a>
  

  #이름 {
    color : blue;
  }
  

• data
  • 요소에 데이터를 지정

  <div data-fruit-name="apple">사과</div>
  <div data-fruit-name="banana">바나나</div>
  
  <script defer src="./main.js"></script>
  

  const els = document.querySelectorAll('div')
  els.forEach(el => {
    console.log(el.dataset.fruitName)
    })
  

---

💡 HTML 핵심 Element 정리

💡 Block Element

• div(Division)
  • 특별한 의미가 없는 구분을 위한 요소.
• h1(Heading) 1 ~ 6
  • 제목을 의미하는 요소
  • likely. 목차
  • 숫자가 작을 수록 더 중요한 제목을 정의
• p(Paragraph)
  • 문장을 의미하는 요소
• ul(Unordered List)
  • 순서가 필요없는 목록의 집합을 의미
• ol(ordered List) <-- 빈도가 적음
  • 순서가 정해져있는 목록의 집합을 의미
• li(List item)
  • 목록 내 각 항목

💡 Inline Element

• img(Image)
  • 이미지를 삽입하는 요소
• a(Anchor)
  • 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
  • target(Attribute)
    • _blank : 새탭으로 열기
• span
  • 특별한 의미가 없는 구분을 위한 요소
• br(Break)
  • 줄바꿈 요소
• label
  • 라벨 가능 요소(input)의 제목

💡 Inline-Block Elemnet

• 가로, 세로 사이즈 및 여백 설정 가능, 하지만 수평으로 요소 채워짐.
• input
  • 사용자가 데이터를 입력하는 요소
  • type(Attribute)
    • text, checkbox 등등
  • value(Attribute)
    • 미리 입력된 값
  • placeholder(Attribute)
    • 사용자가 입력할 값의 힌트
  • disabled(Attribute)
    • 입력 요소 비활성화
  • checkbox(Attribute)
    • checked(Attribute)
      • 입력 요소 체크 됌
  • radio(Attribute)
    • 사용자에게 체크 여부를 그룹에서 1개만 입력 받음!(택1)
    • name(Attribute)
      • 그룹

💡 Table Element <- 블록에 포함

• 표 요소, 행(Row)과 열(Column)의 집합.
• tr(Table Row)
  • 행(Row)을 지정하는 요소.
• td(Table Data)
  • 열(Column)을 지정하는 요소

💡 주석

• Cmd + /
  • 수정사항이나 설명 등을 작성(주석)

<!-- Content -->