WordPress 를이용한웹사이트만들기 2015 년 한지웅
WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용 WordPress 기본정보설정 WordPress 관리자설정페이지 테마설치및변경 Page 만들기 / Front Page 만들기 Post 만들기 (category/ 외부링크 / 사진삽입 ) 4. WordPress 꾸미기및중급설정 메뉴만들기위젯 (Widget) 추가하기플러그인 (Plugin) 설치및활용웹사이트구성하기 5. WordPress 고급활용기법 Premium 테마활용 Social Network site와의연동 Mobile App 제작보안및최적화 6. 섬기는교회웹사이트 (skeca.org) 관리 / 업데이트방법 YouTube 동영상 upload SoundCloud 음성 upload Post 만들어올리기 YouTube Embedding 하기 SoundCloud Embedding 하기 일반 posting 이미지 posting
1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 제 1 강
웹사이트프로그램코드? Inspect element HTML code
http://info.cern.ch 1991, CERN (European Organization for Nuclear Research)
HTML HyperText Markup Langague
웹사이트의구성요소 HTML CSS CMS PHP/ASP (server-side script) Database (MySQL) JavaScript (client-side script)... Content Management System ( 내용관리시스템 ) 웹문서생성웹문서관리웹문서출판
제로보드 (zeroboard)
WordPress? 설치형, 무료오픈소스 대부분의웹호스팅업체에서자동설치기능을제공, 설치가매우간편함 Content Management System (CMS): HTML / CSS등의언어문법을몰라도제작가능한관리툴, 쉬운제작환경제공 확장성 : 테마, 플러그인등수만건의무수한자료 10년이상, CMS중전세계 1위!
WordPress 의관리자화면 (Dashboard)
Element HTML HyperText Markup Langague <html> 내용 </html> 시작 tag 종료 tag Tag 시작 tag: <tag> 종료 tag: </tag>
HTML 문서의작성 기본구성 <html> </html>: 문서의시작과끝 <head> </head>: 기본정보 <title><meta><script> <body> </body>: 실제화면에표시되는내용
***.html 형태 HTML 문서의작성
HTML Tags Link tag Image tag Font tag Line tag
Link tag <a> 태그를사용하면링크를만들수있습니다. "a" 는앵커 (Anchor) 를의미합니다. href <a> 태그는기본적으로 href 속성을가집니다. 이동할페이지주소를기입. 예 ) <a href="http://www.google.com"> 구글 </a> <a href= http://www.skeca.org > 섬기는교회 </a> <a href= mailto:servant@skeca.org > 교회이메일 </a> target target 속성은링크가걸린페이지를어떻게열것인가를결정합니다. 예 ) <a href= http://www.skeca.org target= _blank > 섬기는교회 </a> _blank : 새로운창으로열림 _self : 열려져있는자신의창으로열림
줄바꾸기 tag p (paragraph) 문단을의미하는 <p> 태그 <p> 첫번째문단 (paragraph)</p> <p> 두번째문단 (paragraph)</p> <p align= left > 왼쪽정렬 </p> <p align= center > 가운데정렬 </p> <p align= right > 오른쪽정렬 </p> br (Line Break) 줄바꿈을의미하는 <br> tag ( 시작 / 종료 tag 없이단독으로사용 ) <br><br> 혹은 <br/><br/>
Image tag (single tag) HTML 문서에이미지를삽입하기위해서는 <img> 태그를사용합니다. <img src= 이미지경로 > <img src="http://skeca.org/wp-content/uploads/2014/09/skeca_logo_2013.png > <img src=" 이미지경로 " width="100" height="200"> <a href="url"><img src=" 이미지경로 " border="0"></a> <a href= http://www.skeca.org > <img src="http://skeca.org/wp-content/uploads/2014/09/skeca_logo_2013.png > </a>
Font tag <font> 태그는글자를꾸미는데가장기본이되는태그입니다. <font> 태그는 size, color, face 3 가지의속성을가집니다. <font size="5"> 텍스트크기를지정하는 size 속성 </font> <font color="red"> 텍스트색상 </font> 을지정하는 size 속성 * Hex triplet code: white=#ffffff, black=#000000, green=#008000 <font face=" 돋움 "> 돋움글꼴로지정된텍스트입니다.</font> <font size="5" color="red" face=" 돋움 ">3 가지속성을 </font> 모두사용하였습니다.
CSS Cascading Style Sheets HTML 문서의스타일 ( 폰트크기, 색깔, 배경색등 ) 을꾸밀때사용하는언어 HTML 로뼈대를만들고 CSS 로치장을하는방법 외부 style sheet: css 라는확장자의파일을만들어연결 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <head> 내부 style sheet: <head> 부문에 style 을지정하는방법 <style type="text/css"> <!-- body {font-size:9pt;} //--> </style> </head>
CSS Cascading Style Sheets
CSS Cascading Style Sheets
CSS Cascading Style Sheets
WordPress
어디에 WordPress 를설치? 웹사이트 (web site)? 웹서버 (web server)?
Personal Computer? WordPress html? IP address? local PC
IP address DNS (Domain Name System)
WordPress html? IP address? local PC????????
웹서버 (Web Server)
DNS (Domain Name System)
웹서버 (Web Server)
웹서버 (Web Server)
웹서버호스팅 (Web Server Hosting)
웹서버호스팅 (Web Server)
siteground.com
cpanel 설정
( 서브 ) 도메인설치
WordPress 설치
WordPress 관리자화면