2. HTML 기본문법과 핵심 요소

🦴 HTML 기본문법

- 태그(Tag)

<열린태그></닫힌태그>

- 요소(Elements)

<태그>요소의 내용(Contents)</태그>
ㄴ 태그까지 포함한 내용 전체

- 빈(Empty)태그

닫힌태그가 없어 내용을 입력할수 없어 내용이 비어있는 태그

<meta />, <img />, <input />등등...

기본역할이 있지만 속성과 값이 없으면 활용 할수 없음 (br, hr등 제외 태그 있음)

• <태그>: 편리함, HTML 1/2/3/4/5
• <태그 />: 안전함, XHTML(닫는곳 지정 엄격한 문법) / HTML5

- 속성과 값

태그 속성(Attribute)="값(Value)">내용</태그
열리는 태그에 속성과 값을 넣어 태그의 기능을 확장해서 사용

[ Inline과 Block ]

요소가 화면에 출력되는 특성 (글자와 상자)

- 인라인(Inline)

• 글자 를 만들기 위한 요소들
• 글자처럼 취급, 영역 구분 용도, 화면에 baseline(영문기준선)기준으로 배치 - baseline은 폰트마다 다름)
• 세로 가로가 포함한 콘텐츠 내용만큼 최소로 줄어들어 영역 설정
• 요소가 수평으로 쌓임 (줄바꿈을 하게되면 띄어쓰기로 인식)
• 크기를 지정하는 CSS를 사용할수 없음 (width, height)
• 여백을 지정하는 CSS는 상하는 작동 안됨 좌우는 작동됨 (margin, padding)
• 하위요소: 인라인요소 O, 블록요소 X

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

출력: Hello world 

- 블록(Block)

• 상자(레이아웃)를 만들기 위한 요소들
• 가로가 부모 요소의 크기만큼 최대로 늘어나서 영역 설정
• 세로는 포함한 콘텐츠 내용만큼 최소로 줄어들어 영역 설정
• 요소가 수직으로 쌓임 (한줄에 하나만 사용)
• 크기, 여백 지정하는 CSS 사용 가능
• 자식: 인라인요소 O, 블록요소 O

<div>Hello</div>
<div>World</div> 

출력:
Hello
World

---

🦴 HTML 핵심요소

[ Block(상자) 요소 ]

- div (Division)

특별한 의미가 없는 레이아웃 영역 구분을 위한 요소

- h1~6 (Heading)

제목(목차)을 의미하는 요소
숫자가 커질수록 중요도가 낮아짐

- p (Paragraph)

문장을 의미, 문장을 구분 하는 요소

- ul (Unordered List), li (List Item)

• ul: 순서가 필요없는 목록
• li: 목록(List) 내 각 항목(List Item)

  <ul>
    <li>ul 태그 자식을로 한개이상의 li태그가 있어야 함</li>
    <li>ul>li, ol>li 한 세트</li>
  </ul>

[ Inline(글자) 요소 ]

- img (image)

이미지를 삽입하는 요소, src alt 필수속성

  <img src="이미지의 경로" alt="삽입할 이미지의 이름(이미지 대체 텍스트)" />

-img도 inline요소라 이미지가 화면에 노출되면 글자처럼 취급하기빼문에 baseline 기준으로 배치되어 이미지크기+하단여백이 생겨 위쪽으로 올라간 것처럼 보임

• 해결방안: display: block;을 설정해 블럭요소(박스, 레이아웃)로 변경
  • 일반적으로 logo의 높이는 75px

- a (Anchor)

href(Hyprtext)속성의 값의 위치로 이동하는 링크를 지정하는 요소

<a href="이동하고싶은 위치 경로(링크)" target="_blank: 새탭에서 열기">내용을 넣어 클릭할 영역</a>

• 경로에 해당하는 페이지가 아직 구현전이거나 링크속성을 사용하고 싶지 않을때
  • href="#" 최상단 페이지로 올라감
  • href="javascrip:void(0)" 아무일도 일어나지않아 권장함

- br (Break)

줄바꿈 요소 <br />

[ Inline-block 요소 ]

• 글자요소인데 상자요소의 특성을 몇가지 추가로 사용할수 있는 요소
  • 수평으로 쌓이면서 가로세로, 여백 지정 가능

- input

사용자가 데이터를 입력하는 요소
다양한 입력 데이터타입과 속성이있음

• 입력 데이터타입
  • text: 글자
  • -- label(인라인요소, 인풋의 제목, 레이블선택해도 선택 가능)로 묶음 가능 요소 ---
  • checkbox: 체크 여부 (다중선택가능)
  • radio: 단일선택(택1), name속성 값이 같으면 그룹화됨 그룹중 한개만 입력받을 수 있음
• 속성
  • value="미리 입력된 값(데이터): 화면에 출력"
  • placeholder="사용자가 입력할 값(데이터)의 힌트: 화면에 출력 사용자 입력시 없어짐"
  • name="값"그룹화 할 input에 같은 값을 입력해 그룹화, label의 for속성에 같은 값으로 연결
  • disabled: 입력 요소 비활성화, 화면에 출력 되지만 입력할수 없음
  • checked: 체크박스 입력 요소 미리 체크되어있게 출력

<input type="사용자에게 입력받을 데이터 타입" />

[ table 요소 ]

• block요소 안에서 table요소로 구분
• 표 요소, 행(Row)과 열(Column)의 집합
  • 속성
    • colspan: 열을 병합해 몇칸 확장할 것인지 값으로 지정
    • rowspan: 행을 병합해 몇칸 확장할 것인지 값을로 지정

  <table>
    <!-- 행(Row)을 지정하는 요소(Table Row) -->
    <tr>
      <td>Column을 지정하는 요소 </td>
      <td>| Table Data(cell) </td>
      <td>| table>tr>td 순으로 작성해야함</td>
    </tr>
    <tr>
      <td>tr을 형제로 작성해 행의 갯수 지정 </td>
      <td>| 현테이블 2행 3열 </td>
      <td>| 3개의 Table Data(셀)을 가진 행이 2개</td>
    </tr>
  </table>

출력:

-----------------------------------

📍 Learn more

- favicon

보통 root에 favicon.ico 파일명으로 파비콘이 있으면 html에 link로 파비콘을 지정해주지 않아도 브라우저가 자동으로 인식해서 보여줌

• facicon 여러가지 크기변환
• .ico 로 파일변환

- 전역속성

태그마다 사용할수 있는 속성이 정해져 있는데 전역속성은 body안에 사용할수있는 모든 태그에서 같은 기능으로 사용 가능한 속성

• title="요소 정보나 설명을 지정, 요소에 마우스를 올리면 이 값이 팁으로 출력"
• style="요소에 적용할 스타일(CSS)을 지정"
• class="요소를 지칭하는 중복 가능한 이름, 이름 앞에 .을 붙여 css선택자로 사용가능"
• id="요소를 지칭하는 고유한 이름, 중요한 위치에 이름을 부여할때 사용, 이름앞에 #을 붙여 CSS선택자로 사용가능"
• data-이름="요소에 데이터를 저장(기본적으로 문자데이터): 자바스크립트에서 데이터 가져올때 주로 사용(스네이크형식으로 지정해야 자바스크립트에 읽음)"

- defer 속성

head에서 script요소로 외부 JavaScript문서를 가져올때 HTML 문서를 읽기전에 스크립트가 실행됨
ㄴ *script 요소의 defer 속성은, HTML 문서 분석 후 (구조가 준비된 후) JavaScript를 실행하겠다는 의미 *

- BEM(block Element Modifier)

HTML 클래스 속성 작명법: 클래스명을 직관적으로 작명해 한번에 이해하기 쉬움

• 요소일부분: Underscore(Lodash) \로 요소의 일부분임을 표시

<div class="item">
  <div class="item__title">
 <div class="contents">
   <div class="contents__title">

• 요소--상태: Hyphen(Dash) -- 로 요소의 상태를 표시
• <div class="btn btn--success"></div> <div class="btn btn--error"></div>

- <figure>

기능보단 <figure>태그안에 이미지태그(<img />)와 이미지설명태그(<figcaption>)로 요소를 생성해 묶어주는 의미적인 부분에서 사용되는 시맨틱태그

figure MDN