여러분들이 웹코딩과 디자인으로 구현한 내용은 퍼블리싱(공개)하지 않는다면, 내컴퓨터에서 브라우저로만 보는 디렉토리(폴더)속 html문서일 뿐이다. 실제 웹사이트를 만드는 기술은 html의 해박한 지식외에도 솔루션들을 이용해서 만들어 낸다.
실전경험을 쌓는 차원에서 웹호스팅과 도메인 서비스를 이용해서 홈페이지를 만들어 보자. 우선, 안전적인 전용회선이 연결된 서버컴퓨터의 일정한 공간을 임대하여 내용을 채우고 선보이는 역할이 웹호스팅이라 한다. 도메인은 IP주소로된 URL을 10자 내외의 영어와 숫자로 만든 의미를 담은 문자형태로 웹사이트의 특성을 담을 것이다. 웹호스팅과 도메인은 모두 유료로 1년정도의 사용기간이 만료되기 전 연장을 통해서 웹사이트를 유지해야하는데, 홈피를 처음 만들어보는 분들은 무료 호스팅과 도메인 서비스를 통해 만들어 보는 경험을 해보면 실무에 도움이 될 것이다.
1. 웹호스팅(Webhosting)
홈피제작을 위한 자료를 올려놓을 수 있는 공간을 임대해서 사용하는 것을 웹호스팅이라 합니다. 대부분 유료가 많지만, 포트폴리오제작을 위해서 쉽게 무료로 웹호스팅하는 방법을 소개합니다.
✈️ 닷홈(3개월 무료)
HD,DB 200MB
무료도메인 id.dothome.co.kr
✈️ 우비(평생무료)
HD,DB 100MB
무료도메인 id.woobi.co.kr
✈️ 카페24(유료)
무료쇼핑몰, HD,DB 200MB 웹호스팅(전용회선IP 호스팅공간사용-월세공간사용)
HD,DB 700MB(월500원)~1.4GB (월1,100원)
도메인(고유이름 영문,한글 사용-1년단위로 갱신 1년 22000원)
imbc.com , naver.com
웹호스팅과 무료도메인이 해결되었다면, 웹호스팅한 서버공간에 파일을 올려야 웹사이트가 제대로 보여집니다. 파일전송프로토콜에 웹호스팅한 회원계정(ID / PW)로 접속해서 웹문서와 이미지파일등 홈페이지용 관련 파일을 전송해봅니다.
🚘 FTP 사용
FileZilla Client Additional Download > 바로가기
Windows 64bit - Setup버전이 아닌 포터블(무설치판)을 다운받습니다. FileZilla_3.53.1_win64.zip
아래는 웹호스팅과 FTP사용 관련 영상강좌입니다.
2. DB셋팅-게시판프로그램 설치 및 데이터베이스 셋팅
홈피제작을 HTML과 CSS로만 할 수 없습니다. 홈피(홈페이지, 웹사이트라 칭함)를 제작하기 위해서는 웹사이트제작회사인 웹에이전시 기준으로 웹디자이너-웹퍼블리셔(코딩)-웹프로그래머을 통해서 검색, 회원가입, 고객과의 커뮤니티를 위해서는 3개의 직군이 유기적으로 웹프로젝트 작업을 해야 합니다. 이는 각 파트별 전문가들이 투입되는 프로젝트로 많은 비용과 시간을 요하는 데, 그누보드5를 이용하면 1인이 충분이 만들 수 있습니다.
국내기업에서 웹에이전시로서 실질적인 웹사이트(홈페이지) 제작에는 프로젝트트의 전반적인 운영책임자인 PM(Project Manager)인 기획자와 웹디자이너, 웹퍼블리셔, 웹프로그래머 등의 많은 인력이 투입되어 1~5개월동안 시간과 비용을 들이며 제작기간내에 많은 시행착오를 거쳐서 제작을 하게된다.
잡코리아 통합검색
잡코리아의 모든 채용정보를 쉽고 빠르게 검색해보세요.
www.jobkorea.co.kr
1인3역하는 그누보드5로 실제 홈페이지를 만들자!
웹디자이너가 여러분이라면, 웹퍼블리셔을 통해 기본코딩을 하고, 웹프로그래머에 의해 기능적인 요소가 구현되는 실제 사이트를 만들어야 한다. 하지만, 오픈소스 기반의 그누보드5를 이용한다면 웹퍼블리셔와 웹프로그래머의 역할을 할 수 있다. 아래 배너를 통해서 그누보드5의 다운로드와 설치하기를 진행해보자. PHP기반의 게시판프로그램은 서버측에 설치하고 셋팅하여 정상적인 웹사이트와 확장된 기능으로 반응형웹 사이트를 구축할 수 있는 솔루션이다.
그누보드5 다운로드 > SIR
그누보드, 영카트 개발사로 웹사이트와 쇼핑몰을 무료로 만들수 있는 수많은 솔루션을 무료로 제공하고 있으며 다국어버전도 배포하고 있습니다.
sir.kr
위 그누보드5 공식사이트로 가서 최신버전을 다운받아서 개발소스폴더에 보관합니다.
D드라이브에 다운받은 그누보드5 설치파일(압축파일)을 매번 다운로드하기 힘드니 잘 보관하세요.
웹작업에 구분한 폴더인 html 루트드렉토리에 복사한 설치파일을 "여기에 풀기"로 아래 그림과 같이 풀어주시고, 무거운 압축파일을 지워주세요.
로컬주소(D:\홍길동\웹작업\닷홈\oztv\html)를 미리 복사해 놓습니다.
FTP업로드 전/후에 data 폴더를 미리(혹은 후에) 만들어서 리모트사이트에 같이 업로드해야 설치가 진행됩니다. data 폴더(디렉토리)는 게시판 자료가 저장되는 공간으로 별도로 만들어야 합니다.
로컬주소(D:\홍길동\웹작업\닷홈\oztv\html)를 미리 복사했다면, FTP접속후 왼쪽 상단의 로컬사이트 자리에 붙이고, 전체파일 선택후 업로드를 합니다. 중간에 덮어쓸 경우가 있은 경우 덮어쓰기하세요. 총2136개의 폴더와 파일들이 업로드 되면 설치를 진행합니다.
양쪽에 디렉토리(폴터)인 'data'이름의 폴더를 생성한 후 설치를 진행합니다. data 폴더가 생성되야 설치가 진행됩니다.
다음을 눌러서 진행이 완료되면 admin으로 접속을 해봅니다.
축약한 그누보드5 설치순서
01. 왼쪽의 로컬사이트(내컴)에서 오른쪽의 리모트사이트(서버)에 업로드한다. 루트인 /html 디렉토리내 index.php 외 다수의 디렉토리들을 업로드해야한다.
02. 게시판 자료가 삽입되는 디렉토리(폴터)인 'data'이름의 폴더를 리모트에 만들어준다.(01에서 미리 'data' 폴더를 만들어서 같이 올리는 것도 좋은방법이다.)
03. 브라우저에서 자신의 URL 도메인을 입력하여 그누보드5 설치페이지(index.php)를 확인해보고 설치를 진행한다.
04. MySQL 정보입력창에서 User와 DB는 동일한 ID로, DB암호도 입력한다. (웹호스팅 신청시 노트했던 메모장을 참고해서 삽입한다. DB암호가 틀린경우 Error가 나니 닷홈의 상세보기에 DB암호를 변경 후 다시 시도해 본다.)
05. 아래항목의 최고관리자 정보입력창에서는 admin(정해진이름) 밑에 비번을 잘 입력하고 노트를 해놓는다. admin / sa****ho
그누보드5 설치순서가 복잡하고 어려웠다면, 아래 영상을 참고하고 따라해 보자.
※참고 : 반응형웹 관련지식
반응형웹을 구현하기 위한 미디어쿼리 등 관련지식을 알아보고 익혀보는 시간을 갖어보세요.
미디어쿼리
미디어쿼리는 디바이스(모니터,스마트폰)의 기기별 보는 조건에 맞게 다르게 보여야할 종속된 스타일의 변화를 적용하게 하는 역할을 한다.
www.w3schools.com/css/css3_mediaqueries.asp
CSS Media Queries
CSS Media Queries CSS2 Introduced Media Types The @media rule, introduced in CSS2, made it possible to define different style rules for different media types. Examples: You could have one set of style rules for computer screens, one for printers, one for h
www.w3schools.com
01. 뷰포스설정
반응형웹의 미디어쿼리 적용전 삽입할 메타태그 : 전체 문서의 보이는 부분인 뷰포트의 너비를 디바이스의 너비와 같게표현하는 부분과 인식하는 크기는 100% 맞춰서 보여줘라를 지정한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
02. 배경이미지 처리
배경색상을 이미지와 혼용해서 보이게하는 스타일이다. 아래 압축파일을 다운로드해서 적용해보자.
/* 배경색과 이미지 한줄처리*/
body{background:#4f8aa7 url('imgs/bg_1920.jpg') no-repeat center bottom;}
/* 전체 구성이 안된 상태에서 배경이미지가 맞지않을 때, 디스플레이(화면)의 높이에 맞게 100%화해서 보이게하는 규정 */
html,body{height:100%}
03. 최종 쿼리문 삽입
미디어쿼리문 : 최대화면 크기에 준해서 그 이하까지 규정을 말한다. 아래는 셀폰(360x640px)의 너비인 360px 기준에서는 배경을 다르게 표현해 달라는 조건내에서 스타일규정을 지정한 것이다. 미디어쿼리문은 필히 CSS의 최하단에 배치를 해야한다.
@media screen and (max-width: 360px) {
body{background:#4f8aa7 url('imgs/bg_360.jpg') no-repeat center bottom;
}
04. 클리어속성
박스모델끼리 세로 구성시 섞이거나 접첩되는 클리어문제는 아래 CSS와 태그로 간단하게 조절하자.
.clear-mt{clear:both;margin-top:150px;border:0;}
<hr class="clear-mt">
05. 폰트어썸 요소삽입
픽토그램형식의 벡터아이콘중 가장 인기있는 폰트어썸은 서체성격이 있다. 고유의 CSS와 연동해야 해서 복잡한 클래스명이 있는데, 아래 전화기 이미지의 태그가 대표적인예이다.
폰트어썸을 이용하기 위해서 head문에 삽입해야하는
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
코드없는 폰트어썸 아이콘은 URL을 통해서 검색할 수 있다.
https://fontawesome.com/v4.7.0/icons/
전화기모양의 폰트어썸 태그
<i class="fa fa-phone-square" aria-hidden="true"></i>
06. 반응형에 특정조건에만 보이게 하는 비저빌리티
아래는 특정 박스모델을 안보이게 했다가, 360너비에 보이게하는 쿼리문의 적용예이다. visibliliy는 공간을 차지하지 않고 안보이게해서, diplay:none과 구분된다.
#phone2{background:cyan;visibility:hidden;}
@media screen and (max-width:360px){
#phone2{visibility:visible;}
}
07. How to를 통해 특정 개발소스를 찾아 적용해보자
W3SCHOOLS.COM에 개발소스 중 UI와 관련된 자료들이 많으니 찾아서 적용해보자.
How To Create an Accordion (w3schools.com)
How To Create an Accordion
How TO - Collapsibles/Accordion Learn how to create an accordion (collapsible content). Accordion Accordions are useful when you want to toggle between hiding and showing large amount of content: Section 1 Lorem ipsum dolor sit amet, consectetur adipisicin
www.w3schools.com
아래는 UI/UX Design Web Source 개발소스를 모아놓은 샘플입니다. 여러분도 다운받아서 필요한 경우에 바로적용할 수 있게 개발소스들을 모아보세요.
Video Tag
<video width="720" autoplay controls muted> <source src="https://cdn.e-koreatech.ac.kr/Portal/olei/2020/life/0278/20200831141522/01/video/01_02.mp4" type="video/mp4"> </video>
'UI UX(Web)' 카테고리의 다른 글
| PHP(html) 인클루드문 적용 (0) | 2022.04.13 |
|---|---|
| 웹사이트제작 2편 - 그누보드 테마와 스킨 (0) | 2022.04.12 |
| [영상강좌목록] 디지털웹디자인 콘텐츠제작실무 (0) | 2022.04.01 |
| 웹기초2- HTML, CSS를 활용한 프로토타입 (Onepage) (0) | 2022.03.18 |
| 웹기초-01. 일반적인 웹문서와 스타일 기초 (0) | 2022.03.16 |
