[UIUX] 3-2

HTML
- 코딩 프로그램 규칙
프로젝트를 진행할때는 항상 폴더를 하나 생성해야하며, 이 안에는 html, css, java script, image 등 각각의 폴더들이 있어야한다.
이 때, 폴더명은 꼭 영문이어야 하며 소문자로 써준다. 숫자를 사용하는것은 상관없지만,
제일 앞은 꼭 소문자 영어로 작성해준다.
폴더안에는 메인페이지를 나타내는 index.html이라는 파일도 필요한데, 이 때 이름은 꼭 저대로 저장해줘야 컴퓨터도 메인페이지임을 인식할 수 있다.

- 코딩 프로그램 사용법
폴더를 통채로 Visual Studio Code 드래그해서 열어준 뒤, 프로그램에서 폴더나 파일을 만들며 작업한다. 거기서 작업한 뒤 저장해주면, 실제 폴더에도 폴더나 파일이 생성된다.

파일 생성시 확장자는 꼭 ~.html로 저장한다.

- html 코드
! + 엔터를 눌러주면 html 기본 양식이 작성된다. html을 사용하려면 꼭 써야하는 기본 구조로 다음과 같이 구성된다.

• < !DOCTYPE html>
  웹브라우저에게 현재 문서가 html 문서이다 하고 선언하는 역할. 보통 html의 태그들은 소문자로 쓰여지지만, DOCTYPE HTML은 항상 대문자로 쓰여진다.

  • 크로스 브라우징
    html 문서작성을 시작하기에 앞서, DOCTYPE html를 선언하지 않으면, 호환모드로 작동하게 된다. 이는 브라우저마다 문서를 나타내는 방식이 다르기 때문에 브라우저마다 보여지는 방식이 다를수 있고, 일부 브라우저에서는 깨져보이기도 한다. 따라서 모든 브라우저에서 제작자의 의도대로 보여지기 위해 W3C의 규격에 맞는 표준 웹 기술을 적용해야 하는데 이 작업을 크로스 브라우징이라고 한다.

• < html>
  이 태그로 html파일의 시작을 알려준다. 반대로 html 문서가 끝났을 때는 다시 이 태그로 문서를 닫아준다.

• < head>
  head 태그는 인간의 두뇌와 같은 태그이다. 따라서 웹브라우저가 알아야 할 내용들을 적는 곳이지만 실제 브라우저에 나타나지는 않는다.
  
  head 영역에선 주로 meta와 title 태그를 사용한다.

  • 단독태그 < meta>

    < meta charset="UTF-8"/> : 인코딩형식으로, 이렇게 지정해주지 않으면 글자가 깨져서 보일 수 있다.
    이런 태그 뒤에 속성을 사용할 때는 꼭 <태그명 속성명="값"> 형식으로 기재한다.

  • < title>
    head 부분 중 유일하게 브라우저에 표시되는 title은 웹 문서의 제목을 입력하는 태그이다. 여기서 입력한 제목은 브라우저 탭에 표시된다.

• < body>
  body태그는 인간의 몸통에 해당하는 부분으로, html문서의 대부분 태그들은 body안에 들어가게 된다. body태그 안에 적은 내용들은 저장한 뒤 live surver를 이용해 브라우저로 볼 수 있다.