CSS 20가지 유용한 팁

CSS 2012. 2. 17. 12:22

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/

Posted by 노라스
,

제로보드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 가 설치된 경로를 써준다.

 

그리고 저장을 한다.

 

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

Posted by 노라스
,

CentOS APM yum install

Linux 2012. 2. 17. 12:20

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

 

'Linux' 카테고리의 다른 글

리눅스 usb 마운트  (0) 2013.02.17
[우분투] 설치 후에 가장 먼저 해야 할 일  (0) 2013.02.17
ubuntu 12.04 서버에서 한글  (0) 2013.02.17
Ubuntu 업데이트 서버 변경하기  (0) 2013.02.17
apt-get 명령어 정리  (0) 2013.02.17
Posted by 노라스
,

php 를 설치하고 나서 phpinfo 를 보기위해서

 

html 혹은 php 에 phpinfo() 함수를 사용하여 출력하게 한다.

 

<?php phpinfo(); ?>

 

혹은

 

<? phpinfo(); ?>

 

html 로 쓸 경우에는

 

<html>

<body>

<? phpinfo(); ?>

</body>

</html>

 

이라고 작성한다.

 

<? 로 시작하는 것과 <?php 로 시작하는 것의 차이인데,

 

php.ini 에서 short_open_tag 라고 되어있는 것이 있는데

 

이것이 off 가 되면 무조건 <?php 로 시작하여야 하고

이것이 On이 되면 <? 와 <?php 가 둘다 된다.

 

나는 다른 사람들이 팁으로 작성해 놓은 것을 보면서

 

phpinfo.php 는 <?php 로 작성하고

index.html 은 <? 로 작성해서

 

처음에는 단순히 html 안에서 php를 작동시키는 팁만 찾아 해맸다.

여러 사람것을 찾다보니 저런 사소한 차이를 모르고 지나갈 때가 많다.

 

만약 <? 로 php 구문을 작성하였는데 작동을 안하거나 페이지에 안보일 경우

 

[root@localhost public_html]# find / -name php.ini
/etc/php.ini
[root@localhost public_html]# vi /etc/php.ini

 

short_open_tag = Off

 

를 다음과 같이 바꾼다.

 

short_open_tag = On

 

그리고 저장하고 닫은 뒤

 

[root@localhost public_html]# find / -name apachectl
/usr/sbin/apachectl
[root@localhost public_html]# /usr/sbin/apachectl restart

 

아파치를 재시동 시킨다.

 

그리고 <? 로 되는 지 확인해보자

 

참고

http://kr2.php.net/manual/en/ini.core.php#ini.short-open-tag


'APM' 카테고리의 다른 글

php.ini 파일 설정으로 파일 업로드 용량 늘리기  (0) 2012.02.17
Posted by 노라스
,

php.ini 파일의 위치를 찾는다.

 

나의 경우에는 yum 으로 install 하였기 때문에 설정 파일을 지정하지 않아서 정확히 어디에 있는지 모른다.

 

[root@localhost ~]# find / -name php.ini
/etc/php.ini

 

경로를 찾은뒤

 

 [root@localhost ~]# vi /etc/php.ini

 

vi 편집기를 실행

 

file_uploads = On

파일을 업로드를 허용할지 설정하는 것. 당근 On 으로 해야함

 

upload_max_filesize = 100M

최대 파일 업로드 용량을 설정하는 것. 원하는 만큼 설정한다.

 

post_max_size = 100M

Post 방식으로 넘겨질 최대 파일 용량을 설정하는 것. upload_max_filesize 와 같이 설정

 

memory_limit = 128M

초기값이 128M 라서 건드리진 않았다.

 

용량이 100M를 넘어가는 큰 파일이면 분할압축을 해서 올리는 방법을 써야한다.

'APM' 카테고리의 다른 글

html 안에서 php 사용하기  (0) 2012.02.17
Posted by 노라스
,