input {outline-style:none}

IE나 Firefox 에는 적용할 필요가 없다.

iframe 의 ID를 test 라 했을 때,

$("#ID")[0].contentWindow.$("body").trigger("실행할 이벤트");

또는

var event = document.createEvent("CustomEvent");

event.initCustomEvent("실행할이벤트", true, true, null);
frames['ID'].document.dispatchEvent(event);

 gd-jpeg, libjpeg: recoverable error: Premature end of JPEG file 라는 오류 발생시..

ini_set('gd.jpeg_ignore_warning', true);

를 PHP파일 상단에 넣어준다. 임시방편이지만 썸네일 생성이 죽어버리는걸 막아준다..

이름 바꾸기

mysql> ALTER TABLE tablename RENAME bbs;

컬럼 속성 수정

mysql> ALTER TABLE tablename MODIFY colname INT NOT NULL AUTO_INCREMENT PRIMARY KEY;

ALTER TABLE tablename MODIFY 컬럼이름 컬럼속성

컬럼 이름 바꾸기

sysql> ALTER TABLE tablename CHANGE colname newcolname INT NOT NULL AUTO_INCREMENT;

CHANGE는 컬럼 속성뿐아니라 이름도 바꿔준다.

컬럼 추가

mysql> ALTER TABLE bbs ADD name varchar(10);

ALTER TABLE tablename ADD 컬럼이름 컬럼속성

컬럼 삭제

mysql> ALTER TABLE bbs DROP colname;

특정 컬럼 뒤에 새로운 컬럼 추가

mysql> ALTER TABLE bbs ADD newcol varchar(10) AFTER num;

num 컬럼 뒤에 newcol 컬럼 추가.

기존 컬럼을 지우고 맨 앞에 컬럼 추가

mysql> ALTER TABLE bbs DROP newcol, ADD newcol VARCHAR(10) FIRST;

맨 앞에 추가하려면 FIRST를 사용한다.

PRIMARY KEY 속성 삭제

mysql> ALTER TABLE test DROP PRIMARY KEY;

이미 PRIMARY KEY인 컬럼의 속성을 바꿀 때
PRIMARY KEY 속성은 지정하지 말고, NOT NULL 속성을 함께 지정해 주면 기존 PRIMARY KEY 속성은 그대로 남은 상태로 컬럼의 속성을 변경할 수 있다.

mysql> ALTER TABLE test MODIFY a CHAR(1) NOT NULL;

테이블의 내용 전체 삭제

mysql> TRUNCATE TABLE tablename;

트랜잭션에 의해 복구될 수 없다.

웹폰트라 함은 굳이 포토샵을 이용해서 이미지로 홈페이지에 박아넣지 않아도 오직 텍스트로만 홈페이지를 구성할수 있게 하는 방법중 하나이다. 최근의 경우 반응형 웹, CSS3등의 발전으로 이미지의 비중은 홈페이지에서 계속해서 줄어드는 추세이다.

현재 새로 개발되고 있는 홈페이지들의 경우 이미지는 보통 로고, 아이콘, 배너, 일부 배경에만 사용되고 있으며 나머지 모든 페이지의 95%정도가 CSS3 및 웹폰트로 해결되고 있는 실정이다. 웹폰트는 보통 겉보기에는 이미지로 이루어진 글씨로 보이지만 드래그가 가능한 점이 있고, cufon과의 차이점은 cufon은 텍스트가 로딩된후 이를 파싱하는 방식에 드래그가 안된다는 차이점이 있다.

물론 페이지 로딩 성능에 따라서는 웹폰트 > cufon 이 되겠다. 웹폰트는 html,body{font-family:Web Fonts} 전체로 적용을 해도 렉이 생기지 않지만, cufon은 본문 컨텐츠 부분에 사용하게 되면 페이지 로딩에 큰 저하를 불러올수 있어 보통 소제목이나 대제목으로 사용하는 실정이다. 예전 홈페이지들의 경우 이 대제목 소제목의 경우 이미지로 일일히 저장하여 사용해왔었지만, 최근 추세로는 모두 cufon 또는 웹폰트를 채택하고 있는 실정이다.

그렇다면 웹폰트를 사용하려면 어떻게 해야할까. 오늘은 cufon이 아닌 웹폰트 사용법을 알아보기로 한다. cufon은 내 블로그에서 이전에 이미 올려둔 자료가 있으니 사용하려면 그 부분을 찾아보셔도 괜찮을것 같다.

웹폰트는 2가지 방식이 있다. 현재 IE9이상/Firefox/Chrome/Safari 등 최신 브라우져들은 .woff 웹폰트를 사용한다. 하지만 빌어먹을 이전 IE 브라우져들은 woff 를 인식하지 못한다. 고로 구글 웹폰트를 고대로 적용하게 된다면 IE8이하 브라우져에서는 처참히 깨지는 당신의 홈페이지를 볼 수 있을것이다. 물론 차후 1-3년내로 윈XP가 모두 사라지고 윈7 또는 윈8, 윈8.1 이 대다수 OS가 된다면 이 문제도 자연스레 해결되겠지만, 아직까지도 XP와 IE6-8 사용자가 존재한다는게 문제다.

그렇다면 ie 저버젼과 최신 브라우저들에서 내 홈페이지에 웹폰트가 잘 출력될 수 있게 하려면 어떻게 해야할까. 우선 구글에서는 css 상단에 import 하는 방법으로 제공을 하고 있다.

Google Web Fonts (https://www.google.com/fonts)

이 곳에 들어가서 보게되면 각 폰트가 리스팅되어 있으며 각 글씨체마다 See all styles 로 미리보기 기능을 제공하는것도 있지만 보통은 Quick-use 버튼뿐이다. 이 것을 클릭해보자. 구글 웹폰트를 사용하는 방법은 총 3가지다. css 로 직접 불러오거나, 이미 사용중인 레이아웃 .css 파일에 @import 시켜주는방법, 그리고 JavaScript 를 사용하여 넣어주는 방법이다. 하지만 필자가 추천하는 방법은 .css파일에 @import 해주는 것이 가장 좋은 방법이다. 왜냐면 보통 웹폰트를 전 페이지에 적용하는 경우는 드물고 일부 섹터에만 적용하는게 대부분이기 때문에, layout.css 상단에 import를 시켜놓은뒤 원하는 class나 id에 font-family:를 사용하여 적용시켜주는게 가장 좋기 때문이다.

만약 Vampiro One라는 글씨체를 사용하고 싶다면 CSS상단에 아래 코드를 삽입하고

@import url(http://fonts.googleapis.com/css?family=Vampiro+One);

title 클래스에만 적용을 시키고 싶다면

.title{

XE 템플릿 구문

템플릿(template)이란 붕어빵을 만드는 틀로 비유된다. 같은 모양, 같은 크기의 객체(object)를 만들기 쉽다. 프로그래밍 언어에서 템플릿 구문은 초등학교 시절의 플라스틱 모형자를 생각하면 이해가 쉽다. 제각각 다른 모양, 다른 크기로 그려지는 삼각형도 모형자 하나만 있으면 모두들 똑같은 삼각형을 그려낸다...^^
XE코어도 대부분 PHP로 작성되는 오픈소스 프로그래밍 언어이다. 따라서 언어의 특성상 작성자 특유의 즐겨쓰는 구문이나 코딩법들이 사용될 가능성이 크다. 이것을 어떻게 일관된 규칙과 문법으로 유지시켜 나갈 수 있을까?

"XE 템플릿 구문이란, 동적 데이터의 화면 출력을 효과적으로 제어하기 위해 PHP로부터 프리젠테이션 로직을 분리한 코드이다."라고 메뉴얼은 설명한다. 프리젠테이션 로직이란 보여주기 위한 로직, 즉 화면상의 디자인 구성을 위한 로직을 일컫는 말로써, 모듈의 템플릿, 위젯, 애드온, 게시판의 스킨 등에서 사용하기 위한 조건문과 반복문(if, for, while)을 간결한 소스 코드로 분리하였다는 뜻이다. 이것은 다른 프로그래밍 언어들처럼 XE 안에서만 특별히 사용하기 때문에 XE 템플릿 문법이라 표현하고 화면에 표시할 때는 서버 측에서 다시 PHP 문법으로 해석(compile)되어 출력된다.

XE 템플릿 문법의 장점

• 간결 - 스킨의 소스 코드를 약 절반 정도로 간결하게 줄여서 용량을 절약할 수 있다.
• 판독 - HTML 태그에 기반하여 문법을 작성하기 때문에 조건문과 반복문의 시작과 끝을 찾기가 쉽고, 문법적 오류를 줄일 수 있다.

XE 템플릿 문법의 사용법

• HTML 주석 <!--...-->안에 작성하는 방법. 예) <!--@if(...)-->...<!--@end-->
• 가상의 <block> 요소 안에 작성하는 방법. 예) <block>...</block>
• HTML 요소에 직접 작성하는 방법. 예) <p cond="조건절">...</p>
• 주석이나 요소에 의존하지 않고 작성하는 방법. 예) {$content} 내용 변수로 데이터를 출력함.

※ 가상요소(block)란, HTML 요소의 형식을 빌려 쓰고는 있지만 제어문을 실행할 뿐 실제로 화면에 요소가 출력되지는 않는다. cond 속성도 가상의 속성으로서 조건문 역할을 한다.

XE 템플릿 문법의 이해

다음 구문은 PHP의 IF 조건문이다. PHP는 HTML 문서 안에서 HTML 태그와 혼합하여 사용할 수 없다. PHP는 서버에서만 읽고 해석하는 서버측 스크립트 언어이고 HTML은 웹브라우저에서 읽고 해석하는 마퀴업 언어이기 때문이다.

<?php
   if(조건식) {
      실행문1
   } else {
      실행문2
   }
?>

따라서 실행문의 내용이 HTML 태그를 포함한다면 실행문은 태그를 포함한 echo문으로 작성되어야 하고 다음과 같다.

<?php
   if($a=1) {
      echo "<p>조건식이 TRUE이면 실행문1이 표현된다.</p>";
   } else {
      echo "<p>그밖에는 실행문2가 표현된다.</p>";
   }
?>

만약 echo문을 사용하지 않고 PHP 구문과 HTML 구문을 분리하여 작성한다면 다음과 같다.

<?php  if($a=1) { ?>
   <p>조건식이 TRUE이면 실행문1이 표현된다.</p>
<?php } else { ?>
   <p>그밖에는 실행문2가 표현된다.</p>
<?php } ?>

그런데 위와 같이 구문을 나누고 보니 무척 복잡해 보이고 문제가 있는 경우에 오류의 원인을 찾기가 쉽지 않다. 따라서 많은 개발자들이 PHP 프로그래밍 작업에서 약식 출력(<?=...?>) 또는 짧은 태그(<?...?>)를 사용하기도 하지만 XHTML 문서에서는 이렇게 사용되는 경우 치명적인 오류가 발생한다. 따라서 HTML 태그와 구분된 PHP 코드를 HTML 주석문(<!-- -->)과 앳 기호(@)를 이용해 다음과 같이 약속해보자!!!

<!--@if($a=1)-->
   <p>조건식이 TRUE이면 실행문1이 표현된다.</p>
<!--@else-->
   <p>그밖에는 실행문2가 표현된다.</p>
<!--@end-->

이렇게 약속된 표현방법을 XE 템플릿 문법이라 말하고 HTML 주석문 안에 @ 기호를 이용해 작성된 구문은 서버에서 다시 PHP문으로 해석(compile)되어 출력되는 것이다.

결과적으로 XE 템플릿 문법은 HTML 문서 안에서 PHP 구문을 대신하여 사용하기 위한 약속된 템플릿용 언어이다. 따라서 XE의 레이아웃과 모듈의 템플릿 스킨, 게시판의 스킨 등에서 사용되는 템플릿용 구문이라고도 할 수 있으며 다른 언어에서는 사용되지 않기 때문에(배울 수 없기 때문에) 약간의 공부가 필요하다.

이와 유사한 형식의 템플릿 언어가 jQuery이다.

<script type="text/javascript">
<!--
	function sayHello() {
		document.getElementById('text1').innerHTML = '우주 정거장을 닮은 XE!';
	}
//-->
</script>

위와 같은 스크립트 블록 내부에 sayHello()라는 javascript 함수를 정의하였다면 아래의 텍스트를 클릭해 보자.

XpressEngine은...

문서 안에서 해당하는 엘리먼트를 찾아 텍스트를 바꾸어 주는 javascript 함수 구문이지만 모든 웹브라우저에서 같은 결과를 얻을 수 있다고는 말할 수 없다. 왜냐하면 브라우저마다 javascript를 동일하게 지원하지 않는다. 따라서 다양한 종류의 브라우저에서 동일한 결과를 얻기 위한 노력으로, 자기 자신 스스로가 사용할 목적의 작은 함수 라이브러리를 만들고, 직접 호주머니에 넣고 다니면서 미리 약속된 문법을 사용하여 모형자처럼 템플릿 언어로 만든 것이 jQuery이다.

// 자신이 사용할 jQuery 함수 라이브러리 파일을 원격으로 불러올 수도 있다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
   jQuery(function($) { // javascript가 아닌 jQuery라고 이야기 한다.
      $('#text2').click(function() { // 미리 정의된 함수 이름을 불러 선택된 엘리먼트가 해야 할 일을 가르쳐 준다.
         $('#text2').html('우주 정거장을 닮은 XE!'); // 선택자의 텍스트를 바꾼다.
      });
   });
</script>

XpressEngine은...

위에 작성한 jQuery 구문은 먼저 작성한 javascript 구문과 동일한 결과를 얻을 수 있지만 차이점은 대부분의 웹브라우저에서 같은 결과를 보여준다는 것이다. 왜냐하면 자신이 사용할 함수 라이브러리를 미리 불러 놓았고, 미리 정의된 템플릿 구문을 이용하여 문서내 엘리먼트를 찾아서 바꾼다. 이것 또한 약속된 언어이기 때문에 정의되지 않은 함수 구문을 사용할 수 없고 좀더 많은 공부가 필요하지만 동적인 웹페이지를 개발하는데 꼭 필요한 언어가 되었다.

XE 코어의 호주머니 속에는 이미 jQuery 함수 라이브러리를 가지고 있어서 별도의 라이브러리 파일을 불러올 필요가 없다. 따라서 XE에서 사용되는 레이아웃, 모듈의 템플릿, 게시판의 스킨 등에서 jQuery 함수를 마음껏 사용할 수 있는데 그러면, XE 템플릿 구문은 어떤 파일을 참조하고 있을까?
이것을 이해하기 위해 여기까지 왔다!

정답은 xe/classes/template/TemplateHandler.class.php 함수 라이브러리 파일이다. 이곳에서 XE가 사용하는 템플릿 구문이 PHP문으로 해석(compile)되어 출력되는 것이다. XE가 사용하는 함수 라이브러리 파일을 꼭 읽어보자! 그러면 XE와 좀더 가까워 질 수 있다...^^

출처 : http://www.xeschool.com/xe/xenote_template_syntax_expressions

imgslider.zip

압축해제후 slider.html 을 열어 수정을 하셔서 이미지 추가를 하실수 있으며,

flexslider.css 를 수정하여 이미지 크기 및 좌우 버튼 위치등을 조절할수도 있고,

js파일을 수정하여 이미지 방향, 속도, 자동슬라이더 정지/작동등을 설정할수 있습니다.

saycast-php.zip

PHP파일에서 세이캐스트 서버로 접속하여 방송정보(dj,현재곡,청취자수)등 출력.

또한 히스토리(곡 재생목록) 출력 파일도 포함되있습니다.

단점은 세이라디오 등에서 청취하는 청취자만 집계가 됩니다..