HTML (화면 구현)

1. 화면 구현 작업 단계

1) 요구사항 확인 / 정의

- 무엇을 만들고 싶은가 구성하는 단계
- 제작한 페이지의 전반적인 기능들을 도출.

* 대부분의 회사는 정의서와 명세서를 구분하지 않고 정의서 수준의 문서로 작업을 많이 함

2) UI설계(화면설계)

- 요구사항들을 시각적으로 조금 더 구체화 하는 단계.
- 와이어프레임, 목업 형태로 제작

와이어 프레임	뼈대 제작, 대략적인 레이아웃
목업	실제 구현을 위해 더 디테일하게 작업

3) 프로토타이핑(Prototyping)

- 실제로 출시 전, 샘플로 제작하여 시작업하는 단계
- 카카오 오븐 : 무료, 웹 기반의 와이어프레임 도구

4) UI제작

- HTML은 주로 Sublime Text로 작업 (편함)
- 실제품으로 제작, 코딩 ㄱㄱ

2. 웹 접근성

웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장.
- 사람에 대한 차별이 없어야 한다 (장애인 및 고령자도 사용 가능해야함)
- 디바이스에 대한 차별이 없어야 한다 (OS가 다르더라도 사용 가능해야함)

웹표준을 준수한다 -> 시멘틱 웹을 구성한다.

웹 표준

- 시멘틱 웹을 구성하기 위하여 사전에 미리 약속되어진 작업방식
- 웹 접근성을 확보하기 위해서는 시멘틱 웹을 작성해야 하며 시멘틱 웹을 작성하기 위해서는 웹 표준을 준수 해야함

웹 표준을 구성하는 기술

• HTML : 웹페이지의 뼈대
• CSS : HTML에 디자인을 입히는 것.
• JavaScript : 스크롤을 올릴 때 움직이는 모션 등 웹페이지의 반응을 구현

웹페이지 제작에 필요한 소프트웨어

• 구글 크롬 : 결과확인
• Node.js : JavaScript 실행도구, Sublime Text 고급기능 연동
• Sublime Text 3 : 소스코드 작성도구

Sublime Text에서 해야 할 환경설정, 패키지

{
    "bold_folder_labels": true,                 // 사이드바에서 폴더를 굵게 표시
    "font_size": 12,                            // 글자 크기
    "highlight_line": true,                        // 작성중인 행을 색상으로 강조
    "highlight_modified_tabs": true,            // 수정된 탭을 색상으로 강조
    "ignored_packages": [                        // 무시할 플러그인 (기본값 유지)
        "Vintage"
    ],
    "line_padding_bottom": 3,                    // 소스코드의 하단 여백 수준
    "overlay_scroll_bars": true,                // 스크롤바가 에디터 위에 떠 있는 상태로 표시
    "tab_size": 4,                                // 탭키에 대한 공백 갯수
    "theme": "Brogrammer.sublime-theme",
    "translate_tabs_to_spaces": true,            // 탭키 입력시 공백으로 변환
    "trim_trailing_white_space_on_save": true,  // 저장시 각 행의 뒷부분에 포함된 불필욯나 공백 삭제
    "word_wrap": true                            // 소스코드 자동 줄바꿈
}

Sublime Text에서 ctrl + shift + p -> install package

패키지 이름	설명
AFileIcon	사이드바에서 파일의 종류별로 아이콘을 표시함
AllAutocomplte	코딩시 자동 완성 기능을 지원함
AutoCloseHTMLTags	HTML 태그 작성시 마침 태그를 자동으로 추가함
AutoFileName	HTML,CSS,JS등에서 다른 파일을 참조해야 할 경우 파일의 경로명에 대한 자동 완성 지원
ColorHightlight	HTML,CSS,JS 등에서 색상 코드값을 사용할 경우 실제 색상으로 강조함
CovertToUTF8	UTF8이외의 형식을 깨지지 않게 함 (ex:EUC-KR)
Emmet	CSS선택자에 따른 HTML태그 자동 작성 기능
GitGutter	Github과 연동되어 있는 프로젝트를 작업시 변경된 파일들을 표시함
HTML-CSS-JSPrettify	HTML,CSS,JS파일의 코드 자동 정렬 기능
IMESupport	한글 입력의 부자연스러움을 해결함
SublimeLinter	코드 작성시 구문 에러가 있는 부분을 표시함
SyncedSideBar	현재 작업중인 파일과 사이드바에 선택되어지는 파일을 동기화 함

preferences메뉴 -> Package Settings -> HTML/CSS/JS Prettify -> set 'node' Path

2. HTML

1) HTML

HTML = Hyper Text + Markup + Lauguage

• 웹 브라우저를 통해 사용자에게 보여질 문서를 작성하기 위한 마크업 언어.
• HTML은 제목, 단락, 목록 등과 같이 본문을 위한 구조적 의미를 나타내는 것 뿐만 아니라
  링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법 제공
• 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있음.

Markup

• 프로그램 코드상에서 어떠한 내용을 강조하기 위한 처리기법
  • 책에서 중요한 내용을 형광펜으로 강조하는 것과 같은 의미
• 강조할 내용을 태그(TAG)라는 단위로 감싸고, 태그에는 단어를 강조하는 목적을 기술

<!-- <홈페이지> : 시작태그
http://www,naver.com : 강조할 내용
</홈페이지> : 끝태그 -->
<홈페이지> http://www.naver.com </홈페이지>

HTML의 태그

HTML에서는 태그에 의해 감싸진 내용에 웹브라우저가 그래픽을 적용하여 화면에 표현하도록 정의되어 있음.

특징 1) 시작과 끝이 존재한다.

<!-- 끝 태그가 존재하는 경우 -->
<TAG> ~~~~~내용~~~~ </TAG>

<!-- 끝 태그가 존재하지 않은 경우 -->
<TAG />

특징 2) 속성과 값이 존재한다.

HTML 태그는 포함하고 있는 내용에 대해 웹 브라우저상에서 그래픽으로 표현하기 위한 속성과 값이 존재한다.

<!-- 속성의 값은 쌍 또옴표나 홑 따옴표로 감싸주어야 한다.
예) color="red", size="3" 등 -->
<TAG 속성="값" 속성="값"> ~~~~ 내용 ~~~~ </TAG>

태그 안에 명시할 내용

태그	설명
<meta>	HTML 페이지의 설정을 웹 브라우저에게 알려주기 위해서 사용
<title>	문서 제목을 브라우저의 타이틀바나 탭에 표시하기 위해서 사용
<style>	HTML을 꾸미기 위한 CSS언어를 기술하기 위해서 사용
<link>	CSS언어를 별도로 명시한 외부 파일을 연결
<script>	HTML을 제어하기 위한 JavaScript를 기술하거나 외부 JavaScript 파일을 명시하기 위해 사용

단락 관련 태그

태그	설명
<div>	division의 약자로 "영역"을 의미, 무엇을 위한 영역인지는 알 수 없음. 중첩이 될 수 있으며 다른태그 포함가능.
<h1~6>	제목을 의미 1~6수준 까지 있음, 숫자가 작을수록 큰 제목.
<ol>	순서 있는 목록을 의미, 이 태그안에는 <li>태그가 포함 될 수 있으며 포함된 항목은 순서대로 일련번호가 포함된 상태로 출력됨.
<ul>	순서 없는 목록을 의미, 이 태그안에는 <li>태그가 포함 될 수 있으며 포함된 항목은 순서대로 도형표시가 포함된 상태로 출력됨.
<p>	본문을 정의하는 태그, 하나의 문단을 구성하고자 할 때 사용
<blockquote>	인용문을 표현하기 위한 태그
<hr />	구분선을 표시, 대부분 디자인이 적용되면서 숨겨지거나 사라지지만 html단계에서 내용을 나눌때 사용
<address>	저작권(카피라이트), 회사의 연락처 주소등을 의미하는 문장을 강조하기위해 사용 * 카피라이트 특수문자 : "copy;" 로 표시

문장이나 단어 관련 태그

글자의 모양/크기/색상 표현

<!-- size : 글자크기 1~7, color : 색상 (colorpicker에서 가져오기), face : 글꼴, 페이지를 볼 사용자 기준으로 해야함 -->
<font size="?" color="?" face="?">
  ~~~~~ 내 용 ~~~~~~
  </font>

굵게/기울임/밑줄 처리

태그	설명
<strong> ~ 내용 ~ </strong>	굵게 표시
<b> ~ 내용 ~ </b>	굵게 표시
<i>~ 내용 ~ </i>	기울임
<u> ~ 내용 ~ </u>	밑줄

스타일을 적용시키기 위한 영역 지정

<!-- <span>태그 자체로는 어떠한 기능도 없다. 
CSS 스타일을 적용하여, 포함하고 있는 내용을 시각적으로 꾸미기 위한 영역을 지정하는 용도로 사용됨. -->
<span> ~ 내용 ~ </span>

줄바꿈 처리

HTML에서는 소스상에서 줄바꿈이나 띄어쓰기를 아무리 여러 번 명시하여도 하나의 공백(띄어쓰기)만 인식된다.
<br /> 을 사용해야 한다

<br />

형광펜 효과

단어를 강조하기 위해 사용

<mark> ~ 내용 ~ </mark>

링크 적용하기

<a> 태그는 텍스트나 이미지를 포함하여 클릭할 수 있는 형태로 만들어줌.
<a> 태그는 <strong>, <b>, <i>, <span>, <br/>, <img>태그만을 포함할 수있다.

• 이동할 대상이 현재 페이지 안에 존재하는 경우
  • "#" -> 현재 페이지의 맨 위로 스크롤 이동
  • "#id값" -> 특정 id값의 위치로 스크롤 이동

<a href="이동할 페이지 경로" [target="_blank"]>
  ~ 내용 ~ 
</a>