[HTML] 0. HTML/CSS의 기본과 웹사이트 개발에 대해서

HTML(Hyper Text Markup Language)

“연결된" “문자"를 “markup"하는 “언어"

markup이란 요구사항을 위해 주석, 메모를 다는 것을 의미한다.

HTML의 핵심은 구조화이다.

이 문서의 title, subtitle, list, table은 무엇인지를 설정

구조화를 제대로 해서 마크업을 해줘야 웹 문서의 의미가 살아난다.

이렇게 의미론적으로 구조가 갖춰져있는 웹을 시맨틱(Semantic) Web이라고 한다.

왜 의미에 맞는 태그를 사용해야 하나요?

위에서 말했듯이 HTML 태그에 맞게 작성된 웹을 Semantic Web이라고 한다.

div로 템플릿을 설계할 수도 있지만 왜 각 태그를 내용에 맞게 설계해야 하는가?

우선, 단편적으로 검색에 노출될 수 있게 하는 이유가 있다.

내용에 중요성을 다르게 부여하여, 검색어와 페이지가 담고 있는 정보가 유사할 때 우선적으로 검색되게 하는 것이다.

아무에게도 알려질 수 없는 정보는 정보로서의 가치가 없다.

마치 아무도 방문하지 않는 산속 오두막에 정말 좋은 책이 있는 것과 다름 없는 것이다.

그렇기 때문에 검색이 잘되어서 정보의 공유가 원활히 이루어져야 정보로서의 가치가 존재하는 것이다.

하지만 좀 더 본질적은 이유는 웹 접근성이라는 것과 관련이 있다.

예를 들어, 웹 문서를 시각적으로 보지 못하는 시각장애인의 경우

웹 문서를 청각으로 받아들이게 되는데, 이 경우에 각 의미에 맞는 태그들로 작성된 HTML이라면

이해가 더욱 쉬울 것이다.

웹의 본질인 공유, 참여, 개방에 맞는 개발 방법인 것이다.

 View 구성요소 3가지의 역할

HTML는 의미론적인 컨텐츠.

CSS 어떻게 보여줄 것인가( Cascading style sheet )

JS는 페이지의 인터랙션

각각이 맡은 바가 따로 있다.

이것을 관점의 분리라고 한다.

웹사이트 구축 프로세스

웹 사이트는 제작자나 사이트의 주인이 아니라 대상 고객을 위해 디자인 한다.

대상 고객이 누구인가에 대한 이해는 매우 중요하다.

- 고객의 범위

- 선호하는 성별

- 고객의 국가 / 거주지 / 수입 / 교육 수준 / 결혼 여부 / 직업 / 사용한 기기

웹 사이트를 방문하는 이유는 무엇인가

- 고객이 사이트를 방문하게 될 동기와 목표를 설정

목표를 달성하기 위해 필요한 정보는?

사이트의 방문 빈도는?

와이어프레임 제작(필요한 주요 정보의 간단한 스케치)

: 정보의 계층이나 필요한 영역을 스케치한다.

*시각적 계층구조

내용을 볼 때 시각적으로 인식하는 순서를 의미한다.

이는 표현하는 항목 사이에 시각적 대비를 추가하여 만든다.

대비가 높은 항목일수록 먼저 인식하고 처리할 수 있다.

*내비게이션 디자인 원칙

간결 / 명료 / 선별 / 컨텍스트 / 상호작용 / 일관성

웹 페이지 레이아웃

전형적인 웹 페이지의 구성요소

Header

Navigation

Aside / Section

Footer

공간 분할 방법

1. 웹페이지를 구상한다
2. 웹 페이지의 구성 영역을 분리한다.
3. 구성 영역을 행 단위로 분리한다.
4. 나누어진 행의 내부 요소를 분리한다.

초기화

모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작한다.

초기화 코드 : 모든 웹 브라우저에서 동일한 출력을 만드는데 사용.

초기화코드는 카피앤페이스트!

웹 페이지의 레이아웃을 잡는 건 프린트하는 것처럼 위에서부터 요소를 분할해 쭉 내려온다.

body라고 선언한 다음

순서대로 header nav ul li

div section/aside h1 p

section 내부 요소 정리 (article calss )

뷰포트 meta 태그

특별한 정보를 제공하는 HTML 태그

모바일 장치의 너비를 생각해서 해상도를 변경해주는 태그 

자주 사용되는 html 태그 모음

http://hellomrma.com/note/ie_support_css.html#none