1.Use Reset.css

ff, ie 등 브라우져가 처리 하는 방법이 다릅니다. 동일하게 재설정 할 필요가 있습니다.

프레임워크가 사용하는 몇몇 reset.css 안내

야후 reset CSs : http://developer.yahoo.com/yui/reset/
Eric Meyer’s CSS Reset : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Tripoli : http://devkick.com/lab/tripoli/

2. Use Shorthand CSS ( css 문장을 짧게 표시 )

.header {
      background-color: #fff;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: top left;
    }

위 css 를  아래처럼 변경 할 수 있습니다.

.header {
      background: #fff url(image.gif) no-repeat top left
    }

참고 사이트
http://articles.sitepoint.com/article/introduction-css-shorthand
http://www.javascriptkit.com/dhtmltutors/cssshorthand.shtml

3. class 와 ID 이해

클래스는 "." 으로 표시합니다.
ID는 "#" 으로 표시합니다.

참고 사이트
http://codepunk.hardwar.org.uk/acss06.htm

4. <li> 유용한 li

*  li 메뉴,리스트 등을 만들 때 아주 좋습니다.

참고사이트
http://www.alistapart.com/articles/taminglists/
http://mirificampress.com/permalink/the_amazing_li

5. table 를 버리고 , div 사용하도록 노력

div 사용하면 스타일이 유연하게 변경 할 수 있습니다.
, table 은 고정 되어 있습니다

참고 사이트

http://articles.sitepoint.com/article/tables-vs-css

6. css 디버그 툴

css 이해하는데 도움이 되고, 문제 원인을 쉽게 발견 할 수 있습니다.

참고사이트

firefox web Developer : http://chrispederick.com/work/web-developer/
firefox dom Inspector : https://addons.mozilla.org/en-US/thunderbird/addon/1806/
ie develper toolbar : http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
firebug : http://getfirebug.com/

7. 길게 늘어놓으는 css 를 피하세요.

ul li {.... }
ol li {...  }
table tr td { ... }

위를  단축

li {...}
td {...}

실제 css 적용되는 부분에 삽입 하세요

8. !Important

!Important 지정된 곳이 css 가 우선 적용 됩니다. (css 가 덮어 쓰기가 되지 않습니다.)

.page { background-color:blue !important;   background-color:red;} 

.page에 background-color 는 blue 가 적용 됩니다.

9. 텍스트 이미지 교체

h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}

10. css Positioning 을 이해

아래의 참고 사이트는 css position 을 이해하는데 상당히 도움이 됩니다.

참고사이트

http://www.barelyfitz.com/screencast/html-training/css/positioning/

11. css @Import Vs <link>

css 를 불러오는 2가지가 있습니다. @import, <link>

<link href="styles.css" type="text/css" />

<style type="text/css">@import url("styles.css");</style>

@import  sytles 위처럼 숨길 수 있습니다.

link  미디어 타입을 지정 할수 있습니다.
<link href="styles-nons4.css" media="all" type="text/css" />

12. css 디자인 폼

form 들을 css 로 디자인 할 수 있습니다

참고 사이트

table-less form : http://jeffhowden.com/code/css/forms/
form garden  : http://app.formassembly.com/theme-editor/
Styling even more form controls : http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/ 

13. css를 웹사이트 적용할지 도움을 받으세요

css 가지고 멋진 사이트를 만들고 싶으시면 아래의 참고사이트를 확인하고 도움을 받으세요

참고 사이트

http://cssremix.com/
http://www.cssreboot.com/
http://www.cssbeauty.com/
http://www.csselite.com/
http://cssmania.com/
http://www.cssleak.com/

14. 둥근 모서리 코너 css

참고 사이트 
 http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
 http://naradesign.net/wp/2009/04/28/801/ , http://naradesign.net/open_content/quiz/roundCorner/

15. Keep CSS Codes Clean ( CSS 소스 정리 )

css 코드가 난장판이면 , 리팩토리 하느라 시간을 낭비 하지 마세요

아래의 주소에서 리팩토링을 해주네요.

formatCss : http://www.lonniebest.com/FormatCSS/

[12 가지 원칙, 당신의 코드를 깨끗히 하는 ]
http://www.smashingmagazine.com/2008/11/12/12-principles-for-keeping-your-code-clean/

16.  px vs em

CSS 측정 단위
em-height (em), Pixel (px), Percentage (%)
Inch (in), Centimeter (cm) & Millimeter (mm)

참고 사이트
http://www.explainth.at/en/css/units.shtml

17. CSS 브라우져 호완성 표

참고사이트
#1 : http://www.quirksmode.org/css/contents.html
#2 : http://www.webdevout.net/browser-support-css
#3 : http://vzone.virgin.net/sizzling.jalfrezi/stylebml.htm

18. 디자인 멀티 컬럼 CSS

CSS 멀티 컬럼 레이아웃 잡을 때 도움되는 참고 사이트 

참고사이트
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.alistapart.com/articles/holygrail
http://www.alistapart.com/articles/fauxcolumns/
http://www.alistapart.com/articles/multicolumnlayouts
http://24ways.org/2008/absolute-columns

19. 공짜 CSS 에디터

http://notepad-plus-plus.org/
http://www.hostm.com/simplecss-download.m
http://www.athlab.com/Astyle/index.html#Features

20. CSS Media Types 의 이해

http://www.w3.org/TR/CSS2/media.html
http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml
http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html

출처 : http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/

제로보드XE 의 짧은 주소 기능을 사용하는데 404 에러가 날 경우

Apache 에서 mod_rewrite 가 설치 되었는지 확인한다. ( phpinfo() 페에지를 불러서 확인 가능)

Apache 설정 파일인 httpd.conf 에서

 LoadModule rewrite_module modules/mod_rewrite.so

있는지 확인한다.

<Directory "/home/*/public_html/xe">
        Options FollowSymLinks
        AllowOverride None
        Order allow,deny
        Allow from all
</Directory>

빨간색으로 표시한 부분을 다음과 같이 AllowOverride All 로 바꾸어 준다.

<Directory "/home/*/public_html/xe">
        Options FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
</Directory>

Directoy 부분은 본인이 적용시키고 싶은 범위만큼 경로지정 (나는 일단 제로보드XE가 설치된 디렉토리만 지정했다.

저장하고 나와서

/etc/init.d/httpd restart

데몬을 재실행 시켜준다.

그래도 404 에러가 날 때!

짧은 주소는 지저분 하고 긴 주소를 domain/숫자, domain/게시판이름 으로 바꿔주는 것이다.

하지만 domain이 없고 /~userid 를 사용하는 경우에는 .htaccess 파일에서 경로 설정을 해주어야 한다.

파일이 안보일 경우 ls -al로 확인할 수 있다.

제로보드XE 디렉토리에서 vi 편집기로 .htaccess 를 연다.

[root@localhost xe]# vi .htaccess

RewriteEngine On
RewriteBase /~userid/xe

# reserve XE Layout Template Source File (*.html)
RewriteRule ^(layouts|m.layouts)/(.+)/(.+)\.html$ ./index.php [L]
# conf, query, schema
RewriteRule ^(modules|addons|widgets)/(.+)/(conf|queries|schemas)/(.+)\.xml$ ./index.php [L]
.

.

.

맨 윗줄 바로 아래에

RewriteBase /~userid/xe

제로보드XE 가 설치된 경로를 써준다.

그리고 저장을 한다.

이젠 짧은 주소 기능을 정상적으로 사용할 수 있다.

1. APM 설치하기

1.1 기존 설치 파일 제거
[root@helpdesk ~]# yum remove httpd
[root@helpdesk ~]# yum remove php
[root@helpdesk ~]# yum remove mysqld

1.2. apache 설치
[root@helpdesk ~]# yum install httpd

1.3. mysql 설치
[root@helpdesk ~]# yum install mysql mysql-server mysql-devel

- 세가지가 모두 설치되어야 DB가 정상적으로 작동됨

1.4. php설치
[root@helpdesk ~]#  yum install php

1.5 php-mysql 연동 설치
[root@helpdesk ~]# yum install php-mysql

2. Service Startup

2.1 Apache
[root@helpdesk ~]# service httpd start / stop / restart

2.2 MYSQL DB생성
[root@helpdesk ~]#cd /usr/bin
[root@helpdesk bin]# ./mysql_install_db

2.3 환경설정
[root@helpdesk bin]# ./mysqld_safe

./mysqld_safe 실행 후 아래와 같이 오류가 날 경우
Eps auRROR 2002 : Can't connect to local mysql server through socket `/var/lib/mysql/mysql.sock' (2)
- /var/lib/mysql/디렉토리의 권한 확인
- /etc/my.cnf 파일내에 존재하는 soket 경로 확인 (일치하는지 확인해야 하며 변경할 경우 다시 mysql을 올려야한다.)

2.4 패스워드 입력
[root@helpdesk bin]#/usr/bin/mysqladmin -u root password "password"

2.5 MYSQL 서비스 시작
[root@helpdesk bin]#/etc/rc.d/init.d/mysqld start