Chapter 01. 웹브라우저와 편집기, 기본코딩
실제 스마트문화앱(모바일 웹 앱)을 제작하기 위한 기초 첫시간으로 웹분야 1위 도서로 알려진 "HTML5 + CSS3 웹표준의 정석"을 구매해서 배우는 분들도 있습니다. 도서에 많은 예시를 담은 곳이 바로 아래 더블유 쓰리 스쿨스 닷컴 W3 Schools.com의 개념소개와 Example별로 스스로 해보기인 Try it Yourself 를 통해 처음하는 분들에게 도서없이 독학도 가능하니 제 강좌영상과 병행해 배우시면 도움이 될 거라 생각합니다.
Try it Yourself 를 누르고 기본 예시가 포함된 창에서 왼쪽 내용을 바꾸고 Run > 을 누르면 오른쪽에 결과가 보이는데, 쉽게 해당된 Tag를 테스트 해보고 작업하는 곳에 붙여서 사용하는 적용하는 사례가 많습니다.
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
모바일 웹 앱은 인터넷을 통하여 웹 브라우저를 통해 실행되는 앱으로 주로 HTML5 웹표준을 이용하여 실행된다. 따라서 모바일 웹 앱은 모바일 기기에서 제공하는 모바일 웹과 마찬가지로 디자인시안을 기반으로 웹 개발에서 사용되는 HTML, CSS, Java Script로는 일반코딩과 스타일기능을 / JSP, PHP, ASP 등 웹프로그램(DB Data Base, 회원가입, 게시판)기능을 종해서 일반적인 웹 기술로 개발이 가능하다는 장점이 있다.
화면크기인 디바이스에 따라 PC & Notebook, Tablet, Cell phone 변화된 레이아웃 구성으로 보이게 하는 기술을 반응형웹(Responsive Web)이라고 말한다. 특히 스마트폰을 기준으로 모바일 웹앱이라 이름이 붙지만, 실제는 컴퓨터에서도 볼 수 있는 것을 포함한 개념이다. [ NCS 스마트문화앱 구현 - 프로그래밍 계획 구체화 p.19]
웹사이트나 앱개발자를 2분류로 구분해서 프론트엔드(Front-end)와 백엔드(Back-end)로 구분합니다.
웹디자이너 및 웹퍼블리셔에 해당되는 프론트엔드는 사용자가 직접 상호 작용하는 UI(사용자 인터페이스)를 개발하며, 웹프로그래머에 해당되는 백엔드는 서버, 데이터베이스, 애플리케이션 로직 등 사용자가 직접 보거나 상호 작용하지 않는 부분을 개발합니다. 복잡한 용어들이 많죠?
웹 문서 편집 (코딩) 응용프로그램, Web Editor
영상편집처럼, 웹문서를 편집하는 프로그램. 웹에디터들이 많이 있습니다. 그중에서 아래 서브라임텍스트를 다운로드 후 설치해서, html문서작업을 할 수 있습니다. 아래 포터블버전을 다운로드 후, 압축풀고 실행파일 클릭으로 바로 이용할 수 있는 버전을 추천합니다.
https://www.sublimetext.com/download_thanks?target=win-x64-portable
Thank You - Sublime Text
A cross-platform Git client, done the Sublime Text way
www.sublimetext.com
Example 01
2025년 현재 코딩없이 솔루션으로 웹작업을 쉽게하지만,
위 예제정도는 알고 시작하면 활용에 도움이 됩니다.

아래 강좌들은 웹디자인 과정에서 다뤄본 강의 내용을 정리한 것입니다.
Chapter 02. HTML기초와 Head문에 삽입되는 것들
HTML문서는 본문에 대부분 보여지는 내용을 Body태그내에 구성한다.
HTML을 처음 배우는 분들은 Head문에는 title이 웹문서를 브라우저로 보는 타이틀만 보여지는 것으로 알 수 있는데, Head문에도 상당히 두뇌같은 복잡한 태그들이 들어가서 궁금해 하는 분들을 위해 정리해본다.
<!DOCTYPE html> <!-- html5문서라는 독립선언문 -->
<html lang="ko"> <!-- 한국어로 표현된 문서의미 -->
<head>
<!-- 브라우저 상단의 탭에 보여지는 웹문서제목 -->
<title>Hello</title>
<!-- 웹문서제목앞에 위치한 파비콘 표기 -->
<link rel="shortcut icon" type="image/x-icon" href="http://hbjeil.cafe24.com/fa.ico" />
<!-- 영어가 아닌 언어용 유니코드 Unicode Transformation Format -->
<meta charset="utf-8">
<!-- 익스플로러와 호환성 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 반응형웹을 위해 뷰포트를 디바이스크기로 지정해 100%인식 -->
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<!-- 검색엔진에서 키워드 검색용 메타태그 // 검색시 적용 -->
<meta name="keywords" content="키워드,콤마로구분">
<meta name="description" content="해당사이트의 설명 콤마없이">
<meta name="author" content="소유자">
<!-- 최초 페이스북에 의해 생성된 오픈그래프 메타태그 // 카톡,페북 URL공개시 적용 -->
<meta property="og:url" content="http://csclean.kr/">
<meta property="og:type" content="website">
<meta property="og:title" content="주식회사 청솔크린">
<meta property="og:image" content="http://csclean.kr/og_csclean_kr.jpg">
<meta property="og:description" content="공공시설물/신축/아파트/상업용 건물청소">
<!-- 헤드문은 메타태그 외에도 자바스크립트, CSS등이 삽입된다. -->
<style type="text/css">
/*태그외 스타일의 주석으로 문서스타일을 설명함*/
body{margin:0 300px;}
</style>
</head>
저 태그들은 다 외면서 하는 사람 없어요 필요한 부분 구글 검색해서 복/붙해서 일부만 수정하는 경우가 대부분이니 위 태그들을 종합해서 사용하면 도움이 될 것입니다.

Chapter 03. 글씨와 외부 이미지
기본적인 웹문서를 새문서를 생성하고 h1, p, img태그를 통한 간단한 html문서를 만들어 봅니다. 수업자료가 없는 분들은 위 라이언위 html.zip파일을 다운받아서 따라 해보세요
목록(List)을 표현하는 태그들 ul, ol, dl
보통 특정주제에 종류들을 나열하는 리스트(List) 라고하는 목록을 표현하는 태그들에는 순서없는(Unordered List) <ul>과 순서에 맞춘(Ordered List) <ol> 태그가 있어서 일정한 기호와 번호를 기재하는 리스트로 하부에 표현이된다.
<ul>
<li></li>
<li></li>
</ul>
그외에 커피샵처럼 기호없이 용어 및 설명이 포함된 설명 목록을 표현하는 <dl>
'UI UX(Web)' 카테고리의 다른 글
NCS 로고 SVG, 웹용 아이콘 (0) | 2025.03.28 |
---|---|
Web 01 Part1. 스마트문화앱 콘텐츠, HTML입문 (5) | 2024.12.19 |
웹 포트폴리오와 전시를 위한 OnePage 반응형웹 템플릿 (0) | 2024.12.10 |
Bootstrap 개요, 반응형웹을 위한 그리드 시스템(4가지 클래스) (0) | 2024.09.09 |
이미지 색상컨셉 Color-Palette-Generator (0) | 2024.09.09 |