[HTML] 기본 사항

[00_HTML개괄]

 1) UI(User Interface) 화면 구현  - 외부평가시 자연스럽게 진행이 될 수 있어야 함
  ⊙ HTML/CSS/JavaScript
  ⊙ 코딩툴 : EditPlus (다른 것 써도 무방)
  ⊙ Script 언어 
   → 웹브라우저에서 인터프리터(한 줄 읽고 한 줄 보여주는) 방식으로 번역되는 언어
  ⊙ 결과확인 웹브라우저 : 크롬, IE 11
  ⊙ Frontend단, View단

 

 2) HTML : Hyper Text Markup Language

  ⊙ 웹서비스가 가능하도록 한 문법

  ⊙ 드래그해보면서 뭐가 그림이고 뭐가 텍스트인지 확인 가능

  ⊙ .html (표준형) / .htm / .jsp / .asp / .php

  ⊙ 한글인코딩 : utf-8

  ⊙ 태그(tag)는 대소문자 구분하지 않는다

     태그는 <> 안에서 표현한다, 여는 태그와 닫는 태그로 구성된다   (여는 태그 , 닫는 태그 , 명령어는 그 사이에 씀)

  ⊙ CSS2/HTML4

  ⊙ CSS3/HTML5 → CSS/HTML (모바일이 나오면서 구분이 생김)

 

 ※ 참고사이트 ※

  ⊙ ★ https://www.w3schools.com/
  ⊙ http://www.blueb.co.kr/
  ⊙ https://archive.atagar.com/freeMedia/  이미지 무료 

 

본문 내용을 출력할 때 body에 적음

 

[01_HTML기본문법]

 1) 기본 규칙

 ⊙ 태그(tag)는 대소문자 구분하지 않는다
 ⊙ 태그는 <> 안에서 표현한다
 ⊙ 여는 태그와 닫는 태그로 구성된다  (여는 태그 , 닫는 태그 , 명령어는 그 사이에 씀)
 ⊙ 엔터 (줄바꿈)를 허용하지 않는다
 ⊙ 공백은 1칸만 허용한다
 ⊙ '파일 - 새 파일 - HTML 페이지' 를 누르면 자주 쓰는 코드들과 함께 새 글이 생김

 

 ⊙ 주석 표시 :  <!-- 주석내용 --> 

 

항상 메인으로 쓸 blank.html

⊙ 자주 쓰는 것들을 공백페이지로 만들어서 저장하고 필요할 때 가져다 쓰는 것

⊙ 1줄 : '!doctype html'은 HTML5에 최적화 된 것

⊙ 4줄 : 우리는 주로 한글로 한 것이기 때문에 en → ko 로

⊙ 8줄 : charset은 2바이트 언어의 세트라고 보면 됨. 2바이트 언어가 있다면 "UTF-8" 형태로 보여주겠다

 

[02_글자모양]

 1) 2바이트 언어 : euc-kr   완성형
                        utf-8     조합형

 ⊙ HTML 문서는 엔터는 적용되지 않고 (엔터를 위한 명령어 적용)
 ⊙ 공백은 1칸만 허용한다 (더 많은 공백을 넣기 위해서는 명령어 &nbsp;  를 사용)

 

 2) 특수문자 입력 

  ⊙ 메뉴에 있는 ⓒ 누르면 나옴, 명령어로 적히지만 브라우저에서 실행시 특수문자로 적힘 

&nbsp  공백(space) &quot;      " &amp;      & &lt;       < &gt;      > &copy;    ⓒ

 

 3) 명령어

  ⊙ <br> : 엔터 (한 줄 공백)

  ⊙ <hr> : 수평선

     hr       요소  element
   width     속성  property, attribute

  Ex)
<hr width="50px">
<hr width='50%'>
: 큰 따옴표, 작은 따옴표 상관은 없지만 하나만 적어야 함,
: 사용자가 임의로 줘야하는 것은 따옴표를 생략 말고 적어주는 것이 좋음

<strong><u><i> 진하게, 밑줄, 기울림</i></u></strong>
: 태그에서 명령어의 순서는 중요하지 않지만 닫는 순서 중요!
: 가장 마지막에 연 것부터 순서대로 닫아야함

 

4) 글자크기, 색상 (쓸 수는 있지만 안 쓰는게 좋음)

⊙ 색을 영어로 표현해도 되지만 한계가 있기 때문에 16진수로 표현, 메뉴의 팔레트 아이콘을 통해서도 색상을 부여할 수 있음

색상과 사이즈를 부여하는 모습

 

  ⊙ 제목 (문서를 구조화하기 위해서 주로 사용)

   : h1을 적고 그 안에 들어간 항목으로 h2, 그 다음으로 h3 을 사용