HTML/CSS/JS로 만드는 스타벅스 웹사이트

HTML 개요

HTML 기본 문법

요소(Element)

<tag> contents </tag>

열린 태그와 닫힌 태그로 요소의 내용을 감싸주기

부모와 자식 관계의 이해

<tag> //부모 요소
	<tag> //자식 요소
    	contents
    </tag>
</tag>

줄바꿈, 들여쓰기로 요소 간 구분하기

• 상위(조상) 요소
  나를 기준으로 내 위에 있는 모든 요소
• 하위(후손) 요소
  나를 기준으로 내가 감싸고 있는 모든 요소

빈 태그

종료(닫힌) 태그가 없는 태그

• 작성 방법
  • <tag>
    편리한
    HTML 1/2/3/4/5
  • <tag />
    안전한, 엄격한
    XHTML/HTML5

속성과 값

<tag attribute="value"> contents </tag>

속성과 값으로 추가적인 기능 확장 가능

글자와 상자

요소가 화면에 출력되는 특성으로 크게 2가지로 구분된다.

• 인라인(inline) 요소
  글자를 만들기 위한 요소들
• 블록(block) 요소
  상자(레이아웃)를 만들기 위한 요소들

인라인 요소

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

• <span>
  대표적인 인라인 요소로, 본질적으로는 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 요소

  • 하나의 글자처럼 취급된다.
  • 요소가 수평으로 쌓인다.
  • 가로, 세로 둘 다 포함한 콘텐츠 크기만큼 자동으로 줄어든다.

• margin 값 사용할 수 없다.

• 인라인 요소 안에는 블록 요소를 사용할 수가 없다.

블록 요소

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

• <div>
  대표적인 블록 요소로, 본질적으로는 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 요소

  • 요소가 수직으로 쌓인다.
  • 가로는 포함한 콘텐츠 크기만큼 자동으로 늘어난다.
  • 세로는 포함한 콘텐츠 크기만큼 자동으로 줄어든다.

• margin 값 사용할 수 있다.
  

• 블록 요소 안에는 블록 요소, 인라인 요소 모두 사용 가능하다.

HTML 핵심 정리

핵심 요소 정리

• <div>
  블록 요소. 특별한 의미가 없는 구분을 위한 요소이다.

• <h1>
  블록 요소. 제목을 의미하는 요소이다.
  h2~h6 까지 사용할 수 있다.

• <p>
  블록 요소. 문장을 의미, 구분하는 요소이다.

• <img src="" alt="">
  인라인 요소. 이미지를 삽입하는 요소이다.

  • 속성
    • src
      필수 속성. 이미지의 경로
    • alt
      필수 속성. 삽입할 이미지의 대체 이름

• <ul>
  블록 요소. 순서가 필요없는 목록의 집합을 의미한다.
  자식 요소로 <li> 태그를 하나 이상 포함해야한다.

<ul>
	<li> 딸기 <li>
    <li> 오렌지 <li>
    <li> 수박 <li>
<ul>

• <a href="">
  인라인 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소이다.

  • 속성
    • href
      필수 속성. 링크 URL
    • target
      링크 URL의 표시(브라우저 탭) 위치

• <span>
  인라인 요소. 특별한 의미가 없는 구분을 위한 요소이다.
  글자들의 범위를 나타낼 때 사용한다.

• <br>
  인라인 요소. 줄바꿈 요소이다.

• <input>
  인라인 요소이자 블록 요소. 사용자가 데이터를 입력하는 요소.

  • 속성
    • type
      필수 속성. 입력 받을 데이터의 타입
      ex) text, checkbox, radio 등
    • value
      미리 입력된 값(data)
    • placeholder
      사용자가 입력할 값의 힌트
    • disabled
      입력 요소 비활성화. 값을 명시하지 않는다.

• <lable>
  인라인 요소. 라벨 가능 요소(input)의 제목

//radio는 체크 여부를 그룹에서 1개만 입력 받음
<label>
	<input type="radio" name="fruits" /> Apple
</label>
<label>
	<input type="radio" name="fruits" /> Banana
</label>

• <table>
  테이블 요소. 표 요소 행(Row)와 열(Column)의 집합이다.
  선은 표현 되지 않고 표의 구조만을 가지게 된다.

<table>
	<tr> //행 table row
    	<td>A</td><td>B</td> //열 table data
    </tr>
    <tr>
    	<td>C</td><td>D</td>
    </tr>
</table>

주석

<!--이것은 html 주석이다-->

Ctrl+'/' 키를 누르면 자동으로 해당 줄이 주석 처리 된다.

전역 속성

• <tag title="description"></tag>
  요소의 정보나 설명을 지정.

• <tag style="style"></tag>
  요소에 적용할 스타일(CSS)을 지정.

• <tag class="name"></tag>
  요소를 지칭하는 중복 가능한 이름.
  같은 태그 내에서도 클래스로 지정 후 css, js에서 제어하기 위해서 사용한다.
  다른 파일에서 .name 으로 사용할 수 있다.

• <tag id="name"></tag>
  요소를 지칭하는 고유한 이름.
  고유하기 때문에 핵심적인 정보에만 사용하도록 한다.
  다른 파일에서 #name 으로 사용할 수 있다.

• <tag data-name="data"></tag>
  요소에 data를 지정한다.
  주로 js에서 사용하기 위함이다.