[Worksheet-220418] HTML

12294 단어 WorksheethtmlWorksheet
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에서 사용하기 위함이다.

좋은 웹페이지 즐겨찾기