Part 1. HTML/CSS/JS ch5. 개요, ch6. 정리

기본문법

• 요소
  <태그>contents</태그>

부모 자식 관계

<부모요소>
	<자식요소>
        내용
    </자식요소>
</부모요소>

빈 태그

닫히거나 내용없이 속성만으로 표현하는 태그

ex)
<meta>
<img src="경로" alt="대체문구">
<input type="text">

인라인요소 vs 블록요소

• 인라인 요소
  글자를 표현하기 위함
  요소가 수평으로 쌓임 , 띄어쓰기가 생김
  컨텐츠의 크기만큼 크기 가동적
  인라인 요소 자체로서는 블록요소를 자식으로 가질 수 없다.

• 블록요소
  레이아웃 구조를 만들기 위함
  요소가 수직으로 쌓임
  부모 요소의 크기만큼 가로너비 최대로 자동 늘어남 / 세로너비는 컨텐츠 크기만큼
  블록요소, 인라인 요소 모두 자식으로 가질 수 있다.

핵심 HTML Element

• <div></div>
  Division (block)
  특별한 의미x, 구분을 위한 요소

• <h1~6></h1~6>
  Heading (block)
  제목
  숫자가 작을수록 큰 의미

• <p></p>
  Paragraph (block)`
  문장

• <img>
  Image (inline)
  이미지 삽입
  src source 이미지의 경로
  alt alternate 이미지의 이름

• <ul></ul>
  Unordered List (block)
  순서가 없는 목록

• <ol></ol>
  Ordered List (block)
  순서가 있는 목록

• <li></li>
  List item (block)
  목록 내 각 항목

• <a href = '주소' target = "_blank">Oching</a>
  Anchor (Inline)
  다른/같은 페이지로 이동하는 하이퍼링크를 지정
  href 링크url
  target url의 표시(브라우저 탭 위치)
  _blank : 새탭으로 열림
  

• <span></span>
  특별한 의미x, 단순구분 (Inline)

• <br/>
  Break (Inline)
  줄바꿈

• <input type = "text">
  사용자가 데이터를 입력하는 요소 (Inline-block)
  type 입력받을 데이터의 타입
  value 미리 입력된 값(데이터)
  placeholder 사용자가 입력할 값(데이터)의 힌트
  disabled 비활성화

• <label><input type="checkbox" checked/> apple</label>
label input의 제목,
  checkbox 중복 체크 가능
  checked 미리 체크된 상태로 구현

• <label><input type="radio" name="fruits"/>apple</label>
label input의 제목,
  radio 같은 name 속 단 하나의 내용만 체크
  name 각 선택지를 묶는 하나의 그룹

• <table></table>
  table
  표 요소, 행(row)과 열(column)의 집합

• tr
  row
  행

• td
  data
  열 셀 column
  colspan ="n" Column Span , 열을 n칸 합치기

주석

화면에 출력되지않는 메세지
수정사항이나 설명 등을 작성
ctrl + / 단축키

• <!--주석--> html환경
• /**/css환경
• //js환경