All about {Web}

XAMPP (Apache + MariaDB + PHP + Perl) 메뉴 설명 및 설정

01. 컴퓨터 바탕화면의 "XAMPP Control Panel"을 실행하거나 windows 메뉴 > 프로그램 > XAMPP폴더 > XAMPP Control Panel을 실행합니다.

02. "Apache"와 "MySQL"의 Start 버튼을 눌러 실행합니다.


03. 위의 그림과 같이 실행되면 PID(S)와 Port(s)에 숫자가 나타나면서 실행됩니다.
04. [1] Config 을 클릭합니다.

[2]와 같이 "Configuration of Control Panel " 대화상자가 나타납니다.
A. Editor : 코딩에 사용할 코드 에디터를 선택지정합니다.
B. Browser : 기본 브라우저로 사용할 경로 및 실행파일을 선택합니다.
C. Autostart of Modules :  XAMPP를 실행하면 자동으로 실행될 모듈을 선택합니다. (Apache, MySQL을 선택하면 무난)
D. Start Control Panel Minimized : XAMPP 실행시 왼쪽 화면 하단에 최소화된 컨트롤 패널을 원하면 체크
E. Enable Tomcat output window :  체크시 톰캣의 윈도우 출력 가능 
F. Check default ports on startup :  시작시 디폴트 포트를 체크
G. Show debug information :  디버그 정보를 출력 
H. Service and Port Settings :  모듈별 사용 포트 설정 및 변경

※ MariaDB :
본래 MySQL이라는 오픈소스 개발그룹이 있었고 그걸 Oracle에서 인수했었지만,

조직내 이해관계가 맞지 않아 일부 핵심인원이 퇴사하고 나와서 MySQL 코어를 가지고 Fork(분리개발)한것이 MariaDB이다.

둘의 기능상의 차이는 거의 없지만 MariaDB의 퍼포먼스가 더 좋고, 엔진도 추가되어 오히려 MySQL보다 뛰어나며 가장 큰 장점은 속도이다. 2배 가량 퍼포먼스가 개선되었다고 한다.

그누(Gnu) 보드란?

그누보드는 공유 정신을 나타내는 "GNU" 와 게시판을 나타내는 "Board" 가 합쳐진 말입니다.
그누보드는 웹에서 게시글, 회원정보 등을 편리하게 관리하는 게시판(BBS - Bulletin Board System) 프로그램입니다. 오픈된 소스 코드를 바탕으로 다양한 기능(플러그인)을 추가하기 쉽게 제작되어 있습니다.
그누보드5의 대표적인 플러그인 으로는 쇼핑몰 기능을 하는 "영카트5" 가 있습니다.

사이트 : https://sir.kr/

다음 강좌 :  그누보드 설치

WordPress (워드프레스) 란?

1. 웹 기반 어플리케이션 ( Web based Application ).
2. 콘텐츠 관리 시스템 ( Content Management System - CMS )
3. 오픈 소스 ( Open Source )
4. 세계에서 가장 인기 있는 CMS ( World's Most Popular CMS )
5. PHP & MySQL에서 사용
6. 블로그(Blog) 또는 정적 사이트( Static Site ) 제작 가능


웹상에서 콘텐츠를 저작하고 출판할 수 있는 오픈 소스 콘텐츠 관리 시스템. 홈페이지처럼 자체적인 도메인과 호스팅을 이용할 수 있으며 자유롭게 콘텐츠 제작, 배포 및 키워드 검색을 할 수 있다. 또한 반응형 웹을 지원함으로써 모바일 서비스도 이용할 수 있다. 워드프레스는 2003년 매트 물렌웨그가 창립하였다.

[출처] 워드프레스 [WordPress] (IT용어사전, 한국정보통신기술협회)

☞ 다운로드 사이트
영문)  https://wordpress.org/    한글) https://ko.wordpress.org/

※ 왜 워드프레스(wordpress) 인가?
1. 워드레스는 소규모 비지니스와 전문적인 사이트를 만들어 사용하기에 적합하고 뛰어난 프랫폼(platform) 이다.
2. 특별한 소프트웨어가 필요하지 않다.
3. 수천개의 테마(theme)와 프러그인(Plug-in)이 제공된다.
4. 쉽게 워드프레스와 친숙해 질 수 있다.


 또 다른 CMS 프로그램
01. Gnu Board,  XE
02. - Open Source CMS :  Joomla, Drupal
     - Proprietary (Commercial) CMS :  Godaddy, Website Tonight, Weebly, Yola

wordpress.org  VS  wordpress.com


01. wordpress.org :  WordPress 소프트웨어를 제공하는 사이트 (도메인 구입이나 웹호스팅을 사용해야 할 수 있다.)
02. wordpress.com :  무료 또는 유로로 웹호스팅을 제공하는 사이트, 일부 기능이 제한적이다. (일부 플러그인 포함되어 있지 않다.)
02. WordPress 다운로드

CODE IS POETRY

Chord Tracker [YAMAHA] - iphone App Only

기타 초급, 중급자에게 아주 유용한 무료 앱입니다.  노래를 선택해 플레이해주면 자동으로 코드(키보드, 기타)가 생성됩니다.


① 애플 "앱스토어"에서 YAMAHA "Chord Tracker" app을 다운로드 합니다.


① YAMAHA "Chord Tracker" app을 설치합니다.


① 키보드 코드를 나타냅니다.
② 기타코드를 나타냅니다.
③ Play Settings - 템포와 음높이를 조절할수 있는 화면 ⓓ로 넘어 갑니다.


① 템포(Tempo)를 조절할 수 있습니다.
② 조를 변경(Transpose)할 수 있습니다.

'Mobile > Mobile App' 카테고리의 다른 글

웹디자인을 위한 컬러 앱 소개  (4) 2018.04.22

PHP 코딩을 위한 로컬 서버를 만들자 -  XAMPP - Apache + MariaDB + PHP + Perl

https://www.apachefriends.org/index.html

PHP
하이퍼텍스트 생성 언어(HTML)에 포함되어 동작하는 스크립팅 언어. 별도의 실행 파일을 만들 필요 없이 HTML 문서 안에 직접 포함시켜 사용하며, C, 자바, 펄 언어 등에서 많은 문장 형식을 준용하고 있어 동적인 웹 문서를 빠르고 쉽게 작성할 수 있다. ASP(Active Server Pages)와 같이 스크립트에 따라 내용이 다양해서 동적 HTML 처리 속도가 빠르며, PHP 스크립트가 포함된 HTML 페이지에는 .php, .php3, .phtml이 붙는 파일 이름이 부여된다. 처음에는 ‘Personal Home Page Tools’이라 불렸으며, 공개된 무료 소스이다.

-출처 : PHP [Hypertext Preprocessor] (IT용어사전, 한국정보통신기술협회)

01. 상담 메뉴중 "DOWNLOAD"를 클릭합니다.

 

03. 다운로드 페이지에서 "XAMPP for Windows 5.6.35"를 다운로드 합니다.  PHP 7버전도 다운 가능하지만 현재 웹호스팅에서 보편화 되어있는 PHP 5.6버전을 다운로드합니다.
순서대로 디폴트 값으로 설치를 완료합니다.

 

 

 

웹폰트 (web font) 사용하기 (1) - CDN 사용

눈누 상업용 무료 한글폰트
http://noonnu.cc/

01. 사용하고자 하는 폰트를 클릭합니다.

02. A부분의 웹폰트로 사용하기를 복사해 style.css 또는 웹페이지의 <style></style> 안에 붙여넣기를 합니다.

03. 적용하고자 하는 태그에 다음과 같이 삽입합니다.
ex) p { font-family : 'Godo' font-size : 15px; }

고도체 웹폰트 예시보기 [GO]


 

CSS Property (속성 ) : Font

☞ 4가지 선택자
*{ 스타일 속성: 속성값; }   ex) * { color: blue; }  ※ * = all
태그명{ 스타일 속성: 속성값; }   ex) body { color: black; }
.클래스명{ 스타일 속성: 속성값;}   ex) .wooin21 { color: pink; }
#아이디{ 스타일 속성: 속성값;}   ex) #wooin21 { color: orange; }

CSS 기본문법 :  p { 속성: 속성 값 }  ex)  p { font-family :  'Nanum Gothic', tahoma, verdana; }   /*  주석  */



Font 관련 Property (속성 ) :
font-family, font-style, font-variant, font-size, font-weight, font-stretch

[ example ]
01. font-family
p {
    font-family: "Times New Roman", Times, serif;
}

02. font-style
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

03. font-size

p {
    font-size: 14px;
}
p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

04. font-weight
p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

05. font-variant
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

05. font-variant
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}


Responsive Font Size
vw = "viewport width"

ex) <h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

☞ CSS 관련 유용한 사이트 :  https://www.w3schools.com/

CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를......

http://leaverou.github.io/prefixfree/ 
사이트에 접속 후 (1)'Only 2KB gzipped'를 오른쪽 마우스를 클릭해서 'prefixfree.min.js' 파일을 저장한다.

<head>
    <script src="/js 파일 경로/prefixfree.min.js">
</head>
삽입한다. 


HTML에 CSS 적용 방법

01. 내부 스타일 시트 ( Internal CSS )
내부에 기입하는 방식

<html>
<head>
<style>
#welcome {
  color: purple;
}
.welcome {
  color: orange;
}
</style>
</head>
<body>
  <p id="welcome">블로그 방문을 환영합니다.</p>
  <p class="welcome">Welcome to My Blog.</p>
</body>
</html>

Result :
블로그 방문을 환영합니다.
Welcome to My Blog.


02. 외부 스타일 시트 (External CSS)
외부 CSS를 링크하는 방식

style.css 별도 작성

#welcome {
  color: purple;
}
.welcome {
  color: orange;
}

<html>
<head>
<link rel="stylesheet" href="/css 경로/style.css" type="text/css">
</head>
<body>
  <p id="welcome">블로그 방문을 환영합니다.</p>
  <p class="welcome">Welcome to My Blog.</p>
</body>
</html>

Result :
블로그 방문을 환영합니다.
Welcome to My Blog.


03. 인라인 스타일 시트 (Inline Style)
적용할 태그의 style 속성을 넣는 방식

  <p style="color: purple">블로그 방문을 환영합니다.</p>
  <p style="color: orange">Welcome to My Blog.</p>

Result :
블로그 방문을 환영합니다.
Welcome to My Blog.


04. 스타일 시트 임포트 방식
외부 CSS를 @import를 불러 드리는 방식

style.css 별도 작성

#welcome {
  color: purple;
}
.welcome {
  color: orange;
}


<html>
<head>
<style type='text/css'>
@import url("style.css");
</style>
</head>
<body>
  <p id="welcome">블로그 방문을 환영합니다.</p>
  <p class="welcome">Welcome to My Blog.</p>
</body>
</html>

Result :
블로그 방문을 환영합니다.
Welcome to My Blog.




CSS Vendor Prefixes = CSS browser prefixes (브라우저 접두사)


표준화 또는 규격화되지 않은 새로운 CSS 기술을 지원하기 위해 브라우저 제조사에서 제공하는 하나의 방법.

ex) transition
body {
-webkit-transition: outline 10s ease;  /* 크롬, 사파리 */
-moz-transition: outline 10s ease;     /* 파이어 폭스 */
-ms-transition: outline 10s ease;       /* 인터넷 익스플로러 */
-o-transition: outline 10s ease;         /* 오페라 */
transition: outline 10s ease;             /* 표준 */
}

Vendor Prefix를 사용할 때는 위와 같이 프리픽스 버전을 먼저 선언, 표준 속성(transition: outline 10s ease;)이 가장 마지막에 와야한다.
프리픽스는 결국에는 표준으로 확정될 것이고 그렇게 되면 브라우저는 프리픽스가 붙은 속성은 무시한 채 표준 속성만 지원하게 되기 때문이다.

Vendor Prefix를 자동생성해 주는 사이트를 소개한다.
http://css3generator.com/

- 관련 유용한 사이트 :  http://modernizr.com/