HTML 기초

Intro - 웹 개발(Web Development) 이해하기

1) HTML
: 구조를 담당하는 마크업 언어 (Structure)
ex) 집의 구조를 간단히 작성

2) CSS
: 디자인 요소를 시각화하는 스타일시트 언어 (Presentation)
ex) 벽면의 색과 재질 작성

3) JavaScript
: 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용할 수 있게 만드는 프로그래밍 언어 (Interaction)
ex) 알전구를 선택하고 밤이 되면 켜지게하는 알고리즘을 작성

HTML 기초

• HTML은 프로그래밍 언어가 아니다
• HTML의 구조를 잘 짜놓아야 이후에 자바스크립트로 개발할 때 직관적인 코드를 짤 수 있다
• HTML(Hyper Text Markup Language)은 마크업(markup), 즉 구조를 표현하는 언어

HTML의 기본 구조와 문법

• HTML은 tag들의 집합
• Tag
  : 부등호(<>)로 묶인 HTML의 기본 구성 요소
  태그는 항상 쌍으로 존재 (열고 닫음)
  </태그이름>은 해당 태그가 끝났음을 의미
• Tree structure (트리 구조)
  ex)

HTML 문서 시작
  html
    head
      title: Page title
    body
      h1: Hellow world
      div: Contents here
        span: Here too!

• self-closing tag
  : 태그 내부에 내용이 없다면 (와 같이 표현되는 경우), 와 같이 표현 가능
  /은 생각 가능하다
• 태그에 속성이 담겨져 있다
  ex)

<img src="codestates-logo.png"/>

src은 속성
속성에 대한 값은 "codestates-logo.png"

Most used tags in HTML

1) div (division)
한 줄을 차지한다

2) span (span)
컨텐츠 크기만큼 공간을 차지한다

3) img (image)
이미지 태그는 닫는 태그가 (필요가) 없다
ex) < img src="codestates-logo.png" >

4) a (link)
ex) < a href="http://naver.com" >네이버< /a >
-> '네이버'누르면 페이지로 이동
[추가] < a href="http://naver.com" target="_blank" >네이버< /a >
-> 새 탭에서 페이지를 열 수 있다

5) < ul > & < li > Unordered List & List Item

• 둘은 한 쌍
• 순서 없는 리스트
• < ol > ordered list 순서가 있는 리스트

6) < input > Input (Text, Radio, Checkbox)

• 입력 폼
• checkbox: 여러개 선택 가능
• radio button: 여러개 중 하나 선택
  ex)
  < input type="radio" > 옵션A
  < input type="radio" > 옵션B
  -> 그룹 설정을 안하면 둘 다 선택 할 수 있다. 따라서 둘 중 하나만 선택 가능하게 하려면 그룹을 묶어줘야 한다.
  < input type="radio" name="option1" > 옵션A
  < input type="radio" name="option1" > 옵션B

7) < textarea > Multi-line Text Input

• 줄바꿈이 되는 입력 폼 (input과의 차이)
• textarea는 열고 닫는 tag을 꼭 적어줘야 함
• input과는 다르게 줄 바꿈이 된다

8) < button > Button

Self-check

• HTML이 markup language라는 것을 이해할 수 있다.
  "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
• HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
  opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
• 자주 사용되는 HTML 요소(element)가 무엇인지 알고 차이를 설명할 수 있다.
  1) div, span 이 무엇이고, 차이는 무엇인지 알고 있다.
  2) ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
  3) input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
• HTML을 동적인 웹 어플리케이션으로 개발할 수 있는 구조로 짤 수 있다.
  1) 간단한 웹 페이지 기획을 HTML 문서로 표현할 수 있다.
  2) id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱(semantic)한 HTML 문서를 작성할 수 있다.
  3) HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.