HTML 기본문법

FASTCAMPUT ST-FE 3기
Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 - Ch 6. HTML 핵심 정리

01. 기본문법

<태그>contents</태그>

02. 부모 자식 관계

부모요소가 자식요소를 감싸는 개념.

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

03. 빈 태그

위에서 보았듯이 태그는
<>열린뒤 </>닫혀 그 사이의 content를 표현해준다.
빈태그는 이와 달리 닫히거나 내용없이 속성만으로 표현하는 태그이다.

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

04. 인라인요소 vs 블록요소

4.1 인라인 요소

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

4.2 블록요소

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

05. 핵심 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칸 합치기

06. 주석

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

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