Chapter 01. 웹브라우저와 편집기, 기본코딩
실제 스마트문화앱(모바일 웹 앱)을 제작하기 위한 기초 첫시간으로 웹분야 1위 도서로 알려진 "HTML5 + CSS3 웹표준의 정석"을 구매해서 배우는 분들도 있습니다. 도서에 많은 예시를 담은 곳이 바로 아래 더블유 쓰리 스쿨스 닷컴 W3 Schools.com의 개념소개와 Example별로 스스로 해보기인 Try it Yourself 를 통해 처음하는 분들에게 도서없이 독학도 가능하니 제 강좌영상과 병행해 배우시면 도움이 될 거라 생각합니다.
▲전체소스포함한 예제파일 / ▼태그관련 메모장파일
HTML, CSS // 프로그래밍영역 JavaScript, JSP, PHP, ASP..
기본 HTML태그와 CSS스타일 ////////////////////////
■ 기본 HTML태그
<html>~</html>내에 크게 head, body
<head>~</head> : 타이틀, 메타태그, 스타일, 자바스크립트
<body>~</body> : 본문의 내용 글, 이미지, 미디어 연동
■ CSS스타일 <head>문에 스타일 지정은 우선 <style>~</style> 추가하고 style 내에 계단식으로 순서에 입각해 스타일을 지정한 부분을 하나씩 추가해 준다.
(CSS는 계단식으로 정리한 스타일문서란 뜻의 케스케이딩 스타일 시트 Cascading Style Sheets의 줄인말)
본문인 body 쪽 여백(마진), body내의 원하는 태그들 h1 p, 웹폰트연동의 경우는 연결되는 부분을 style내에 우선 제공업체의 태그 붙이고, 해당 태그 h1{ } 활대괄호내 스타일 삽입, 태그속 폰트패밀리 붙이기, 색상 등 추가를 위해 세미콜론(; 스타일에서는 and 그리고 또;00;00) 등으로 구분해 추가할 수 있다. 태그관련 스타일도 우선 순위가 있어서 body, h1....
◆본문의 큰 박스모델 body 스타일 body{0000; 000;} margin 바깥여백, 배경색(배경이미지), 폰트 전체 크기와 색상 등... margin은 필요시 방향을 지정해서 외부큰여백을 줄때 사용된다. ex)p 스타일이 아래 공간 50px확보하려는 경우 p{margin-bottom:50px} 이렇게 지정할 수 있다. 보통은 공통의 마진 body{margin:100px;} 시계방향 순으로 지정을 하는데, top right bottom left 이런 순서로 body{margin:0 100px 300px 100px;} body{margin:0 100px 300px;} 배경색과 테두리 박스모델 모든 태그 스타일 지정가능 body{background:#0000ff;} 16진수 헥사코드 #00f 혹은 yellow cyan 색이름 지정가능! 따로 큰 1번제목만 배색줄때 h1{background:#ffffff;}
◆웹폰트(네트워크연결되 항상 스타일내 최우선 배치) = 제목/글내용 제목폰트 h1:::: 폰트명 사천항공체 @font-face { font-family: 'SacheonHangGong-Regular'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/SacheonHangGong-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } 글내용폰트 p:::: 폰트명 수트체 @font-face { font-family: 'SUIT-Regular'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; }
//// 멀티미디어 연동 ////////////////
■ 이미지관련 HTML태그 : <img src="파일경로/파일명"> 이미지(jpg) img 태그로, src 소스의 연결된 경로와 파일명으로 구분된다. 로컬로 저장한 폴더에 있는 경우 img/abc1.jpg 인터넷에 있는 이미지의 경로인 경우는 '이미지주소'를 src 소스내 삽입해 사용한다. <img src="000.jpg">
■ 동영상 관련 HTML태그 : <iframe 프레임크기 src="동영상URL" > 대부분 YouTube의 동영상 공유에서 동영상퍼가기 <> 버튼을 누르고 복사/붙이기로 <iframe width="560" height="315" src="https://www.youtube.com/embed/fGE66bQWLrg?si=dQBcW-nurWFF3Lqe"></iframe>
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년 현재 코딩없이 솔루션으로 웹작업을 쉽게하지만,
위 예제정도는 알고 시작하면 활용에 도움이 됩니다.
CSS 캐스케이딩 스타일 시트
Cascading Style Sheets(CSS)는 계단식 스타일문서의 약어로 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. 보통은 html 태그의 head문에 삽입되지만, 별도로 독립된 style.css를 연결해 사용해 모든 문서들이 연결된 일관된 디자인으로 사용하는경우에 css를 사용한다.
아래 강좌들은 웹디자인 과정에서 다뤄본 강의 내용을 정리한 것입니다.
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 |
