스마트 문화 콘텐츠의 기본적인 콘셉트는 프로젝트를 기획하면서 알게 모르게 자연스럽게 만들어진다. 그렇기 때문에 콘셉트를 정하기 위해 가장 먼저 해야 할 일은 앞서 작성한 프로젝트 기획서를 검토하고 프로젝트 기획서 안에 이미 녹아들어 있는 콘셉트를 발견하는 것이다. 그리고 발견한 콘셉트를 구체적으로 정리하여 확장 및 발전시켜 나가야 한다. 하나의 프로젝트 기획에서 다양한 형태의 결과물 만들어질 수도 있다. 콘셉트를 어떤 방향으로 확장·발전시키느냐에 따라 전혀 다른 결과물이 나올 수 있기 때문이다. 이와 같이 하나의 자원을 토대로 다양한 사용처를 개발해 내는 것을 OSMU(One Source Multi-Use)라고 한다.
스마트문화앱 콘텐츠 설계 NCS교재
HTML은 무엇인가?
하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML)는 웹 페이지를 위한 지배적인 마크업 언어다. HTML 및 Script 언어를 입력하는 것을 코딩(Coding) 작업한다고 한다.
웹관련 분야는 웹디자인(그래픽프로그램으로 디자인 시안 제작), 웹퍼블리싱(디자인 시안을 기반으로 코딩작업), 웹프로그래밍(다양한 프로그램 언어로 커뮤니티환경을 조성) 3개의 분야로 나눠진다.
웹관련된 직업군 ◆웹디자이너는 시각적인 시안을 디자인하는 사람으로 클라이언트의 제작의도에 맞게 화면의 구성인 레이아웃, 로고, 배너 등 디자인만을 하는 직군입니다. ◆웹 퍼블리셔는 웹디자이너가 구상한 디자인을 HTML, CSS, JavaScript로 실제로 코딩하는 직군을 말합니다. 디자이너의 의도대로 1px의 오차도 없이 그림형태의 시안을 정확한 코딩을 통해 웹문서와 관련된 스타일, 기능을 구현하는 것이 특징입니다. ◆프론트 엔드 개발자는 HTML, CSS, JavaScript를 활용하여 웹 페이지의 구조와 디자인 뿐만 아니라 API를 통해 서버와 데이터를 주고 받는 것까지 구현하는 사람을 뜻합니다. ◆백 엔드 개발자들은 프론트엔드 개발자가 JavaScript를 이용하여 전달해 준 형태를 서버에서 데이터를 잘 받아서 사용자에게 보여주고, 또 사용자가 입력한 데이터를 서버에 잘 전달해주는 오리지널 웹프로그래머의 영역의 일을 합니다. 회원/데이터/서버에서 프로그래밍 담당하는 책임자이다. 그누보드5 등의 게시판 프로그램들이 프로그래머들의 직군을 위협하고 있다. 여러분의 목표가 되는 직군입니다.
HTML의 구조
<html>로 시작해서 </html>과 같이 슬리시로 구분하며 종료를 한다. html내에는 아래와 같은 기본 구조를 갖고 있다. <!DOCTYPE html>는 스마트폰 환경의 html5의 선언부분이며, 크게 머리인 head와 몸체인 body로 구분된다. head에는 페이지 제목, 스타일(CSS), 외부파일 연동하는 부분이 들어가고, 실제 보여지는 부분은 body내에 추가하는 코딩작업으로 구현된다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML의 교과서적인 웹사이트
웹퍼블리싱관련 많은 저자들이 참고하여 책을 저술하는 예제와 설명이 잘되있는 교본사이트
W3Schools Online Web Tutorials
HTML Example:
This is a heading
This is a paragraph.
Try it Yourself » CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: ce
www.w3schools.com
HTML 에디터
위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")의 문서편집기와 유사한 편집기(Editor)를 이용해서 코딩작업을 진행하는데, 다양한 편집기가 있다. Adobe의 Dreamweaver는 표(Table) 및 디자인 구성을 직접보는 위지위그의 대표적인 편집기였으나, 요즘은 검은 화면에 텍스트가 각 구성요소별로 보여지는 서브라임텍스트, 아톰, 비쥬얼 스튜디오 코드 등 편집기들을 주로 사용한다.
본 교육에는 쉽고 빠른 코딩을 위해 Sublime Text 3를 이용해서 코딩교육을 진행하겠습니다. 아래가 공식사이트 다운로드이며, 직접다운로드는 여기를 누르세요.
Sublime Text - A sophisticated text editor for code, markup and prose
Goto Anything Use Goto Anything to open files with only a few keystrokes, and instantly jump to symbols, lines or words. Triggered with Ctrl+P⌘+P, it is possible to: Type part of a file name to open it. Type @ to jump to symbols, # to search within the f
www.sublimetext.com
Sublime Text 3 외에도 Visual Studio Code를 이용하기도 하며 5종 정도의 웹문서 편집기가 있습니다.
html 기초-#01 웹문서 만들어 보기
기본적인 HTML문서 만들어보기를 해보겠습니다. 제목글, 문단글, 이미지삽입, 영상삽입, 하이퍼링크 까지 아래 강의영상을 보면서 따라해봅니다.
#02 웹문서 리스트와 하이퍼링크 기초
목록의 종류
순서없는 정렬되지 않은 목록 (An unordered list) / 정렬 된 목록(An ordered list ) / 설명 목록(A description list)
아래는 기초강좌에 사용한 예제입니다. 압축을 풀어서 서브라임 텍스트에서 열어보세요.
'UI UX(Web)' 카테고리의 다른 글
| 스마트문화앱 콘텐츠설계(0719) (0) | 2023.07.20 |
|---|---|
| Web 02. HTML Style, Color, List, Table (0) | 2023.07.18 |
| 소셜로그인 지원 (0) | 2022.05.24 |
| SNS마케팅을 위한 콘텐츠 제작실무(평가 : 공식 블로그 제작) (0) | 2022.05.23 |
| 키워드로 분석한 웹분야의 취업키워드(카드뉴스, 블로그 디자인) (0) | 2022.05.19 |
