ajax 크롤링

카테고리 없음 2016. 12. 30. 21:42

파이썬을 공부하는 중에 urllib.urlopen 이라는 재밌는 친구를 가지고 노는 중입니다.

웬만한 페이지들은 해당 url의 소스를 모두 긁어와줘서 제가 원하는 데이터를 만들 수 있었습니다.

근데 학교 학식 홈페이지를 가니 웹페이지에서는 보이는데,
소스보기를 하니까 프레임 보기를 하라고 해서 프레임 보기에 있는 url을 가져왔더니 저렇게 메뉴 내용은 가져와지질 않습니다...

html을 잘 모르기도 하고.. 어떤 식으로 검색해야되는지도 잘 모르겠어서 생코 선배님들 조언 좀 구하고 싶습니다!

(정보를 주시는 데 필요하시면 학식 홈페이지 주소도 올리겠습니다..)

No automatic alt text available.
Like
Comment
Comments
최장혁 주소링크 올려주세요
LikeReply4 hrs
Jaejin Kim https://dorm.deu.ac.kr/
여기가 메인 페이지고,


https://dorm.deu.ac.kr/hyomin/60/6050.kmc
여기가 프레임 페이지입니다.
LikeReply4 hrs
최장혁 프레임 페이지 소스에서
<div class="wrap_sub">
<div class="scon">

<div class="rightcon">
<div class="subcon">
<div class="scon">
<ul class="mt30">
<ul class="vpanel1 stxt011">
의 자식태그 "li" 7개가각각 월화수목금토일 의 조,중,석식 정보를 담고 있네요 li 태그 하위 tbody태그안에 메뉴 있습니다
No automatic alt text available.
LikeReply14 hrsEdited
최장혁 위 소스의 브라우저에서 보여지는것은 전체보기 란의 메뉴들입니다
LikeReply4 hrsEdited
Marcel Kim
Write a reply...
김영호 xhr요청으로 json값을 받아온 뒤, javascript에서 table에 데이터를 넣어주고 있으므로 json값만 가지고도 학식 정보 파싱을 진행할 수 있습니다.

http://colorscripter.com/s/O2NJYI7
LikeReply54 hrsEdited
Jaejin Kim 코드까지 짜주시고 감사합니다 ㅠ
json 에 대해서 더 많이 알아봐야겠네요 !!
참고해서 유용하게 사용하겠습니다 !
LikeReply13 hrs


가만히 소스를 보면


<script type="text/javascript" src="/hyomin/pages/60/js/6050.js"></script>

이거로 ajax임


그러니까

그것을 뜯어보면


이렇게 ajax로 가져옴

function getWeeklyMenu() {
	rolesControl();
	
	var parameters = "locgbn=" + global_locgbn + "&sch_date=" + sch_date;
	
	KH_getAjax("/hyomin/food/getWeeklyMenu.kmc", parameters, resultWeeklyMenu);
	
}



#-*- coding: utf-8 -*-
import requests
import json
= requests.post("https://dorm.deu.ac.kr/hyomin/food/getWeeklyMenu.kmc", params={'locgbn''DE''sch_date' : '2016-12-30'})
js = json.loads(r.text)
menus = js['root'][0]['WEEKLYMENU'][0]
for i in range(18):
print "날짜 :", menus["fo_date" + str(i)]
print "조식 :", menus["fo_menu_mor" + str(i)]
print "중식 :", menus["fo_menu_lun" + str(i)]
print "석식 :", menus["fo_menu_eve" + str(i)]
print ""


이렇게 가져와봄


그러면 json을 아래와 같이 가져옴

그러니까 parsing하면 원하는 값을 가져옴


{u'root': [{u'LASTNEXT': [{u'go': u'next_mon'}, {u'go': u'last_mon', u'mon_date': u'2016-12-26'}], u'WEEKLYMENU': [{u'seq': 36, u'fo_menu_lun3': u'\uc1e0\uace0\uae30\ucf69\ub098\ubb3c\ubc25/\uc591\ub150\uc7a5, \uadfc\ub300\uad6d, \uc5b8\uc591\ubc14\uc2f9\ubd88\uace0\uae30/\ud30c\ucc44, \uc544\uc0ad\uace0\ucd94\ub41c\uc7a5\ubb34\uce68, \uae40\uce58/\uc22d\ub289', u'fo_menu_lun2': u'\uc0c8\uc54c\ubbf8\uc5ed\uad6d, \uc870\uae30\uad6c\uc774, \uc81c\uc721\uc7a1\ucc44, \uc624\uc774\uc591\ud30c\ubb34\uce68, \uae40\uce58, \uc22d\ub289', u'fo_menu_lun1': u'\uc1e0\uace0\uae30\ud574\uc7a5\uad6d, \ub3c8\ub450\ub8e8\uce58\uae30, \uacfc\uc77c\uc0ac\ub77c\ub2e4, \uc5f4\ubb34\ub41c\uc7a5\ub098\ubb3c, \uae4d\ub450\uae30, \uc22d\ub289', u'fo_menu_lun7': u'(1\uad00 \uc5c6\uc74c) \uc1e0\uace0\uae30\ub5a1\uad6d(\ud589\ubcf5, 2\uad00), \uccad\ud30c\ub798\uc624\uc9d5\uc5b4\uae4c\uc2a4/\uba38\uc2a4\ud0c0\ub4dc(\ud589\ubcf5, 2\uad00), \uc6b0\ub3d9\uad74\uc18c\uc2a4\ubcf6\uc74c(\ud589\ubcf5, 2\uad00), \ub3c4\ub77c\uc9c0\ucc44\uc624\uc774\ubb34\uce68(\ud589\ubcf5, 2\uad00), \uae40\uce58(\ud589\ubcf5, 2\uad00)', u'fo_menu_lun6': u'\ub77c\uba74(1\uad00), \uc870\uac2f\uc0b4\ubbf8\uc5ed\uad6d(\ud589\ubcf5,2\uad00), \ub2ed\ubcf6\uc74c\ud0d5(\ud589\ubcf5, 2\uad00), \ud478\uc2e4\ub9ac\uac74\ud3ec\ub3c4\ubc94\ubc85(\ud589\ubcf5,2\uad00), \ub9c8\ub298\ucad1\ub77d\uad50\ubb34\uce68(\ud589\ubcf5,2\uad00), \uae40\uce58(\ud589\ubcf5,2\uad00)', u'fo_menu_lun5': u'\uc721\uac1c\uc7a5, \ub099\uc9c0\ubcf6\uc74c/\uc18c\uba74\uc0ac\ub9ac, \uc54c\uac10\uc790\ubc84\ud130\uad6c\uc774, \ud33d\uc774\ubc84\uc12f\ubbf8\uc5ed\uc904\uae30\ubcf6\uc74c, \uae40\uce58, \uc22d\ub289', u'fo_menu_lun4': u'\ubd81\uc5b4\uacc4\ub780\uad6d, \ud0d5\uc218\uc721/\ud0d5\uc218\uc18c\uc2a4, \uce74\ub808\ub5a1\ubcf6\uc774, \ub2e8\ubc30\ucd94\uac89\uc808\uc774, \uae4d\ub450\uae30, \uc22d\ub289', u'fo_menu_eve7': u'(1\uad00 \uc5c6\uc74c) \ub4e4\uae68\uc2dc\ub77d\uad6d(\ud589\ubcf5, 2\uad00), \uc911\uc2dd\ub3fc\uc9c0\uace0\uae30\uac00\uc9c0\ubcf6\uc74c(\ud589\ubcf5, 2\uad00), \ud0d5\ud3c9\ucc44(\ud589\ubcf5, 2\uad00), \uc2dc\uae08\uce58\ub098\ubb3c(\ud589\ubcf5, 2\uad00)', u'fo_menu_mor2': u'\ucc38\uce58\ub9e4\uc6b4\ud0d5, \uace0\ucd94\uc7a5\ub08f\uc78e\ubd88\uace0\uae30, \uc5f0\ub450\ubd80/\uc591\ub150\uac04\uc7a5, \ud638\ubc15\uc0c8\uc6b0\uc813\ub098\ubb3c, \uae4d\ub450\uae30', u'fo_menu_mor3': u'\uc0c8\uc6b0\ub41c\uc7a5\ucc0c\uac1c, \ub3c8\uaf48\ub9ac\ucd08\uc7a5\uc870\ub9bc, \ubcfc\uc5b4\ubb35\uace0\ucd94\uc7a5\uc870\ub9bc, \ucc38\ub098\ubb3c\ubb34\uce68, \uae40\uce58', u'fo_menu_mor1': u'\ubaa8\ub4ec\uc5b4\ubb35\uad6d, \ubbf8\ud2b8\ubcfc\ud3ed\ucc39, \uacc4\ub780\ud6c4\ub77c\uc774, \ube0c\ub85c\uceec\ub9ac/\ucd08\uc7a5, \uae40\uce58', u'fo_menu_mor6': u'(\ud589\ubcf5\xb72\uad00 \uc5c6\uc74c) \uadfc\ub300\uad6d(1\uad00), \uc624\uc9d5\uc5b4\uc57c\ucc44\ubcf6\uc74c(1\uad00), \ube44\uc5d4\ub098\uac04\uc7a5\uc870\ub9bc(1\uad00), \ub2e4\uc2dc\ub9c8\ucc44\uc813\uac08\ubb34\uce68(1\uad00), \uae40\uce58(1\uad00)', u'fo_menu_mor7': u'(\ud589\ubcf5\xb71\uad00\xb72\uad00 \uc5c6\uc74c) ', u'fo_menu_mor4': u'\uae40\uce58\ucc0c\uac1c, \uc2a4\ud338\uad6c\uc774, \ub290\ud0c0\ub9ac\ub9db\uc0b4\ubcf6\uc74c, \ub41c\uc7a5\uae7b\uc78e\uc9c0, \uae4d\ub450\uae30', u'fo_menu_mor5': u'\uc1e0\uace0\uae30\ubb34\ud0d5\uad6d,\uac08\uce58\ubb34\uc870\ub9bc, \uc2a4\ud06c\ub7a8\ube14\uc5d0\uadf8, \uc219\uc8fc\ubbf8\ub098\ub9ac\ub098\ubb3c, \uae40\uce58, \uc694\ud50c\ub808', u'fo_menu_eve4': u'\ud050\ube0c\ucc38\uce58\uc57c\ucc44\ube44\ube54\ubc25, \ub9d1\uc740\ucf69\ub098\ubb3c\uad6d, \ub5a1\uac08\ube44\ub370\ub9ac\uc57c\ub07c\uc870\ub9bc, \uc794\uba78\uce58\uc544\ubaac\ub4dc\ubcf6\uc74c, \uae40\uce58/\ub9dd\uace0\uc96c\uc2a4', u'fo_date4': u'2016-12-29', u'fo_date5': u'2016-12-30', u'fo_date6': u'2016-12-31', u'fo_date7': u'2017-01-01', u'fo_menu_eve2': u'\uce58\ud0a8\uce58\uc988\uae4c\uc2a4, \uc591\uc1a1\uc774\ud06c\ub9bc\uc2a4\ud504, \uadf8\ub9b0\uc0d0\ub7ec\ub4dc/\ub4dc\ub808\uc2f1, \uc6e8\uc9c0\uac10\uc790, \uae40\uce58/\uc96c\uc2dc\ucfe8', u'fo_menu_eve3': u'\ubd80\ub300\ucc0c\uac1c, \uc18c\ubd88\uace0\uae30, \uc625\uc218\uc218\ucf58\uce58\uc988\uad6c\uc774, \ubd80\ucd94\uac89\uc808\uc774, \uae40\uce58, \ub808\ubaac\ucc28', u'fo_date2': u'2016-12-27', u'fo_date3': u'2016-12-28', u'today': u'2016-12-30', u'fo_date1': u'2016-12-26', u'locgbn': u'DE', u'fo_menu_eve1': u'\ubc84\uc12f\ucc0c\uac1c, \ucda9\ubb34\uc2dd\uc624\uc9d5\uc5b4\ubb34\uce68, \uccad\ub7c9\ubd80\ucd94\uc804/\uac04\uc7a5, \ucf69\ub098\ubb3c\ubb34\uce68, \uae40\uce58, \ucf54\ucf54\uc544', u'fo_menu_eve5': u'\uaf43\uac8c\ud0d5, \ub9c8\ud30c\ub450\ubd80, \ud574\ubb3c\uacbd\ub2e8\uc804/\ucf00\ucc39, \ube44\ud2b8\ubb34\uc0dd\ucc44, \uae40\uce58, \uade4', u'fo_menu_eve6': u'\uc21c\ub450\ubd80\ucc0c\uac1c, \ucf54\ub2e4\ub9ac\ucf69\ub098\ubb3c\ucc1c, \uba54\ub780\uace4\uc57d\uc870\ub9bc, \uccad\uacbd\ucc44\uac89\uc808\uc774, \uae4d\ub450\uae30'}]}]} 날짜 : 2016-12-26 조식 : 모듬어묵국, 미트볼폭찹, 계란후라이, 브로컬리/초장, 김치 중식 : 쇠고기해장국, 돈두루치기, 과일사라다, 열무된장나물, 깍두기, 숭늉 석식 : 버섯찌개, 충무식오징어무침, 청량부추전/간장, 콩나물무침, 김치, 코코아 날짜 : 2016-12-27 조식 : 참치매운탕, 고추장낏잎불고기, 연두부/양념간장, 호박새우젓나물, 깍두기 중식 : 새알미역국, 조기구이, 제육잡채, 오이양파무침, 김치, 숭늉 석식 : 치킨치즈까스, 양송이크림스프, 그린샐러드/드레싱, 웨지감자, 김치/쥬시쿨 날짜 : 2016-12-28 조식 : 새우된장찌개, 돈꽈리초장조림, 볼어묵고추장조림, 참나물무침, 김치 중식 : 쇠고기콩나물밥/양념장, 근대국, 언양바싹불고기/파채, 아삭고추된장무침, 김치/숭늉 석식 : 부대찌개, 소불고기, 옥수수콘치즈구이, 부추겉절이, 김치, 레몬차 날짜 : 2016-12-29 조식 : 김치찌개, 스팸구이, 느타리맛살볶음, 된장깻잎지, 깍두기 중식 : 북어계란국, 탕수육/탕수소스, 카레떡볶이, 단배추겉절이, 깍두기, 숭늉 석식 : 큐브참치야채비빔밥, 맑은콩나물국, 떡갈비데리야끼조림, 잔멸치아몬드볶음, 김치/망고쥬스 날짜 : 2016-12-30 조식 : 쇠고기무탕국,갈치무조림, 스크램블에그, 숙주미나리나물, 김치, 요플레 중식 : 육개장, 낙지볶음/소면사리, 알감자버터구이, 팽이버섯미역줄기볶음, 김치, 숭늉 석식 : 꽃게탕, 마파두부, 해물경단전/케찹, 비트무생채, 김치, 귤 날짜 : 2016-12-31 조식 : (행복·2관 없음) 근대국(1관), 오징어야채볶음(1관), 비엔나간장조림(1관), 다시마채젓갈무침(1관), 김치(1관) 중식 : 라면(1관), 조갯살미역국(행복,2관), 닭볶음탕(행복, 2관), 푸실리건포도범벅(행복,2관), 마늘쫑락교무침(행복,2관), 김치(행복,2관) 석식 : 순두부찌개, 코다리콩나물찜, 메란곤약조림, 청경채겉절이, 깍두기 날짜 : 2017-01-01 조식 : (행복·1관·2관 없음) 중식 : (1관 없음) 쇠고기떡국(행복, 2관), 청파래오징어까스/머스타드(행복, 2관), 우동굴소스볶음(행복, 2관), 도라지채오이무침(행복, 2관), 김치(행복, 2관) 석식 : (1관 없음) 들깨시락국(행복, 2관), 중식돼지고기가지볶음(행복, 2관), 탕평채(행복, 2관), 시금치나물(행복, 2관) Process finished with exit code 0



설정

트랙백

댓글

gvim vim tab

Local Setting 2014. 2. 12. 01:53

\HKEY_CLASSES_ROOT\Applications\gvim.exe\shell\edit\command 


항목을 열어서  "기본값" 수정에서 


"C:\Program Files (x86)\Vim\vim73\gvim.exe"  "%1" 



WinSCP 의 text editor 세팅
"C:\Program Files (x86)\Vim\vim73\gvim.exe" --remote-tab-silent !.!


'Local Setting' 카테고리의 다른 글

Touch cursor - Windows keyboard binding like vi vim  (0) 2011.12.22
vim win 로컬세팅  (0) 2011.12.15

설정

트랙백

댓글

Quick Tip: Autocomplete Git Commands and Branch Names in Bash

 | COMMENTS

In bash in Mac OS X, you can use [TAB] to autocomplete file paths. Wouldn’t if be nice if you could do the same with git commands and branch names?

You can. Here’s how.

First get the git-completion.bash script (view it here) and put it in your home directory:

1
curl https://raw.github.com/git/git/master/contrib/completion/git-completion.bash -o ~/.git-completion.bash

Next, add the following lines to your .bash_profile. This tells bash to execute the git autocomplete script if it exists.

1
2
3
if [ -f ~/.git-completion.bash ]; then
  . ~/.git-completion.bash
fi

Now open a new shell, cd into a git repo, and start typing a git command. You should find that [TAB] now autocompletes git commands and git branch names.

For example, if you type git then add a space and hit [TAB], you’ll get a readout like this, which lists all available git commands:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
add                 filter-branch       reflog
am                  format-patch        relink
annotate            fsck                remote
apply               gc                  repack
archive             get-tar-commit-id   replace
bisect              grep                request-pull
blame               gui                 reset
branch              help                revert
bundle              imap-send           rm
checkout            init                send-email
cherry              instaweb            shortlog
cherry-pick         log                 show
citool              merge               show-branch
clean               mergetool           stage
clone               mv                  stash
commit              name-rev            status
config              notes               submodule
describe            p4                  svn
diff                pull                tag
difftool            push                whatchanged
fetch               rebase

Now to learn what some of these more exotic git commands do! What’s your favorite git command?

(I learned this way of installing git-completion.bash here.)

http://code-worrier.com/blog/autocomplete-git/

너무 편해 졌다. 


'PMS' 카테고리의 다른 글

Mantis 상태추가  (0) 2011.10.09
이슈 트래커 비교  (0) 2011.09.05
Mantis 환경 설정의 비밀  (0) 2011.09.05
Mantis GD error 25128 에러가 날 때 해결 책  (0) 2011.07.29
Mantis 날짜 Custom field  (0) 2011.07.26

설정

트랙백

댓글

Objective-C의 Dot syntax

맥북 2013. 5. 31. 18:30
Objective-C의 Dot Syntax
점 구문이 Objective-C 2.0에 도입되면서 많은 논란이 되어 왔다. 예전 부터 코코아 프로그래밍을 해왔던 개발자들은 주로 반대의 입장을 피력했고 또한 그와는 반대의 주장을 하기도 한다. 

여기서는 그런 논란은 생각하지 말자. 다음 두 구문은 완전하게 동일하다.

self.timestamp = [NSDate date];

[self setTimestamp:[NSDate date]];


점 구문은 전통적인 메시지 전달 방식을 간단히 표현하게 해준다. 언제든 점 구문을 전통적인 메시지 전달 방식으로 변경할 수 있다. 그러나 다음의 구문이 다르다는 것을 이해하는 것은 매우 중요하다.


'맥북' 카테고리의 다른 글

(맥북) WinSCP  (0) 2013.05.31
맥북 프로그램 강제종료  (0) 2013.04.01

설정

트랙백

댓글

(맥북) WinSCP

맥북 2013. 5. 31. 18:10

WinSCP 4.3.6

- - - - - Please vote for the Quality of this Port / Wrapper, not for the Game or Application!

 




Screenshots

WinSCP is an open source free SFTP clientSCP client, FTPS client and FTP client for Windows. Its main function is file transfer between a local and a remote computer. Beyond this, WinSCP offers scripting and basic file manager functionality.

Personal Notes:
Like Cyberduck, or Filezilla, but more powerful! It was bugging me that people kept on saying there is no alternative for WinSCP on mac, so I ported it! Works great! At least, with my servers... give it a little time the first couple of times, after that it should be no problem!

My System Specs:
OS: Mac OSX 10.7.2 Lion
CPU: 2.3 GHz Intel Core i5
RAM: 8GB
Video: Intel HD 3000
Port Disk Space: 219.6 MB


Known Issues:
- None currently


Installation:
Download, unzip, double-click, that's it! No replacing, no nothing!


What's New in Version 4.3.6 (See full changelog)

  • ++New Download Link Added (MediaFire)


http://portingteam.com/index.php/files/file/7089-winscp/

다운 받아서 써보고 있는데,
신기하긴 한데, 파일 editor를 vim으로 설정하면 제대로 되지 않는다. 
왜그럴까.


'맥북' 카테고리의 다른 글

Objective-C의 Dot syntax  (0) 2013.05.31
맥북 프로그램 강제종료  (0) 2013.04.01

설정

트랙백

댓글

맥북에어에서 프로그램 강제 종료하기!  낙서장 

2013/02/12 15:28

복사http://blog.naver.com/low2st/20178978096

전용뷰어 보기

 

 

1. option 키와 command 키를 누르는 순서는 상관 없지만 esc는 반드시 가장 마지막에 눌러야 함.

 

2. 이렇게 키를 누르면 아래와 같은 창이 뜸.

 

 

 

3. 원하는 프로그램을 선택한 후! 강제 종료를 클릭하면! 끝~~~

'맥북' 카테고리의 다른 글

Objective-C의 Dot syntax  (0) 2013.05.31
(맥북) WinSCP  (0) 2013.05.31

설정

트랙백

댓글

 You can use one of the following to copy from the clipboard in Vim:

"+p

"*p

SHIFTINSERT

Which one you use depends on your environment.

If you're using gVim or MacVim, you'll want "+p

If you're using Vim from the command line, you'll want "*p

If you're in insert mode or ex mode (I think) you use SHIFTINSERT

백북에서 insert는 fn Enter

By insert I mean the key over by HOMEPAGE UP, and DELETE

Explanation:

  • " means you're going to specify a register
  • there are 26 custom registers - 1 for each letter
  • there are many other registers (see this)
  • + or " refers to the unnamed buffer, which represents the system clipboard
  • p is the normal put command

More info on buffers:

If you want, you can store different text in different buffers.

To yank 3 lines to the buffer named x use this:

"x3yy

To paste the contents of the buffer named y above the cursor:

"yP

설정

트랙백

댓글

Web Standard (5)

JS HTML PHP 2012. 1. 17. 20:43
Jquery 계속


 이건 아무것도 작업되지 않은 것

첫번째로 여러가지 해봐야지
 /jquery animiation으로들어가서 index열면 여러가지 키를 누르면 해야 하는 일들이 있다.

 
자, 이걸 해결하기 위하여 js/animation.js 에다가 function들을 추가한다.

 요렇게 


 코다 슬라이더 해보자. index_a.html

$($function() {
    $('#blogSlider').codaSlider();
}) 요렇게만 해주면 된다고 한다. 

.slider를 slider로 만들어 보자.

일단 css를 수정해 보자 .slider



그 다음에는 slider들을 추가해 보자.



 



coda도 zip 여기 들어있으니 잘 찾아봅시다~

'JS HTML PHP' 카테고리의 다른 글

CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기  (0) 2011.12.17
Jquery 강좌  (0) 2011.12.17
ADODB와 쿼리 캐시를 사용 하는 방법?  (0) 2011.12.17
Web Standard Class  (0) 2011.12.15
DOM Event  (0) 2011.12.13

설정

트랙백

댓글

외주

카테고리 없음 2012. 1. 10. 20:18

설정

트랙백

댓글

'Local Setting' 카테고리의 다른 글

gvim vim tab  (0) 2014.02.12
vim win 로컬세팅  (0) 2011.12.15

설정

트랙백

댓글


http://wireframe.tistory.com/entry/CSS-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-Float-%EC%86%8D%EC%84%B1%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%A7%8C%EB%93%A4%EA%B8%B0

*예전에 작성했던 강좌의 마지막 부분입니다. CSS를 통해 이전 강좌에서 작성한 마크업에 모양새를 입히기 전에 한 번 복습 하는 의미로 참고하면 좋겠네요


float 속성



이번 시간에는 css를 통해 레이아우팅을 할 때 가장 중요한 요소인 float에 대해서 살펴보도록 하겠습니다. css의 float 속성은 margin이나 position 속성과 함께 레이아웃을 만드는 가장 기본적인 원리 입니다. 우선 대략 다음의 코드를 가진 HTML 문서를 생각해보겠습니다.

<body>
  <div id="spDiv">content of DIV whose id is "spDvi"</div>
  <div id="norDiv">blah~ blah~ * 100 </div>
</body>
body엘레멘트 내부에 두 개의 div 엘레멘트가 들어있습니다. 이 들에는 각각 텍스트로 된 컨텐츠를 포함하고 있지요. 이를 도식으로 나타내면 대략 다음과 같을 겁니다. (정확한 스크린샷이 아닌 도식적으로 나타낸 그림입니다.)
사용자 삽입 이미지

위에 그림에서 볼 수 있듯이 div 엘레멘트는 하나의 블럭으로 디스플레이되고, 하나의 엘레멘트가 위치한 아래쪽으로 그 다음 엘레멘트가 위치하게 됩니다. 따라서  스타일 시트에서 다음과 같이 spDiv의 폭을 줄여준다면 어떻게 될까요?
#spDiv{
    width:300px;
}

폭만 줄어든 div 태그의
block으로 디스플레이되기 때문에 옆 공간은 모두 여백이 되고 아래쪽에서 다음 div 엘레멘트가 시작되어 위치합니다. float는 이러한 공간의 낭비를 줄여줄 수 있는 속성입니다. 엘레멘트를 '띄워서' 여백이 공간을 차지하는 것을 없앱니다. 예를 들어 신문이나 잡지 등에서 사진의 옆으로 글이 이어지다가 사진이 끝나는 부분에서는 글이 지면의 왼쪽으로 튀어나오는 것을 볼 수 있을 것입니다. float는 바로 그러한 레이아웃을 가능하게 하는 겁니다. 예를 들어
p img{
    float:left;
}

와 같이 준다면 p 엘레멘트 안에 위치한 이미지 파일은 그러한 잡지의 사진처럼 보이겠지요.
그럼 예시 코드를 갖고 해보도록 하겠습니다. 스타일시트에서 다음과 같이 float 속성을 추가하겠습니다. left라 함은 왼쪽으로 붙어 띄운다는 의미입니다.

#spDiv{
    width:300px;
    float:left;
}
이렇게 하면 예상할 수 있듯이 아래와 같은 모양이 될 것입니다. (두번째 div 엘레멘트가 왼쪽으로 좀 삐져나간 것은 애교입니다.) 또한 아래 그림에서 주의할 것은 텍스트가 채운 영역을 표기하기 위해 테두리선을 그렸지만 실제로 두번째 div 엘레멘트의 박스모양은 사각형입니다. float 속성을 첫번째 spDiv에 부여함으로서 두번째 norDiv 엘레멘트는 그 시작점(왼쪽 위 모서리)이 spDiv와 같은 지점이 됩니다.
float 속성을 부여, '어울림' 배치를
그럼 두 번째 엘레멘트인 norDiv의 폭을 500px로 줄인다면 어떤 결과가 될까요? 간단합니다. 폭이 줄어들었다뿐이지 위와 동일한 모양이 됩니다. 따라서 아래 그림과 같은 레이아웃을 만들기 위해서는 오른쪽으로 보내고자하는 norDiv 엘레멘트에 대해서 다음과 같이 스타일시트에서 float 속성을 지정해주면 됩니다. 이때 left 값을 주어도 현재로서는 같은 결과를 기대할 수 있습니다.
#norDiv{
    width:500px;
    float:right;
}

이제 두 박스 엘레멘트는 대략 다음과 같이 위치하게 됩니다. (폭의 픽셀값의 대한 상대적 크기는 역시 애교입니다.) 이 두 엘레멘트는 현재 float 속성을 받고 있습니다. 하나는 왼쪽으로 붙어서 떠 있고, 다른 하나는 오른쪽으로 붙어서 떠 있는 상태라 할 수 있습니다. 만약 두 번 째 엘레멘트에 float:left라고 지정해도 같은 결과를 볼 수 있습니다이는 float 속성을 부여 받은 엘레멘트는 '위로 떠올라' 그 다음에 나오는 엘레멘트와 겹치게 되지만, 실제로 컨텐츠가 보이는 영역을 밀어내는 작용을 하기 때문입니다. 하지만 float 속성을 부여받고 위로 떠오른 엘레멘트들 끼리는 서로 겹침이 없이 밀어 내게 되는 것입니다.
float 속성을 이용 2단으로
그럼 세번째 div 태그를 하나 추가해보도록하겠습니다. 그럼 어떻게 될까요?

<body>
  <div id="spDiv">content of DIV whose id is "spDvi"</div>
  <div id="norDiv">blah~ blah~ * 100 </div>
  <div id="thirdDiv">
</body>
float 속성이 없는 텍스트를
세번째 div 엘레멘트인 thirdDiv는 float 속성이 없습니다. 단지 그 보다 앞서 등장한 두 개의 div 엘레멘트들은 float 속성을 받고 위로 떠 버렸습니다. 따라서 두 개의 엘레멘트를 무시하고 body의 왼쪽 상단에서 thirdDiv는 시작됩니다. 파란색의 ㄴ 자 모양의 블럭은 텍스트의 흐름을 뜻하는 것입니다. 실제 모양은 앞에서 말씀드린 바와 같이 그냥 박스입니다. 곧 두 개의 박스(spDiv, norDiv)는 float 속성을 부여받고 위로 떠올랐습니다. 떠오른 엘레멘트와 그렇지 않은 엘레멘트들은 서로 충돌하지 않습니다. 다만 나중에 등장한 (문서 상에서 뒤에 나오는) 엘레멘트는 그 보다 앞서 등장한 엘레멘트들이 차지하는 공간만큼 비켜주게 됩니다.  따라서 세번째 thirdDiv 엘레멘트는 시작은 왼쪽 위에서 하지만, 왼쪽 위의 공간은 spDiv가 차지하고 있습니다. 그 오른쪽에는 norDiv가 차지하고 있지요. 따라서 결국 위와 같은 모양으로 텍스트가 흐르게 됩니다. (조금 복잡한가요?)

여기서 재밌는 것은 이 엘레멘트들을 하나로 묶는 div 태그를 따로 사용하지 않았습니다. 따라서 이들의 상위 엘레멘트는 body가 됩니다.  즉 브라우저 화면의 크기에 따라 변동이 심할 수 있다는 것이지요. 만약, 브라우저 창이 충분히 넓다면 (혹은 spDiv,norDiv의 폭이 충분히 작다면) 다음과 같은 상황이 연출됩니다

float 속성이 없는 텍스트의 레이아웃

위의 그림에서 분홍색으로 하이라이트된 박스는 spDiv 이고 푸른색으로 하이라이트된 박스는 norDiv입니다. 두 개가 벌어지고 가운데 빈 공간이 생기자 세번째 thirdDiv의 내용이 그 틈새로 흘러들어갑니다. 그럼, norDiv에게 float:left 속성을 부여했다면 어떻게 될까요? 답이 나오나요? ㅎㅎㅎ

만약에 브라우저가 작아지거나 북마크 사이드바를 연다든지 해서 body의 폭이 충분히 작아진다면 황당한 결과물을 만날 수 있습니다. float 속성을 가지고 정해진 width 값을 가진 두 개의 박스의 전체폭의 합보다 body의 width 값이 작아진다면, 맨 처음 상황처럼 nodDiv는 아래로 밀리게 됩니다. (감싸고 있는 엘레멘트의 폭이 커지는게 아닙니다) 그랬을 때 세번째 thirdDiv의 내용은 norDiv보다 위로 올라갈 수도 있습니다. 누누히 말하지만 float 속성이 없는 thirdDiv는 float 속성이 있는 엘레멘트들을 무시하고 시작합니다. 그림으로 보자면 아래와 같이 되는 것이지요.
세번째 div가 맨위로 올라간

clear 속성



이러한 증상을 방지하기 위해서는 이들을 감싸는 상위 엘레멘트를 하나 만들어주고, width값을 지정해 주어야합니다. 그리고 두 엘레멘트가 나란히 표시되기를 원한다면 두 개의 박스의 폭의 값(width를 포함하여 margin, border, padding이 모두 포함된)을 계산하여 상위 엘레멘트의 내부폭(width값)을 넘지 않도록 해야합니다.

그렇다면 float 속성이 없는 thirdDiv 가 정상적으로 두 엘레멘트의 아래쪽에 위치하려면 어떻게 해야할까요? 그것은 float으로부터의 영향을 제거하는 clear:both 라는 속성을 스타일시트에서 부여하면 됩니다.

#thirdDiv{
    clear:both
}
이제 아래 그림과 같이 각각의 box 엘레멘트들이 얌전히 자기 자리를 찾은 것을 확인할 수 있습니다.
clear:both;
또한 clear 속성은 이것 이외에도 다른 부작용을 해결하는 좋은 수단이 됩니다. 다시 #thirdDiv 가 없던 때로 돌아가 보겠습니다.

<body>
  <div id="wrapper">
      <div id="spDiv">content of DIV whose id is "spDvi"</div>
      <div id="norDiv">blah~ blah~ * 100 </div>
  </div>
</body>
이 번에는 spDiv와 norDiv를 둘러싸는 wrapper라는 div 태그를 넣었습니다. 두 엘레멘트들의 부모엘레멘트가 되는 셈이지요. 이 wrapper라는 엘레멘트에는 폭과 '배경색'을 넣겠습니다. 어떻게 위치하는지를 살펴볼 속셈이거든요.
#wrapper{
    width:900px;
    background-color:#ffffc3; /*노란색입니다*/
}
float으로 떠오른 녀석들은 단순히 아래에 인접한 엘레멘트에만 영향을 미치는 것이 아니라 부모엘레멘트를 완전히 벗어나 버립니다. 아래 그림에서 얇고 노란 박스가 wrapper입니다만, 다른 엘레멘트들은 그 외부로 벗어나와 보입니다. 
wrapper를 추가한 그림
이를 해결하는 방법은 두 가지가 있습니다.
  1. 첫번째 방법은 부모 엘레멘트인 wrapper에 float 속성을 부여하는 것입니다. float 속성을 가진 wrapper는 함께 떠올라 두 자식 엘레멘트들을 감싸게 됩니다.
  2. 두번째 방법은 norDiv 다음에, 컨텐츠를 가지지 않는 div 엘레멘트를 하나 만들고 이 세번째 보이지 않는 엘레멘트에 clear:both를 적용하는 방법입니다.

이제 어느정도 float 속성에 대한 개념이 잡혔는지 모르겠습니다. 각각의 경우마다 간단한 html 문서를 직접 만들어서 확인해 보는 것이 이러한 개념을 이해하는데 도움이 되리라 생각됩니다. 보다 자세한 사항은 [고급 웹표준 사이트 제작을 위한 CSS 마스터 전략 : 에이콘 출판사]를 참조하시면 됩니다. (어쩌다가 책 광고를.. orz)

다음 시간에는 구조적인 마크업을 통한 네비게이션 메뉴를 만들어 보도록 하겠습니다. 간단한 리스트용 마크업 요소와 CSS를 통한 그래픽 요소와의 통합과 인터렉션에 대해 알아보겠습니다. ( 다음 시간에 소개할 내용은 CSS2 규격에 맞는 내용입니다. IE6 이하 버전에서는 자바스크립트나 기타 방법을 동원해야합니다.)

긴 글 읽어주셔서 감사합니다.

 

'JS HTML PHP' 카테고리의 다른 글

Web Standard (5)  (0) 2012.01.17
Jquery 강좌  (0) 2011.12.17
ADODB와 쿼리 캐시를 사용 하는 방법?  (0) 2011.12.17
Web Standard Class  (0) 2011.12.15
DOM Event  (0) 2011.12.13

설정

트랙백

댓글

Jquery 강좌

JS HTML PHP 2011. 12. 17. 16:29

jQuery 시리즈 강좌 리스트

[jQuery강좌] 1. 웹 개발자를 위한 jQuery 기본이해 
[jQuery강좌] 2. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (1)
[jQuery강좌] 3. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (2)
[jQuery강좌] 4. jQuery Selector - 속성(Attribute)
[jQuery강좌] 5. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (1)
[jQuery강좌] 6. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (2)
[jQuery강좌] 7. jQuery Filter - 기본필터(Basic Filter)
[jQuery강좌] 8. jQuery Filter - 폼 필터(Form Filter)
[jQuery강좌] 9. jQuery Filter - 자식필터(Child Filter)
[jQuery강좌] 10. jQuery Traverse - Filtering
[jQuery강좌] 11. jQuery Traverse - Miscellaneous Traversing
[jQuery강좌] 12. jQuery Traverse - Tree Traversal
[jQuery강좌] 13. jQuery Core
[jQuery강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여
[jQuery강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여
[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여
[jQuery강좌] 17. jQuery Event - 이벤트 지원 메서드
[jQuery강좌] 18. jQuery Event - bind() 메서드
[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~
[jQuery강좌] 20. jQuery Performance


jQuery 시리즈 동영상 강좌 리스트

[jQuery 동영상 강좌] 1. 웹 개발자를 위한 jQuery 기본이해
[jQuery 동영상 강좌] 2. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (1)
[jQuery 동영상 강좌] 3. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (2)
[jQuery 동영상 강좌] 4. jQuery Selector - 속성(Attribute)
[jQuery 동영상 강좌] 5. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (1)
[jQuery 동영상 강좌] 6. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (2)
[jQuery 동영상 강좌] 7. jQuery Filter - 기본필터(Basic Filter)
[jQuery 동영상 강좌] 8. jQuery Filter - 폼 필터(Form Filter)
[jQuery 동영상 강좌] 9. jQuery Filter - 자식필터(Child Filter)
[jQuery 동영상 강좌] 10. jQuery Traverse - Filtering
[jQuery 동영상 강좌] 11. jQuery Traverse - Miscellaneous Traversing
[jQuery 동영상 강좌] 12. jQuery Traverse - Tree Traversal
[jQuery 동영상 강좌] 13. jQuery Core
[jQuery 동영상 강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여
[jQuery 동영상 강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여
[jQuery 동영상 강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여
[jQuery 동영상 강좌] 17. jQuery Event - 이벤트 지원 메서드
[jQuery 동영상 강좌] 18. jQuery Event - bind() 메서드
[jQuery 동영상 강좌] 19. jQuery Event - 이벤트에 생명을~
[jQuery 동영상 강좌] 20. jQuery Performance

 

'JS HTML PHP' 카테고리의 다른 글

Web Standard (5)  (0) 2012.01.17
CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기  (0) 2011.12.17
ADODB와 쿼리 캐시를 사용 하는 방법?  (0) 2011.12.17
Web Standard Class  (0) 2011.12.15
DOM Event  (0) 2011.12.13

설정

트랙백

댓글

http://dev.gardenquestions.com/ko/question/how-to-use-query-cache-with-adodb



예를 들어 캐시 디렉터리 설정

$GLOBALS['ADODB_CACHE_DIR']=$_SERVER['DOCUMENT_ROOT'].'/../cache/adodb';

이제 캐시 된 결과를 얻을 CacheGetOne 처럼 캐시 * 메서드를 사용할 수 있습니다.

$data = $rs->CacheGetOne($seconds_to_cache, $sql);

'JS HTML PHP' 카테고리의 다른 글

CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기  (0) 2011.12.17
Jquery 강좌  (0) 2011.12.17
Web Standard Class  (0) 2011.12.15
DOM Event  (0) 2011.12.13
DOM 기초  (0) 2011.12.12

설정

트랙백

댓글

vim win 로컬세팅

Local Setting 2011. 12. 15. 20:07

gvim73_46.exe

HangulPuTTY-0.60h.setup.exe


closetag.vim

matchit.vim



Linux vim plugin 사용자 전체 적용하기

설치할 플러그인 목록을 정한 저는 친구의 말대로 ~/.vim & .vimrc 파일을 만들고 실습을 해보았습니다. 하지만 아쉽게도 해당 사용자만 이 기능을 사용할 수 있었습니다.

고민을 하던 중 /etc/vim/vimrc가 사용자 전체 설정을 담당하고 있다는 사실과 함께 /usr/share/vim/vim73가 패키지가 설치된 곳이라는 것을 알게 되었습니다.

.vim -> /usr/share/vim/vim73/

.vimrc -> /etc/vim/vimrc

에 적용하시면 사용자 전체가 vim 플러그인을 사용할 수 있습니다.

root]# ~/.vimrc

set ic
set nu
set nobackup
set noswapfile
syntax on
set gfn=Bitstream_Vera_Sans_Mono:h11
colorscheme torte
set ai
set nowrap
set ts=2
set sw=2
set fileencodings=utf-8,euc-kr
set encoding=utf-8
set laststatus=2
 colorscheme torte
filetype plugin indent on

http://memoweb.tistory.com/entry/cmd-폰트-바꾸기

bitstream_vera.reg

BitstreamVeraSansMono.ttf


opencapture_v1.3.5.exe



마지막으로 자때기

자.zip

 pixel 단위로 잴 수 있다  (calipper)



'Local Setting' 카테고리의 다른 글

gvim vim tab  (0) 2014.02.12
Touch cursor - Windows keyboard binding like vi vim  (0) 2011.12.22

설정

트랙백

댓글

Web Standard Class

JS HTML PHP 2011. 12. 15. 19:37
HTML DOCtype (not HTML5 but XHTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

  <head>
     <meta name="generator" content="editplus" />
    <meta http-equiv="content/type" content="text/html; charset=utf-8"/>
    <title> HTML 기본구문 </title>
  </head>

 <body>
  ^!
 </body>
</html>

HTML주의할 점 몇가지

1) h1 다음에 크기 때문에 h3를 쓰거나 하지 말 것
2) <p/>를 이용해서 칸을 띄우지 말 것
3) a href의 title은 웹표준을 위해서 넣어줘야 하는 것 같다.
   a 링크예제
   <a href="http://www.daum.net" title="다음포털">다음으로가기 </a>
  4) <p id='footer'> 라고 썼었는데 이것도 tag가 생겼대 html5
  5) font tag는 이제 없으니까 쓰지 말 것


One page reference



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

  <head>
     <meta name="generator" content="editplus" />
    <meta http-equiv="content/type" content="text/html; charset=utf-8"/>
    <title> HTML 기본구문 </title>
    <style type="text/css">
   #blank {
   height : 1000px;
   width : 100px;
   }
    </style>
  </head>

  <body>
    <a href = "#sometext" id="my_link"> My link </a>
  <div id="blank"></div>
  <p id="sometext"> The link </p>
  <a href="#my_link"> Back to top </a>
  </body>

</html>

목록


<dl>
       <dt> 타이틀
        <dd> 설명   (definition list)
         이제는 잘 안쓰인다고 하는군?


HTML기본


1) 인라인 엘리먼트 – Element와 관련된 줄바꿈이 없다! (화면에 출력될 때 줄이 바뀌지 않고 같은 줄에 등장) (<a>, <abbr>, <area>, <audio>, <em>, <strong>, <select>, <span> <label>, <link>, <command>, <nav>, <mark>, <meter>, <time>)

2) 블록 엘리먼트(Block label element) – Element 전, 후에 줄바꿈을 둔다. 각 엘리먼트 위에 세로로 쌓인다. 블록 요소라는 것은 다른 블록 요소를 포함 할 수 있으며, 다른 블록 요소 안으로 들어갈 수 있는 요소를 말한다. (<article>, <aside>, <blockquote>, <body>, <br> ,<button>, <canvas> <header>, <hr>, <object>, <section>, <progress>, <table>, <video>)


HTML에서의 조건 IE 조건부



<!- -[if IE 6]> <link rel=”stylesheet” type=”text/css” href=”ie6style.css” /> <![endif]- ->  조건부 주석은 HTML에만 넣을 수 있지만, 스타일 시트를 IE의 특정 버전에서만 인식하게 하려면 HTML 문서의 head 안에 link요소 앞에 조건부 주석을 넣는다.

- [if IE] – IE5 이상의 모든 버전을 대상으로 한다.
- [if IE 5], [if IE 7]등 - IE라는 글자와 버전 숫자 사이에 빈칸(공백)이 있게.  특정 브라우저 버전 한 개를 대상으로 한다.
- [if gt IE 6] – gt는 초과(greater than)라는 뜻. 이 예는 IE6 초과 버전
- [if gte IE 7] – gte는 이상(greater than or equal)라는 뜻. 이 예는 IE7 이상
- [if lt IE 8]
– lt는 미만(less than)이라는 뜻. 이 예는 IE8 미만 버전을 대상
- [if lte IE 6] – lt는 미만(less than or equal)이라는 뜻. 이 예는 IE6 이하 버전을 대상 ** 딘 에드워드의 IE7과 IE8 (http://code.google.com/p/ie7-js/)  이 라이브러리의 목적은 ‘마이크로소프트 인터넷 익스플로워의 렌더링 기능을 표준 브라우저처럼 만드는 것’이다.


HTML 특수문자들


Character Entity Name Description
" &quot; quotation mark
& &amp; ampersand
< &lt; less-than
> &gt; greater-than
© &copy; copyright
® &reg; registered trademark ™
&trade; trademark
× &times; multiplication
 &nbsp

Div와 Span 태그의 차이점!



Div는 block tag이고 span은 inline element tag이다. in-line은 줄바뀜 없음.
(머 하지만 id css를 먹일 수 있는 단위이기는 하다)


 

여러가지 legend같은 input 을 그룹화하는 태그도 있더라



 

웹표준 문서의 div layout : css-3.html


 

타이포 관련 CSS

em은 ctrl-+하면 확대되고, px은 확대가 안된다. 절대 크기이다.
그러니까 요즘 웹표준에서는 em으로 많이 사용된다고 한다.

font-family
: "Dotum" font-size : em : 12px=1em 2em=24px  % : 150%라면 
line-height : 해당줄부터 적용
font-weight : 굵기 normal bold 숫자는 의미가 없음font-variant : small caps
text-indent : 
text-align : left centervertical-align : 인라인 요소끼리 세로위치를 정렬 (span img a ...) top, middle
text-decoration : 밑줄 취소선등 underline..
letter-spacing : 
text-transform : 대소문자

더 많은데...
 

오 나름 재미있는 모냥새군?


 



CSS Image
http://iluku.net/blog/101
요기를 꼭 참고하자.



color sites


colorschemedesigner.com   colorjack.com (color pallette)  typetester.org (타이포그라피)

Editor tool

Espresso, coda (요게 Mac용인데 아주 좋다고 한다)

expression blend

CSS 그룹화


, 로 연결한다. div > p, #wrap, p.note, ...




CSS init

h1, h2, h3, h4, h5...{
   font-family : Verdana;
}

가상클래스  hover 뭐 어쩌구 하는 애들은 가상 클래스


가상클래스는 lvhaf 이 순서가 맞춰져야 한다고 한다.

가상요소



선택자




* 인접요소는 h1에는 적용이 안되고 h2에만 적용이 되는데, 아마도 jquery등으로 element늘렸을 떄 사용하는 것 같다.
* 자식 선택자는 자식을 선택하는 것 같다. 쫌 이상하지? 별로 제대로 동작 안하는 것 같애. (손자는 적용 안된다는데)
* 재미있는 건 
   #page p~p 이렇게 하면 p에서부터 p까지를 모두 선택해 준다.

display 요녀석


display : block  인라인요소를 block으로
display : inline  인라인요소를 inline으로

form에 관련된 이야기


주의 할 점은 input이 inline이니까 display : block 으로 설정해 줘야 아래로 나온다는 것을 잊지 말것.





border를 이용해서 debugging을 많이하게 되니까 많은 이용 바랍니다. ^^

<!doctype html>
<html>
 <head>
  <meta http-equiv='content-type'content='text/html; charset=utf-8' />
  <link rel='stylesheet' href='css-2.css' type='text/css'>
 </head>
 <body>
  <div id='content'>
   <h1>
    그림으로 보는 재미있는 역사이야기
   </h1>
    <p class='borderTest'>
          그림, 한눈에 역사를 통찰하다『역사의 미술관』. 이 책은 서양의 역사화를 주된 소재로, 유명한 역사적 인물이나 흥미로운 역사적 사건과 현상 가운데 그림으로 그려진 사례들을 모아 주제별로 풀어 쓴 것이다. 알렉산드로스, 아우구스투스, 나폴레옹, 루이14세, 스탈린 등 시대를 품에 안았던 인물을 중심으로 그림 속의 역사뿐만 아니라 그림이 그려진 시대 상황까지 아우르며 두 시대의 연관성을 탐색하였다.
    </p>
    <p>
     더불어 역사의 흐름을 바꿔놓은 전염병, 왕들의 처형, 세계대전 등의 피해역사에 대한 이야기와 카리스마, 종교 개혁, 그리스의 지성 등의 키워드를 통해 역사의 흐름 속에서 인간의 이성과 정신의 영역이 어떻게 진보하였는지 그림을 통해 생생하고 창의적으로 보여준다.
    </p>
   <h2>
    다 그림이다 (동서양 미술의 완전한 만남
   </h2>
    <p>
    인간의 가장 기본적인 모습들, 그러나 지금은 돈의 가치에 밀려 잊고 살았던 삶의 조건들 10가지를 선정해, 동서양에서는 그것의 가치를 어떻게 설정하였고, 어떻게 표현했는지 살펴보는 책이 다. 옛 그림에서 지혜를 얻고 동시에 서구식 교육을 받아온 세대들에게 현대적으로 재해석하는 방법을 동시에 제공함으로써, 삶의 가치를 바로 세우는데 균형감을 선사한다.
    </p>
  </div>
 </body>
</html>
<!-- http://lab365.net/demo_source/web_standard/05_background.html -->



body {
 background-color : #eee;
 margin : 5px;
 font-family : '맑은 고딕';
 background-image: url('img/bg-03.png');
 /* background-repeat : repeat-x;*/
 /* repeat이 아무것도 없으면 무한 repeat이 default */
 /* background-repeat : repeat-y; */
 background-attachment : scroll;
}

div#content {
 width : 75%;
 margin : 0 auto;
 padding : 10px;
 border : 1px solid #ccc;
}

.borderTest {
 border-width : 2px;
 border-style : solid;
 border-color : gray;
 padding : 5px;
 border-radious : 10px;
 box-shadow : 5px 5px 10px red;
 -moz-border-radius : 10px; /* -moz fire fox 접두사 */
 -webkit-border-radious : 10px; /* safari 접두사 */
 -moz-box-shadow : 5px 5px 10px #999;
 letter-spacing : 0.1em;
 line-height : 1em;
 text-transform : uppercase;
}






BOX 모델 : MBPC 순서대로 MB네 PC일쎄?


margin : 0 auto; /* 위아래 와 좌우 */





<!doctype html>
<html>
 <head>
  <meta http-equiv='content-type'content='text/html; charset=utf-8' />
  <title> Box model </title>
  <style type='text/css'>
   body {
    background : #eee;
    font-family : '맑은 고딕';
    font-size : 13px;
    margin : 0;
    padding : 0;
   }
   #wrapper {
    width : 960px;
    margin : 0 auto;
    background : #ccc;
    height : 600px;
   }
   #myDiv1 {
    width : 100px;
    height : 200px;
    border : 5px dashed black;
    margin-left : 30px;
    background : orange;
    float : left;
    margin-right : 30px;
   }
  </style>
 </head>
 <body>
  <div id='wrapper'>
   <div id='myDiv1'> </div>
   <p id='text1'> <strong> Text1 </strong>
[엑스포츠뉴스=방송연예팀 김수연 기자] 배우 한채영이 아시아 최대 규모의 시상식에서 잇달아 상을 수상하며 아시아 최고 미인으로 우뚝 서고 있다.
....   </p>
   <p id='text2'> <strong> Text2 </strong>
미국 텍사스에서 산타클로스 복장의 50대 남성이 성탄절 아침 선물을 풀어보던 일가친척 6명을 사살하고, 자신도 목숨을 끊는 사건이 일어났다.
.....   </p> <!-- eo p text2 -->
  </div> <!-- eo wrapper -->
 </body>
</html>

그림 1) 노란 박스에만 left가 붙은 경우 -> 오른쪽 녀석은 감싸게 된다.



그림2) 글씨도 left가 붙은 경우. 노랑박스를 감싸지 않고 자기도 left align 되어 버린다.
          또 div가 있었다면 글씨가 있는 부분 오른쪽에 나타나면서 감쌀 것이다.






<!doctype html>
<html>
 <head>
  <meta http-equiv='content-type'content='text/html; charset=utf-8' />
  <title> Box model </title>
  <style type='text/css'>
   body {
    background : #eee;
    font-family : '맑은 고딕';
    font-size : 13px;
    margin : 0;
    padding : 0;
   }
   #wrapper {
    width : 960px;
    margin : 0 auto;
    background : #ccc;
    height : 600px;
   }
   #myDiv1 {
    width : 100px;
    height : 200px;
    border : 5px dashed black;
    margin-left : 30px;
    background : orange;
    margin-right : 30px;
    float : left;
   }
   p {
    width : 300px;
    float : left; /* 요놈이 있으면 요놈도 left이다. */
                  /* left라는 건 left 정렬이다. 그러니까 왼쪽에 있는 녀석을
              감싸지 않는다 */  1번그림은 이게 없을 때 2번 그림은 이게 있을 때
    margin : 28px;
   }
   #text1 {
    border-color : #553;
   }
   #text2 {
    border-color : #ffffaa;
    clear: both;
   }
  </style>
 </head>
 <body>
  <div id='wrapper'>
   <div id='myDiv1'> </div>
   <p id='text1'> <strong> Text1 </strong>
[엑스포츠뉴스=방송연예팀 김수연 기자] 배우 한채영이 아시아 최대 규모의 시상식에서 잇달아 상을 수상하며 아시아 최고 미인으로 우뚝 서고 있다.
한채영은 지난 12월 13일 중국 북경에서 열린 '2011 차이나 트렌드 어워즈(2011 China Trend Awards)' 에서 2011년 중국 패션 최고의 빛나는 아티스트 상을 수상했다.
이번 행사는 중국 북경 TV에서 진행된 행사로 그 목적은 2011년 한 해 중국의 패션계에서 가장 빛나는 해외 아티스트에게 드리는 상으로서 중국 국민 배우 청이쉰, 야오천 등 100여 명의 배우가 함께한 가운데 한채영이 그 어깨를 나란히 했다.
또한, 23일 중국의 최고의 위성방송 중 하나인 '안휘위성'과 중국 최고의 포털 사이트인 시나닷컴에서 주최하는 중국에서 손꼽는 시상식인 '2011 드라마 어워즈'에도 참석하였다.
'2011, 드라마 어워즈'에서는 2011년 우수한 드라마 작품과 가장 훌륭한 방송인들이 한자리에 모여 2011년 중국 드라마계를 더욱 빛내는 성대한 행사이며 본 시상식은 2011년 중국위성방송에서 방영된 약 1000여 편의 중국 드라마에 대한 평가 및 홍콩, 대만 및 한국, 일본, 태국 등의 우수 작품도 평가가 진행됐다.
그 중 한채영은 '꽃보다 남자', '신이라 불리운 사나이' 등의 작품으로 "2011년 온라인 해외 최고 인기아티스트상"을 수상하였다. 또한, 이 날 시상식에서 한채영은 20여 년간 중국에서 큰 인기를 얻고 있는 배우 '임지령'에게 '2011 온라인 만능 엔터테이너 상'을 수여하는 시상자로 나서며 유창한 중국어 실력을 뽐내기도 했다.
한편, 한채영은 내년 초 중국영화 '빅딜'의 개봉을 앞두고 있다.
방송연예팀 enter@xportsnews.com
   </p>
   <p id='text2'> <strong> Text2 </strong>
미국 텍사스에서 산타클로스 복장의 50대 남성이 성탄절 아침 선물을 풀어보던 일가친척 6명을 사살하고, 자신도 목숨을 끊는 사건이 일어났다.
25일 오전 11시30분쯤, 미국 텍사스 경찰로 한 통의 긴급전화(911)가 걸려왔다. 수화기에서는 아무런 소리가 들리지 않았다. 긴급 출동한 경찰은 전화가 걸려온 댈러스 국제공항 서쪽 그레이프바인의 한 아파트로 향했다. 이곳은 평소 범죄 발생이 거의 없는 고급 아파트 단지였다.
경찰이 실내로 들어섰을 때, 가장 먼저 눈에 들어온 것은 화려한 크리스마스 장식이었다. 바닥에는 포장을 뜯다 만 선물들이 어지럽게 널려 있었고, 일부는 포장이 뜯기지 않은 상태였다. 휴지통에는 선물 포장지가 가득했다. 그 가운데 사이사이로 총상을 입은 시신 7구가 있었다. 권총 2정과 함께였다.
현지 경찰의 대변인인 로버트 에벌링(Eberling) 경사는 “사망자들은 크리스마스 선물 포장을 풀고 있다가 총에 맞은 것으로 보인다”며 “6명을 총으로 쏜 범인은 자신도 방아쇠를 당겨 자살한 것이 분명하다”고 말했다.
사망자 가운데 누군가가 죽기 전에 경찰에 긴급전화를 걸었지만, 말을 하지 못할 정도로 이미 내상이 컸던 것으로 경찰은 추정했다. 경찰은 크리스마스 오전이어서 이웃 중에 총소리를 들은 사람도 없었다고 밝혔다.
담당 수사관은 “사망자의 연령대는 18~60세로, 여성 2명과 청년 남성 1명, 중년 남성 4명”이라며 “총을 쏜 사람은 이 가운데 50대 남성으로, 산타클로스 복장이었다”고 말했다. 에벌링 경사는 “피해자들이 도망을 가거나 저항한 흔적이 없다”며 “사망자들의 정확한 신원과 범행 동기 등을 조사 중”이라고 밝혔다.
   </p> <!-- eo p text2 -->
  </div> <!-- eo wrapper -->
 </body>
</html>



CSS position relative & absolute

relative는 상위요소를 기준으로 상대 위치를 가진다.
absoulte는 절대 위치로서 마치 책에 포스트 잇을 덧붙이듯이 떠있어서 전체화면에서 절대위치를 가진다.

상위 요소에 아무값을 주지 않고 현재 요소에 relative를 주면 상위 요소를 기준으로 위치를 가진다. 하지만 이럴경우 현재 요소가 상위요소에 속해져 있는 상태가 되기 때문에 현재요소의 width 혹은 height만큼 상위요소도 영향을 받게 된다.

하지만 상위요소를 relative를주고 하위요소를 absolute로 정하면 상위요소를 기준으로한 절대위치가 지정된다.



Homework :
webdeveloper  christoper 어쩌구..
http://lab365.net/demo_source/web_standard/07_layout_basic.html
요놈.

위 숙제 
원래 소스는 

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../css/layout-01.css" />
<title>Layout Basci Site</title>
</head>
<body>

<div id="wrap">

<h1>Web Site Project</h1>
<div class="content">
<h2>Main Content Heading</h2>
<p>Art Video Blog</p>
</div>
<div id="aside">
<h2>Sider</h2>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<div id="footer">
<p>Copyright &copy; 2005, Creative Lab365. All rights reserved.</p>
</div>

</div>

</body>
</html>

/* page Style */

#wrap {
	min-width: 600px;
	width: 80%;
	margin: auto;
	background: url(../img/subtle_freckles.png);
	font-family: Verdana;
	overflow: hidden;
}

#aside, .content {
	height: 600px;
}

.content {
	background: red;
	float: left;
	width: 80%;
}

#aside {
	background: #fdf2dc;
	float: left;
	width: 20%

}

#aside ul {
	list-style: none;
	padding-left: 0;
}

#footer p {	
	clear: both;
	font-size: .75em;
	font-variant: small-caps;
	text-align: center;
}

/* navigation */

#aside ul {
	padding-left: 10px;
	line-height: 30px;
	list-style: none;
	font-variant: small-caps;
}

#aside li a {
	text-decoration: none;
	color: purple;
}

#aside li a:hover {
	font-size: 1.4em;
 	color: #FF9E00; 
} 
 요렇게 되어있고 내 코드는 

<!doctype html>
<html>
<head>
<style type='text/css'>
#wrapper {
margin : 0px auto;
width : 960px;
height : 690px;
font-family : Verdana;
}
h3 {
font-size : 16px;
font-family : dotum;
}
#body {
background : red;
width : 700px;
height : 600px;
float : left;
}
#sidebar {
margin-top : 10px;
float : left;
}
#list {
padding-left : 10px;
list-style : none;
line-height : 30px;
}
li {
font-family : Tahoma;
text-transform : uppercase;
color : pink;
margin-left : 10px;
}
li:hover {
font-size : 20pt;
color : orange;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='head'>
<h1> Web Site Project </h1>
</div>
<div id='body'>
<h2> Main Content Heading </h2>
<h3> Art Video Blog </h3>
</div>
<div id='sidebar'>
<h2> Sider </h2>
<ul id='list'>
<li> Home </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</div>
</body>
</html>

요렇게 만들었다. 중요한건 center로 정렬하는 것은 margin : 0, auto 로 하면 되고, 더 중요한건 side bar를 제대로 control하기 위해서는 side bar 자체를 float left를 주지 않으면 제대로 margin이나 padding이 컨트롤 되지 않는다!!!


 



마진이 합쳐지는 현상이 있다.
(겹침현상) 더 큰 수치의 놈만 설정된다.



div는 margin을 주게 되면 부모와 자식에게 모두 영향을 줘서 같이 margin이 먹는다.




위 파일은 음음 몇가지 수업중 예제이다.
position absolute는 부모로부터 인가?

jquery - ajax
webfont  이거 두개 물어보자~~ ^^


다음 포스팅에서 계속

'JS HTML PHP' 카테고리의 다른 글

Jquery 강좌  (0) 2011.12.17
ADODB와 쿼리 캐시를 사용 하는 방법?  (0) 2011.12.17
DOM Event  (0) 2011.12.13
DOM 기초  (0) 2011.12.12
웹 폰트 web font  (0) 2011.11.21

설정

트랙백

댓글

dd

카테고리 없음 2011. 12. 13. 22:06


onclick="cmtview('5610032','c0098890','1'

@@**@@http://recipes.egloos.com/5610032'></span><div class="post">

var BBB = location.href[3].split('/');


http://validator.w3.org/

html xhtml
<article>
<header>
<div id='  ' >

P는 줄바꿈이 아니다.!

설정

트랙백

댓글

DOM Event

JS HTML PHP 2011. 12. 13. 16:31

~\Downloads\Ajax DOM scripting\dom\commCSS.css.html
 1 /* 공통 CSS */
 2 body{
 3     margin: 0;
 4     padding: 0;
 5     font-size: 16px;
 6     font-family: "굴림", "Times New Roman";
 7 }
 8 h1{
 9     margin-top: 10px;
10     margin-left: 40px;
11     font-size: 18px;
12 }
13 #groupOne {
14     margin-top: 20px;
15     margin-left: 40px;
16 }
17 .idcolor {
18     background-color: yellow;
19 }
~\Downloads\Ajax DOM scripting\dom\chap07\event.js.html
 1 //-----------------------------------------------------
 2 // 이벤트 개요
 3 //-----------------------------------------------------
 4 window.onload = function () {
 5     var qtyClick = document.getElementById('qty');
 6     var priceClick = document.getElementById('price');
 7 
 8     if (qtyClick.addEventListener) {
 9         qtyClick.addEventListener('keyup', Show.qty, false);
10         priceClick.addEventListener('keyup', Show.price, false);
11     } else {
12         qtyClick.attachEvent('onkeyup', Show.qty);
13         priceClick.attachEvent('onkeyup', Show.price);
14     }
15 }
16 var Show = {
17     entryQty: 0,
18     entryPrice: 0,
19     qty: function(event) {
20         var clickElement = event.target || event.srcElement;
21         $('show1').innerHTML = Show.entryQty = clickElement.value;
22     Show.amount();
23     },
24     price: function(event) {
25         var clickElement = event.target || event.srcElement;
26         $('show2').innerHTML = Show.entryPrice = clickElement.value;
27     Show.amount();
28     },
29     amount: function() {
30         $('show3').innerHTML = '금액: ' + Show.entryQty * Show.entryPrice;
31     }
32 }
~\Downloads\Ajax DOM scripting\dom\chap07\event.html.html
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5   <title>이벤트</title>
 6   <link rel="stylesheet" href="../commCSS.css" type="text/css" />
 7   <script language="javascript" type="text/javascript" src="../prototype_160.js"></script>
 8   <script language="javascript" type="text/javascript" src="event.js"></script>
 9 </head>
10 <body>
11 <h1>이벤트 발생</h1>
12 <div id="groupOne">
13     수량: <input type="text" id="qty" />
14     단가: <input type="text" id="price" />
15 
16     <br /><br />
17     <div id="showArea">
18         <div id="show1"></div><br />
19         <div id="show2"></div><br />
20         <div id="show3"></div>
21     </div>
22 </div>
23 </body>
24 </html>

'JS HTML PHP' 카테고리의 다른 글

ADODB와 쿼리 캐시를 사용 하는 방법?  (0) 2011.12.17
Web Standard Class  (0) 2011.12.15
DOM 기초  (0) 2011.12.12
웹 폰트 web font  (0) 2011.11.21
이벤트 리스너같이 사용하는 PHP클래스  (0) 2011.11.13

설정

트랙백

댓글

DOM 기초

JS HTML PHP 2011. 12. 12. 18:26
자, DOM에서 어떻게 listener등을 걸치느냐!

  ~\Downloads\Ajax DOM scripting\dom\chap04\elementObject.js.html
 1 //-----------------------------------------------------
 2 // 엘리먼트 오브젝트
 3 //-----------------------------------------------------
 4 window.onload = function () {
 5     var okClick = document.getElementById('okClick');
 6     if (okClick.attachEvent) {
 7         okClick.attachEvent('onclick', Show.okClick);  // IE
 8     } else {
 9         okClick.addEventListener('click', Show.okClick, false);  // IE 이외
10     }
11 }
12 var Show = {
13     okClick: function(event) {
14         var sportObject = document.getElementById('likeSport');
15         var showOne = document.getElementById('show1');
16         showOne.innerHTML = '1. ' + sportObject;
17 
18         var addSportObject = document.getElementById('addSport');
19         var showThree = document.getElementById('show2');
20         showThree.innerHTML = '2. ' + addSportObject;
21     }
22 }
자자 그렇지? 

가장 중요한 것은  

'JS HTML PHP' 카테고리의 다른 글

Web Standard Class  (0) 2011.12.15
DOM Event  (0) 2011.12.13
웹 폰트 web font  (0) 2011.11.21
이벤트 리스너같이 사용하는 PHP클래스  (0) 2011.11.13
PHP 객체 생성자와 객체 파괴자  (0) 2011.11.13

설정

트랙백

댓글


http://cozyu.tistory.com/7

Source Insight에서 PHP 사용하기

분류없음 | 2007/10/09 17:27 | Posted by 좋은날
홈 계정을 관리할 때 다른 사람들은 어떻게 하는지 잘 모르겠지만, 내가 사용하는 방법을 한번 소개해 볼까 한다. 여기서 관리라 함은 홈 계정에 있는 PHP파일을 편집하는 걸 의미한다.

기존 방법

ssh나 telnet을 이용, 직접 계정에 접속하여 vi등의 에디터를 이용하여 직접 편집하는 방법이 있겠다. 에디터 다루는 솜씨만 있다면야 별 불편 없이 사용할 수 있는 방법이겠지만, 우리들은 vi보다 notepad가 훨씬 편한, 윈도에 길들여져있는 윈도 유저들 아닌가.

그래서 눈을 돌리게 되는 방법이 로컬에서 편집을 해서 ftp를 이용하여 홈에 파일을 업로드 하는 것이다. 일단 로컬에서 편집을 하기 때문에 자신의 취향에 맞는 에디터를 이용해서 편하게 편집할 수 있는 장점이 있다. 대부분의 사람들이 EditPlus나 UltraEdit등의 텍스트 에디터를 많이 이용하고 있을 것 같다. 이렇게 로컬에서 편집한 후에 ftp를 이용하여 파일을 업로드 한 뒤에 브라우저를 통해 변경된 사항을 확인한다.

불편한점

vi를 사용하는 것, 그 자체가 너무 불편하다. (아니라는 사람에겐 정말 할 말 없다.)

ftp를 이용해서 파일을 하나하나 업로드한다. 즉 내가 편집한 파일이 무엇인지 기억하고 있어야된다. 그리고 편집이 끝날 때마다 일일이 수작업으로 업로드를 해 줘야 한다.

로컬에서의 편집도 그렇다. EditPlus나 UltraEdit같은 단순한 텍스트 편집기로는 함수 호출 구조를 본다든지 할 때 소스를 따라가기 정말 귀찮다. 파일을 찾아 열어주거나 에디터의 find기능을 쓸 수 밖에 없다. C나 C++을 분석할 때 우리는 소스인사이트를 쓴다. PHP도 단순 텍스트 파일이 아닌 프로그램 아닌가. 소스인사이트에서 PHP를 쓸 수만 있다면?

WinScp를 이용한 자동 업로드

먼저 자동으로 홈 계정에 파일을 올리는 방법을 소개한다. SSH를 지원하는 홈 계정이라면 어디든 이 방법을 사용할 수 있을 것이다. 필요한 프로그램은 아래 링크에서 다운받는다.

http://winscp.net/eng/index.php

다운로드 한 뒤 설치하여 실행을 해 보면 어느 계정에 접속할 지 묻는 창이 뜬다. 처음 접속하는 것이라면 New 버튼을 클릭한 뒤 자신의 계정에 맞는 값들을 채워넣는다. HostName에는 자신의 홈 계정 URL을, Port는 22, User Name과 Password는 본인 계정의 것을 넣고 Protocol은 SCP를 선택한다. 자신의 홈 계정에 따라 다른 것을 선택해도 되지만 SSH를 지원한다면 SCP를 선택하면 된다. 연결하기 전에 Save버튼을 한 번 눌러 준 다음에 연결하도록 하자.



연결하고 나면 왼쪽에는 local directory, 오른쪽에는 remote directory가 보인다. 먼저 싱크를 맞출 local, remote 디렉토리를 화면에 띄워준다. 로컬에서 편집한 후에 자동으로 업로드 하는 기능에 대해 얘기하는 것이므로 로컬에 홈 계정에 있는 것과 같은 파일들이 저장이 되어 있을 것이다. 여기에서 keep remote directory up to date 기능을 이용하면 local에서 파일 변경이 감지되었을 때 자동으로 remote로 파일을 전송하여 두 개의 파일이 항상 같도록 유지해준다. 즉, 자동으로 고친 파일들이 업로드된다. 단축키 Ctrl + U.

소스 인사이트에서 PHP 

여기에서 중요한 것은 아래 링크에서 가져다 쓰는 건 #을 comment로 인식하지 않기 떄문에 많이 불편하다는 것인데, 이렇게 바꾸면 된다. (그것까지 수정된 파일을 여기에


밑에 적용하는 방법 있으니까 잘 보시고!
Preference에서 Property를 고르고 그 안에서 comment를 line으로 수정해 주어야 한다규!



처음 소스인사이트에서 PHP를 사용할 수 있다는 것은 아래 사이트를 통해서 알게 되었다. 기존에 EditPlus를 사용하면서 답답했던 점들이 해소되어 얼마나 기뻤는지 모른다.

http://bbs.chinaunix.net/viewthread.php?tid=727747

소스인사이트라는 툴을 모르는 사람이 있을 것이다. 뭐가 좋은가? 간단하게 딱 한 가지만 꼽는다면 함수 참조다. 소스인사이트에서는 PHP파일들이 하나의 프로젝트로관리되며 변수, 함수들의 연결 관계를 가지고 있다. 쉽게 얘기하면 list.php에서 view_date라는 함수를 호출한다고 할 때 더블 클릭 한번으로 view_date 함수가 있는 파일로 점프할 수 있다. 소스인사이트를 사용하지 않는다면? view_date가 어느 파일에 있는지 알고있어야 하고 파일을 열어서 그 위치로 가는데 page down키를 누르든, find기능을 이용하든 시간이 좀 걸리게 될 것이다.

변수, 함수 참조라고 얘기하긴 했지만 사실 변수 참조는 되지 않는다. C나 C++이면 가능하겠지만 알다시피 PHP에서는 변수 앞에 $를 사용하기 때문에 소스인사이트에서 변수로 파싱이 안되다. 안타까운 부분이지만 함수 참조만으로도 훨씬 편하게 PHP편집이 가능하다. PHP함수 뿐만 아니라 java script 함수들도 함수 참조를 사용할 수 있다.

PHP를 소스인사이트에서 사용하려면 language에 PHP를 추가해줘야 한다. 첨부 파일을 다운로드 하여 PHP가 설치되어 있는 디렉토리에 복사한 뒤 다음의 과정을 따른다.

1. Options -> Preferences -> Language에서 Import 버튼을 클릭하여 다운로드한 CLF 파일을 선택한다.
2. Options -> Document Options에서 Add Type 버튼을 클릭하여 PHP file이라고 입력한 뒤 OK. File filter에 *.php, Language에 PHP script, include when adding to projects에 체크한다.
3. Options -> Style properties를 선택한 뒤 load 버튼을 클릭하여 다운로드한 CF3파일을 선택한다.




이제 프로젝트를 생성하여 syncronize files를 한번 실행하기만 하면 된다.

이용방법

홈 계정을 편집할 일이 있다면 WinScp와 소스인사이트를 실행한다. WinScp에서 Ctrl + U눌러주고... 소스인사이트에서 파일을 편집하여 자장하면 WinScp는 새로 저장된 파일을 홈 계정에 자동으로 업로드해준다. 즉, 사용자는 소스인사이트에서 수정한 후 저장한 다음에 브라우저에서 바로 확인하면 그만인 것이다.



 

설정

트랙백

댓글

Key Re mapping

윈도우즈 2011. 12. 7. 21:50


http://www.howtogeek.com/howto/windows-vista/disable-caps-lock-key-in-windows-vista/





How to Disable Caps Lock Key in Windows 7 or Vista
 


The caps lock key is one of those remnants of another age of computers, back when people used to shout at each other more often. Unless you’re in the accounting department, it’s probably not very useful, so today we’ll learn how to disable it.

If you’re using Mac OS X instead, you can follow our guide on how to disable Caps Lock in OS X using a registry hack, or you can map any key to any key if you really want to.

Note: This article was originally published years ago, but we’ve updated it and are republishing for everybody that might not have seen it. Image by Laurence Vagner

Understanding How Windows Key Re-Mapping Works

Windows doesn’t have a default setting to allow for disabling the key, so what we have to do is re-map the key to something non-existent so as to completely disable it. To do this manually, you’d open up regedit.exe and browse down to the following key:

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout


Here’s the format of the binary data in the Scancode Map key, with the important parts in bold and various colors:

00000000 00000000 02000000 00003A00 00000000

Here’s how it works:

  • The first 16 zeros are just there to waste space.
  • The “02″ in bold represents how many keys you are going to re-map plus 1. (It really represents the length of the data, but whatever)
  • The orange bolded “0000″ is the key we actually want Windows to map TO, which in this case is nothing, or 0.
  • The blue bolded “3A00″ is the key we are mapping from, in this case the caps lock key.
  • The next 8 zeros are there to waste space as the null terminator.

You can map between multiple keys by incrementing the “02″ and then adding another of the colorful bold blocks in the middle. The 3A00 in the mix is the scan code.  For example, if you wanted to disable the caps lock key and then change scroll lock into a caps lock key:

00000000 00000000 03000000 00003A00 3A004600 00000000

It might seem complicated, but it’s really fairly simple once you start working with it.

Downloadable Registry Hack to Disable or Remap the Caps Lock Key

Now that you’ve learned how these things work internally, you can download and extract the zipfile which contains the following files:

ChangeCapsToControl.reg Changes Caps Lock to be a Control key
ChangeCapsToShift.reg Changes Caps Lock to be a Shift key
SwitchCapsToScrollLock.reg Disables Caps Lock and swaps Scroll lock to be Caps Lock
KillCapsLock.reg Disables Caps Lock
DisableKeyboardRemap Uninstalls the preference by deleting the key

Once you’ve applied one of these registry files, you’ll have to reboot your computer for it to work. To uninstall, you can use the uninstall registry tweak, or you can simply delete the Scancode Map key entirely.



맥을 쓰다보면.. 정확히 맥오에스를 사용하다보면 맥만으로 안되는 부분들이 있다. 예를 들면 인터넷 뱅킹, 쇼핑몰 이용등이 있겠다. 역시나 그놈의 active-x가 문제겠다. 


여하튼 한영 전환은 우리에겐 필요하고 기본적으로 어떻게 해야하는지 모르는 분들이 많다. 

1. 키보드 타입 설정
간단한 방법으론 부트캠프 설치시 키보드 설정을 3번으로 하는게 중요하다. 데스크탑을 사용하는 경우엔 크게 상관없는데 맥북을 사용할 경우엔 1번 타입으로 설정하면 곤란하다. 키보드 타입에 따라 어떻게 바뀌는지 아래서 살펴보자.

윈도우 설치시에 키보드 타입에 따라서 다르다.
1번 키보드 타입선택 설치시 
한영변환 : 우측 옵션키 
한자변환 : 우측 컨트롤키 
3번 키보드 타입선택 설치시 
한영변환 : 쉬프트+스페이스바 
한자변환 : 컨트롤+스페이스바 
윈도우키 : 양쪽 커맨드 키

그러면 윈도우 설치후에 키보드 타입을 바꾸는 방법은 없는가?  있다! ㅎ
내 컴퓨터를 오른쪽 마우스 버튼클릭...[속성]선택하고
[장치관리자] 열고, 
[ 키보드 ] 에서 [PC/AT 101키 호환 키보드/USB 키보드(종류 1)]을 선택후, 오른쪽 마우스 버튼클릭후...[드라이버 업데이트]를 선택고
[ 하드웨어 업데이트 마법사]가 나오면 [목록 또는 특정 위치에서 설치]를 선택하고
[다음]버튼을 눌른후에....[검색 안 함. 설치할 드라이버를 직접 선택]을 선택하고 '다음' 클릭하고,
[ 호환 가능한 하드웨어 표시]의 선택을 풀어주고(체크표시가 사라집니다) 
여러 모델이 나오는데 
제조업체는 (표준 키보드) 
모델은 PC/AT 101키 호환 키보드/USB 키보드(종류 3)을 선택하고 
설치한다.
그리고 윈도우를 재시동하면 쉬프트+스페이스로 한영전환을 하면 된다.

하지만..... 막상보면 저런건 없고 그냥 HID 호환 키보드만 보이는 경우가 있다. ㅋ

그렇담 2번으로!

2. 레지스트리 변경
첨부되있는 파일 다운받아 실행하면 레지스트리가 변경된다. 재부팅하면 다음과 같다.

alt키 -> 윈도우키
왼쪽사과키 -> alt키
오른쪽사과키 -> 한영키
오른쪽작은엔터키 -> 한자키 

 
이렇게 해도 되고!
아래는 내가 만든 레지스트리 한자키 까지. 흠흠 냐호호.


터치커서까지
http://memoweb.tistory.com/entry/Touch-cursor-Windows-keyboard-binding-like-vi-vim 

Map Any Key to Any Key on Windows 7 / XP / Vista

If you are tired of the way certain keys on your system work, such as the Caps Lock key, you can re-map them to function as a different key by using a registry hack. But there should be an easier way, right?

This is where SharpKeys comes into the picture: It’s a small utility that will let you easily map one key to another key easily, or even turn the key off, without having to enter the registry at all.

For instance, I used the key mapping to just turn off my Caps Lock key, since I never use it.

image

You can click the Add button to bring up the Add New Key Mapping dialog, where you can either select the keys to map from the lists, or just click the Type Key button and press the key manually (which I find much more intuitive)

Once you are done, click the Write to Registry button and you’ll be told to log off or reboot for the changes to take effect.

If you want all the technical details on how the registry keys work, you can read about how to map keys using registry hacks.

Download SharpKeys from Randyrants

설정

트랙백

댓글

설정

트랙백

댓글

웹 폰트 web font

JS HTML PHP 2011. 11. 21. 17:02
http://fontface.kr/

 

<head> 사이에
 
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load( "webfont", "1" );
 google.setOnLoadCallback(function() {
  WebFont.load({ custom: {
   families: [ "NanumGothic" ],
   urls: [ "http://fontface.kr/NanumGothic/css" ]
  }});
 });
</script>

css
.wf-active body {
 font-family: 'NanumGothic';
}

예제

<html>
 <head>
  <style>
   .wf-active body {
    font-family: 'NanumGothic';
    font-size: 48px;
   }
  </style>
  <script src="http://www.google.com/jsapi"></script>
  <script>
   google.load( "webfont", "1" );
   google.setOnLoadCallback(function() {
    WebFont.load({ custom: {
     families: [ "NanumGothic" ],
     urls: [ "http://fontface.kr/NanumGothic/css" ]
    }});
   });
  </script>
 </head>
 <body>
  <h1>fontface.kr의 한글 폰트를 이용한 페이지</h1>
 </body>
</html> 

'JS HTML PHP' 카테고리의 다른 글

DOM Event  (0) 2011.12.13
DOM 기초  (0) 2011.12.12
이벤트 리스너같이 사용하는 PHP클래스  (0) 2011.11.13
PHP 객체 생성자와 객체 파괴자  (0) 2011.11.13
로그인 Text area에 내용입력등의 기본 글자 넣기  (0) 2011.11.10

설정

트랙백

댓글


리눅스 디렉토리 구조 훔쳐보기

우선 리눅스 디렉토리의 구조를 대강 살펴보자.

/
최상위 디렉토리(root directory). M모사의 제품처럼 드라이브라는 개념이 리눅스에서는 존재치 않으며, 모든 디렉토리는 최상위 디렉토리를 기준으로 위치된다.

/bin
대부분의 중요한 실행 파일들이 담겨 있다.

/boot
시스템 부팅에 관련된 파일들이 담겨 있다.

/dev
디바이스 파일들이 담겨 있다.

/etc
시스템 설정 상태를 담고 있는 파일들이 담겨 있다.

/home
일반 계정 사용자들의 홈 디렉토리를 담고 있다.

/lib
공유 라이브러리 파일들이 담겨 있다.

/mnt
다른 장치들을 마운트하는 디렉토리

/proc
프로세스 정보를 담고 있는 파일들이 담겨 있다.

/root
root의 홈 디렉토리.

/sbin
root가 시스템 운영을 위해 필요한 실행 파일을 담고 있다.

/tmp
임시 디렉토리

/usr
사용자들을 위한 대부분의 프로그램들과 설정 파일들이 담겨 있다.

/var
로그 파일 등의 시스템 관리와 관련된 정보들이 저장되는 디렉토리.

 

4. 리눅스 파일/디렉토리 구조 파헤치기
4.1 /bin
4.2 /boot
4.3 /dev
4.4 /etc
4.5 /home
4.6 /lib
4.7 /mnt
4.8 /proc
4.9 /root
4.10 /sbin
4.11 /tmp
4.12 /usr
4.13 /var

4. 리눅스 파일/디렉토리 구조 파헤치기
대강 리눅스 디렉토리 구조를 알아봤으니, 더 심층적으로 알아보자.

4.1 /bin
/bin에는 필수적인 실행 명령어들이 모여 있다. 대부분이 모든 사용자가 실행 가능한 것들이며 우리가 쓰는 거의 모든 기본 명령어들이 담겨 있다. 예를 들어 cat, chmod, chown, cp, date, echo, kill, ln, ls, mkdir, more, mount, mv, ps, pwd, rm, sh, su, vi 등등등...

4.2 /boot
말 그대로 시스템 부팅에 관련된 모든 파일을 담고 있다. 단, lilo(LInux LOader)의 설정 파일은 /etc/lilo.conf 에 있으며, lilo 자체는 명령어로서 /sbin/lilo에 위치하고 있다. 특히 커널 이미지인 vmlinuz 가 위치하고 있는데, lilo 가 아닌 다른 부트로더 프로그램들 모두가 공통적으로 vmlinuz 를 이용해 시스템을 부팅하므로 이 디렉토리가 매우 중요하다고 할 수 있다. 이 디렉토리의 파일들은 직접 편집할 수 없으며 커널 컴파일 등의 과정으로부터 생성된다.

4.3 /dev
각종 디바이스 파일들이 위치해 있는데 크게 블록 디바이스와 캐릭터 디바이스로 나뉠 수 있다. 블록 디바이스란 HDD와 같은 주변 장치를 말하는데, 데이타가 블록 단위로 읽고 쓰여지며 랜덤하게 액세스할 수 있다. 반면 캐릭터 디바이스는 입출력이 한 바이트 단위로 이루어지며 데이터가 순차적으로 읽고 쓰여진다. 디바이스를 새로 만들 때에는 mknod 명령을 이용하면 되며, 물론 /bin 에 위치해 있다. mount를 할 때에 필요한 디바이스 몇 개만 소개한다.

플로피 디스크 디바이스
/dev/fd0

첫 번째 FDD의 디바이스로 두 번째의 경우는 0 대신 1을, 세 번째의 경우는 2를 써주면 된다.

IDE 하드 디스크 디바이스
/dev/hda or /dev/hda1

마지막 부분의 hda에서 'a'는 위치를 나타내는 것으로, 'a'는 primary master, 'b'는 primary slave, 'c'는 secondary master, 'd'는 secondary slave를 의미한다. 그리고 그 뒤에 숫자가 없을 경우에는 전체를 의미한다. 숫자를 달 경우에는 파티션을 의미한다.

SCSI 하드 디스크 디바이스
/dev/sda, /dev/sda1

IDE 하드 디스크 디바이스와 같으나 'h' 대신 's'를 쓴다.

하드웨어 관련 디바이스
/dev/cdrom

CD-ROM 디바이스이다.

4.4 /etc
시스템 설정 파일들이 모여 있다. 그런 만큼 시스템을 백업하고자 할 때는 꼭 이 디렉토리를 가장 먼저 백업해야 한다. 각 파일들에 대한 설명은 에디터로 파일을 열어보면 주석처리로 설명이 되어 있으므로, 참고하면 될 것이다.

/etc/(cshrc.login, cshrc.cshrc, profile)

bash 나 csh,tcsh 사용자가 로그인할 때 기본으로 읽어들여 초기화시키는 파일이다. 그러므로 모든 사용자에게 공통으로 적용할 쉘 관련 사항이 있다면 이 파일들을 수정하면 된다. 각 사용자들은 자신의 홈 디렉토리에 개별 설정 파일이 있으므로 역시 원하는 대로 설정할 수 있다.

/etc/fstab

시스템 부팅시 처리되는 마운트와 관련한 사항들이 기록되어 있다.

--------------------------------------------------------------------------------

 
/dev/hda1               /                       ext2    defaults        1 1
/dev/hdb5               /home                   ext2    defaults        1 2
/dev/hdb2               /public                 ext2    defaults        1 2
/dev/hda2               /public2                ext2    defaults        1 2
/dev/hdb6               /sysbackup              ext2    defaults        1 2
/dev/hdb3               swap                    swap    defaults        0 0
/dev/fd0                /mnt/floppy             ext2    owner,noauto    0 0
/dev/cdrom              /mnt/cdrom              iso9660 owner,noauto,ro 0 0
none                    /proc                   proc    defaults        0 0
none                    /dev/pts                devpts  gid=5,mode=620  0 0


--------------------------------------------------------------------------------

첫 번째 항목은 마운트될 디바이스가 적혀 있다. 디바이스 이름은 이미 보고 넘어갔으니 모르는 사람은 없겠죠? 두 번째 항목은 마운트시킬 마운트 포인트가 적혀 있다. 세 번째 항목은 해당 디바이스의 파일 시스템 타입이 적혀 있다. ext2는 리눅스에서 사용하는 파일 시스템이며, msdos와 vfat는 각각msdos와 windows에서 사용하는 파일 시스템이고, iso9660은 CD-ROM에서 지원되는 파일 시스템이다. 자세한 것은 mount를 참고하자.

/etc/group

사용자 그룹이 정의되어 있으며, 다음과 같은 형식으로 쓰여져 있다.

--------------------------------------------------------------------------------

Group Name:Password:GID:Member

--------------------------------------------------------------------------------

/etc/issue

시스템에 로그인할 때 나타나는 'login:' 위에 나타나는 메시지이다. 만약 로그인할 때 나타나는 메시지를 바꾸고 싶으면 /etc/rc.d/rc.local 파일의 맨 아래 부분에 #로 시작되는 주석을 참고하자.

/etc/motd

'message of the day'의 약자로 로그인 직후의 메세지를 담고 있다. 관리자가 공지를 띄우는 데 유용한 파일.

/etc/passwd

사용자들의 계정 정보와 패스워드, 홈 디렉토리에 대한 정보를 담고 있으며 다음과 같은 형식으로 쓰여져 있다.


--------------------------------------------------------------------------------

user ID:passwd(암호화상태):UID:GID:사용자 정보:홈디렉토리:로그인쉘

--------------------------------------------------------------------------------


/etc/shadow

쉐도우 패스워드 파일

4.5 /home
사용자들의 모든 홈 디렉토리가 담겨 있다.

4.6 /lib
공유 라이브러리와 커널 모듈들이 담겨있다. 이전에 짚고 넘어간 /bin과 /sbin디렉토리에 있는 실행 명령어들이 실행될 때 필요한 공유 라이브러리들이 존재한다.

4.7 /mnt
마운트 포인트 디렉토리로써 꼭 여기에만 마운트해야 하는 것은 아니다. 하지만 일부러 만들어 놓인 곳이니 이곳을 쓰자^^;

4.8 /proc
일종의 가상 파일 시스템으로 메모리 정보만을 담고 있다. 우리가 흔히 사용하는 ps 프로그램이 여기에서 프로세스 정보 등을 참조한다.

4.9 /root
root(수퍼 유저)의 홈 디렉토리. 뭐 그게 끝이지 뭐...^^;

4.10 /sbin
수퍼 유저가 사용하는 실행 명령어들이 거의 다 들어 있다. 그러므로 물론 일반 유저는 사용할 수 없다. 예를 들어 halt, reboot, fdisk, mkfs등이 있다.

4.11 /tmp
임시 디렉토리이다. 그러므로 임시 파일들의 간이 저장 창고 역할을 한다.

4.12 /usr
/usr 은 리눅스 시스템에서 가장 많은 용량을 차지하는 부분으로 대부분의 프로그램들이 여기에 깔린다.

/usr/X11R6
/usr/X11, /usr/X386 이 모두 /usr/X11R6 의 심볼릭 링크이다. /usr/X11R6/lib/X11 에는 X-윈도와 관련한 여러가지 파일 및 디렉토리가 있다.

/usr/bin
/bin 에서 짐작되듯이, 대부분의 사용자 실행 명령어들이 담겨 있다. gcc나 perl등의 개발도구도 여기에 담겨 있다.

/usr/doc
역시 doc에서 유추할 수 있듯이 각종 리눅스에 관한 문서들이 담겨 있다. 책 사는 데 돈이 아까우신 분들은 이 디렉토리를 이용하면 좋을 것이다. 하지만 과연 그럴까?^^; 최신버젼의 문서를 보길 원한다면 kldp.org(Korea Linux Documentation Project)를 방문하면 많은 도움이 될 것이다.

/usr/include
C, C++ 프로그램의 헤더 파일들이 담겨 있다.

/usr/info
여기에는 여러가지 GNU 프로그램들(gcc, make, autoconf...)의 info 파일들이 담겨 있다. 이 디렉토리를 이용하는 방법은 단순히 'info 프로그램 - ex) info gcc -'라고 치면 된다. 상당히 유용하므로 기본적으로 알아두자.

/usr/local
새로운 프로그램들이 설치되는 곳으로 프로그램 관리를 용이하게 할 수 있도록 되어 있다. make install로 프로그램 설치시 기본 디렉토리가 대부분 /usr/local 로 되어 있는 이유가 바로 그것이다. M모사의 '창문들'이라는 OS에 있는 'Program Files'라는 디렉토리와 유사하다고 보면 된다.

/usr/man
info 와 비슷한 역할을 한다. 메뉴얼 페이지가 담겨 있는 것으로 역시 'man 프로그램'을 쳐서 이용할 수 있다. 모르는 명령어들은 꼭 한 번씩 man으로 확인하는 습관을 갖길...

/usr/src
프로그램 소스들이 보관되어 있는 것으로 리눅스 커널이 위치하고 있는 곳이다.

4.13 /var
이 디렉토리 아래에는 시스템 작동 중 변경되는 파일들이 담겨 있다. 로그 파일이나 스풀 파일들이 그것들인데, 즉 다른 시스템과 공유가 되지 않음을 의미한다.

 

설정

트랙백

댓글


http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=71516&sca=%BE%CB%B0%ED%B8%AE%C1%F2



게시판을 만들면서 어떻게 하면 로그인폼을 처리하는 Class와 분리시킬 수 있을까 고민했습니다.
결국 이벤트프로그램의 addEventListener에서 힌트를 얻어 비슷하게 처리할 수 있도록 만들어 봤습니다.
하다보니 로그인폼 처리 Class 뿐만 아니라 Class들의 강한결합상태를 약화시킬 수 있을것도 같네요.

  1 <?php 
  2 class MyObject{ 
  3
  4 private $starr = array();
  5
  6 public function __construct(){} 
  7
  8 //메쏘드 또는 함수 등록
  9 public function addStateListener($state, $method, $object=null){ 
 10 $idx = count($this->starr);
 11 $this->starr['state'][$idx] = $state;
 12 $this->starr['object'][$idx] = $object;
 13 $this->starr['method'][$idx] = $method;
 14 } 
 15
 16 //콜백 실행
 17 protected function executeState($state/*,...*/){ 
 18
 19 $args = func_get_args();
 20 array_shift($args); //첫번째 인자인 state는 args에서 제외시킨다
 21
 22 if(($idx = array_search($state, $this->starr['state'])) < 0) return;
 23
 24 if(is_object($this->starr['object'][$idx])){ //콜백이 오브젝트이면 (오브젝트 우선)
 25 call_user_method_array($this->starr['method'][$idx], $this->starr['object'][$idx], $args);
 26 }else{ //콜백이 함수이면
 27 call_user_func_array($this->starr['method'][$idx], $args);
 28 } 
 29 } 
 30
 31 public function __destruct(){} 
 32 } 
 33
 34
 35 //====================================================
 36 // 예제 1 함수를 호출
 37 //====================================================
 38 class Board extends MyObject{ 
 39
 40 private $is_login = false; //예를 위해서 강제로 로그아웃 상태로 만듬
 41
 42 function write(){ 
 43 if(!$this->is_login){ 
 44 $this->executeState('needlogin', '게시판에 쓸려면 가입해라!');
 45 }else{ 
 46 echo "글을 씁시다";
 47 } 
 48 } 
 49 } 
 50
 51 function showMessage($str){ 
 52 echo "<script>alert('".$str."');</script>";
 53 exit;
 54 } 
 55
 56 $b = new Board();
 57 $b->addStateListener('needlogin', 'showMessage');  //콜백 함수를 등록한다
 58
 59 //자 글을 등록해보자
 60 $b->write();
 61
 62
 63
 64 //====================================================
 65 // 예제 2 클래스의 메쏘드를 호출
 66 //====================================================
 67 class Board extends MyObject{ 
 68
 69 private $is_login = false; //예를 위해서 강제로 로그아웃 상태로 만듬
 70
 71 function write(){ 
 72 if(!$this->is_login){ 
 73 $this->executeState('needlogin');
 74 }else{ 
 75 echo "글을 씁시다";
 76 } 
 77 } 
 78 } 
 79
 80 //로그인 폼 처리 클래스
 81 class LoginProcess{ 
 82
 83 //귀찮아서 html 그냥 씁니다.
 84 public function showbox(){ 
 85 echo <<< HEREDOC
 86 <table border=1> 
 87 <tr> 
 88 <td>아 이 디 : <input type="text" name="mb_id"></td> 
 89 </tr> 
 90 <tr> 
 91 <td>비밀번호 : <input type="password" name="mb_pw"></td> 
 92 </tr> 
 93 <tr> 
 94 <td><input type="submit" value="로그인"></td> 
 95 </tr> 
 96 </table> 
 97 HEREDOC;
 98 } 
 99 } 
100
101 $b = new Board();
102 $l = new LoginProcess();
103 $b->addStateListener('needlogin', 'showbox', $l);
104
105 //자 글을 등록해보자
106 $b->write();
107 ?> 


'JS HTML PHP' 카테고리의 다른 글

DOM 기초  (0) 2011.12.12
웹 폰트 web font  (0) 2011.11.21
PHP 객체 생성자와 객체 파괴자  (0) 2011.11.13
로그인 Text area에 내용입력등의 기본 글자 넣기  (0) 2011.11.10
HTML 풍선 도움말, 줄바꿈 효과  (0) 2011.11.10

설정

트랙백

댓글

http://dalmasian.tistory.com/entry/PHP-%EA%B0%9D%EC%B2%B4-%EC%83%9D%EC%84%B1%EC%9E%90%EC%99%80-%EA%B0%9D%EC%B2%B4-%ED%8C%8C%EA%B4%B4%EC%9E%90



PHP 5 는 개발자로 하여름 클래스를 위해 생성자 메소드를 선언할 수 있게 한다. 생성자 메소드를 가진 클래스들은 새롭게 생성된 객체에서 이 메소드를 초기화 하는데 적당하게 호출해서 객체가 사용되기 전에 필요로 하지 않게 할 것이다.

PHP 4 에서 생성자 메소드는 클래스 자신의 이름과 같은 이름을 가진 클래스 메소드였다. 파생된 클래스로부터 부모 생성자를 호출하는 것이 매우 일반적일 때, PHP 4는 거대한 클래스 계층 주변으로 클래스를 옮기는 성가신 부분을 만들어내는 방법을 택해 작업했다. 만약 클래스가 다른 부모클래스 아래로 귀속하기 위해 옮겨졌을 때, 부모클래스 생성자의 잘 바뀌는 이름과 부모클래스 생성자를 호출하는 파생된 클래스의 코드는 수정될 것이다.

PHP 5 는 __construct()라는 이름으로 불리우는 생성자 메소드를 선언하는 표준방법을 도입하였다. 


Example B-12. using new unified constructors

<?php
class BaseClass
{
   function
__construct
() {
       print
"In BaseClass constructor\n"
;
   }
}

class
SubClass extends BaseClass
{
   function
__construct
() {
      
parent::__construct
();
       print
"In SubClass constructor\n"
;
   }
}

$obj = new BaseClass
();
$obj = new SubClass
();
?>

 

이전 버전과의 호환성을 위해 만약 PHP 5 가 주어진 클래스를 위한 __construct() 함수를 찾지 못한다면 클래스의 이름으로 이루어진 이전 방식의 생성자 함수를 찾을 것이다.

효과적으로 이것은 클래스가 __construct() 라는 이름을 가진 메소드를 가진 경우 이것이 다른 의미론을 위해 쓰일것이라는 의미를 가지고 있는데 호환성 문제를 가진 경우에 한해서만 해당한다.

Destructors

객체를 위해 파괴자를 정의하는 능력을 소유하는 것은 매우 유용할 수 있다. 파괴자는 디버깅을 위해, 데이터베이스의 연결을 끊을 때,기타 다른 여러가지 일을 마무리할 때 로그 메세지를 남길 수 있다. PHP 4에선느 객체 파괴자를 위한 기술이 존재하지 않았지만, PHP가 셧다운을 요청하는 도중에 실행될 등록함수를 위해 이미 지원했다. 

PHP 5 는 자바와 같은 다른 객체지향언어에서와 유사한 개념을 가진 파괴자를 도입하였다. : 객체의 파괴자를 파괴한 객체가 최종적으로 참조되었을때,  어떤 파라미터 값도 받지 않는 __destruct() 라고 이름 붙여진 클래스 메소드는 메모리에서 객체가 해제되기 전에 호출된다.

Example B-13. Destructor

<?php
class MyDestructableClass
{
   function
__construct
() {
       print
"In constructor\n"
;
      
$this->name = "MyDestructableClass"
;
   }

   function
__destruct
() {
       print
"Destroying " . $this->name . "\n"
;
   }
}

$obj = new MyDestructableClass
();
?>

생성자와 같이 부모클래스의 파괴자는 엔진에 의해 명시적으로 호출되지는 않을 것이다. 부모클래스의 파괴자를 실행하기 위해 파생된 클래스에서는 명확하게 파괴자 본문에 parent::__destruct() 를 적어 호출하여야 한다.



%참고% 범위지정연산자  ::

범위지정 연산자(::)는 $this 대신사용할수 있는 연산자 이다
객체에 속한 맴버나 메서드에 접근을 할때 사용할수 있고 클래스를 객체로 생성하지 않고도 접근할수도 있다
그리고 클래스 상수에 접근할때에도 사용된다

더 자세한 내용은 다음에 강좌를 하겠다

self 는 자신이 속한 클래스, parent 는 부모클래스를 의미한다
self 와 parent 는 클래스 내부에서 맴버나 메서드에 접근할때 사용된다




 1
//예제) 범위지정연산자를 이용한 부모(상위)클래스에서 정의한 생성자 함수 호출
 2 <? 
 3 class Parents { 
 4
 5   // 클래스의 생성자 함수
 6   public function __construct(){  echo "부모(상위)클래스에서 정의한 생성자 함수 호출"; } 
 7
 8 } 
 9
10 class Child extends Parents { 
11   
12   // 클래스의 생성자 함수
13   public function __construct(){  
14     
15     // 부모(상위)클래스에서 정의한 생성자 함수 호출
16     parent::__construct();
17
18   } 
19   
20 } 
21
22 // 출력 : 부모(상위)클래스에서 정의한 생성자 함수 호출
23 $Obj_Child = new Child();
24
25 //위 예제는 부모클래스에서 정의한 생성자 함수를 호출해야 하므로 parent:: 를 사용했다
26
27 ?>

설정

트랙백

댓글


http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=67473894&qb=dGV4dGFyZWEg7JeQIOq4gCDrhKPquLA=&enc=utf8&section=kin&rank=2&search_sort=0&spq=0&pid=grrKVU5Y7tVssbQdo8sssc--389495&sid=Trl04fJDuU4AAH01HAs

1. 클릭하면 지우기

<textarea cols=40 rows=5 onclick="this.value=''">내용을 입력하세요</textarea>

 2. 클릭했을때 사용자가 입력한 문장이면 지우지 않기

<textarea cols=40 rows=5 onclick="if(this.value=='내용을 입력하세요'){this.value=''}">내용을 입력하세요</textarea>

설정

트랙백

댓글


http://www.itdi.co.kr/onuri/bbs/board.php?bo_table=03_1&wr_id=25

여러 TAG에 풍선도움말 효과 주기 소스 
 
글쓴이 : 정민구 날짜 : 09-04-06 19:27 조회 : 2146  
 <font size=2 title="풍선 도움말">일반 글씨에도 풍선 도움말이 가능해요</font>
 <b title="풍선 도움말">진하기 속성도 가능해요!</b>
 <i title="풍선 도움말">이탤릭 속성도 가능해요!</i>
 <u title="풍선 도움말">밑줄 속성도 가능해요!</u>
 <input type="text" value="텍스트 박스도 가능해요" title="풍선도움말">
 <input type="button" value="기타 다른 폼도 가능해요" title="풍선도움말">
 <p title="풍선 도움말">패러그래프도 되나요?</p>
 <ul><li title="풍선 도움말">리스트는요?</li></ul>


[출처] IT.DevInfo ∽ 힘든 IT개발자들의 즐거운 공유(ITDI.co.kr) - http://www.itdi.co.kr/onuri/bbs/board.php?bo_table=03_1&wr_id=25

 

풍선도움말에 줄바꿈 효과 주기 
 
글쓴이 : 정민구 날짜 : 09-04-06 19:30 조회 : 1807  
<img src="/images/test.gif" alt="설명1&anp;#13;설명2&anp;#13;설명3">
[이 게시물은 사랑니님에 의해 2009-08-02 15:52:26 기타에서 이동 됨]
[출처] IT.DevInfo ∽ 힘든 IT개발자들의 즐거운 공유(ITDI.co.kr) - http://www.itdi.co.kr/onuri/bbs/board.php?bo_table=03_1&wr_id=3

 

설정

트랙백

댓글





인터넷으로 홈페이지를 접속하면, 기본적으로 홈 디렉토리 내의 Index.html 파일을 보여주게 됩니다.
아파치 설정 파일(httpd.conf) 파일에 아래와 같이 DirectoryIndex 설정이 아래와 같이 되어 있기 때문입니다.
아래와 같이 설정이 되어 있는 경우, 도메인으로 접속시에 홈 디렉토리내의 Index.html 파일을 출력하며, Index.html 파일이 존재하지 않는 경우 index.htm -> index.php의 순서로 찾아서 출력하게 됩니다. 만약 홈 디렉토리내의 main.html파일로 홈페이지가 뜨게 하려면, 아래의 DirectoryIndex 부분을 main.html 로 변경하면 되겠죠.??  ^^

<IfModule dir_module>
   DirectoryIndex index.html index.htm index.php
</IfModule>

웹브라우저에서 디렉토리 리스트가 보이게 되는 경우는 아래와 같이 가상호스트 디렉토리의 Options 부분에 Indexes 설정이 되어 있는 경우에 홈 디렉토리의 리스트가 출력되게 됩니다.
단, 모든 경우에 디렉토리의 리스트가 출력되는것이 아니라, 위의 DirectoryIndex 부분에 설정된 index.html index.htm index.php 파일이 모두 존재 하지 않을때에만, 디렉토리 리스트가 출력되게 됩니다.

<Directory "/home/*/public_html">
~
   Options Indexes FollowSymLinks
~
</Directory>

index 파일이 없을때 디렉토리 리스트가 뜨지않고 에러페이지를 출력하게 하려면, 아래와 같이 Options 부분의 Indexes를 삭제하고 아파치 데몬을 리스타트 하면 됩니다.

<Directory "/home/*/public_html">
~
   Options FollowSymLinks
~
</Directory>

Apache 보안

장마가 끝나고 무더위가 우리들을 괴롭히는 시기가 도래했습니다. 보안 관리자 여러분, 이 무더위에 속에서 짜증내지 마시고 에어컨 앞에서 시원한 얼음과자 드시면서 더위를 달래 보시기 바랍니다.
매달 연이은 기사 원고 청탁(?)에 이젠 자원이 고갈이 나고 있는 상태입니다만 제가 알고 있는 또는 가지고 있는 자료에서 뽑은 짤막한 Apache 설정 보안 팁을 여러분을 위해 풀어 놓겠습니다.

1. ServerToken 설정 변경에 따른 Apache 버전 head 정보
ServerToken 설정에는 다음과 같은 옵션이 있습니다.
[Full | OS | Minor | Minimal | Major | Prod]

각 옵션 별 어떻게 표시가 되는지 알아 보도록 하겠습니다.
- Full
Server: Apache/2.0.54 (Unix)
- OS
Server: Apache/2.0.54 (Unix)
- Minor
Server: Apache/2.0
- Mnimal
Server: Apache/2.0.54
- Major
Server: Apache/2
- Prod
Server: Apache

보안상 더 좋은 방법은 소스를 수정해서 정보를 아예 유출되지 않도록 하는 것이 더 좋겠습니다. 하지만, 대부분 관리자들은 RPM으로 설치를 하시는 경우가 많기 때문에 소스 수정에 대한 부분은 언급하지 않겠습니다.

2. 특정 디렉토리 접근 제한
이전 기사에 관리자 웹 페이지 접근 방법에 대하여 짧게 설명한 적이 있습니다. 포트를 달리하고 방화벽에서 특정 사용자만이 접근하도록 설정하는 것이 좋다고 여러분에게 이야기 하였습니다. 그런데, 방화벽이 없다면 어찌해야 좋은가? 그 방법이 아래 예시가 되겠습니다.
물론, 이 방법 또한 일반 웹 페이지에 의해서 침해 사고를 당했을 경우엔 무용지물이 되겠습니다. 그러나, 그냥 내버려 두는 것 보다는 더 안전하다는 것입니다.

[예]
<- 제한 할 디렉토리 기재
    SetHandler test <- 제한 할 디렉토리 기재(/는 빼야 함)
    Order deny,allow
    Deny from all
    Allow from 192.168.100.15 <- 접근 할 IP 기재

3. 디렉토리 인덱싱 없애기
의외로 많은 웹 사이트가 디렉토리 인덱싱을 사용하고 있습니다. 전월 기사에서 알려 드린 방법으로 찾아 보셨으면 많은 웹 사이트가 디렉토리 인덱싱을 사용하고 있다는 것을 알아 차렸을 것입니다. 디렉토리 인덱싱을 사용하게 되면 웹 사이트 구조를 알게 되고 중요 파일에 대한 정보를 유출 시킬 수 있으므로 사용이 불필요하다면 반드시 디렉토리 인덱싱 사용을 중지 하시기 바랍니다.

 Options Indexes, …  Indexes 삭제
 …
/Directory>

 

 

지난달에 이어 짤막한 apache 설정에 대한 보안 팁을 제공하도록 하겠습니다. 여러분에 많은 도움이 되길 바라지는 않지만 조금이나마 도움이 되었으면 합니다.

1. 심볼릭 링크
심볼릭 링크를 이용하여 기존의 웹 문서 외에 다른 파일 시스템에 접근 가능합니다. 편리성을 제공하기는 하지만 심각한 보안 문제를 야기 시킬 수 있습니다. 예를 들어 /etc/ 디렉토리를 링크를 걸어 놓았다면 /etc/passwd 파일의 사용자 계정 정보를 획득 할 수 있습니다.
“Options”지시어에서 심볼릭 링크를 가능하게 하는 옵션인 “FollowSymLinks’를 제거하면 막을 수 있습니다.

< Directory / >
    Options FollowSymLinks  ← 제거
    AllowOverride None
< / Directory >


2. SSI(Server Side Includes)
SSI는 보안상 몇 가지 잠재적인 보안위험이 있습니다. 서버의 부하를 늘리며 일반적인 CGI 스크립트와 동일한 위험을 가집니다. SSI 파일에서 “exec 층”를 사용하면 httpd.conf에서 아파치를 실행하도록 설정한 사용자와 그룹 권한으로 CGI 스크립트나 프로그램을 실행할 수 있습니다.
SSI페이지가 스크립트나 프로그램을 실행하지 못하도록 하기 위하여 “Options” 지시어에서 “Includes” 대신 “IncludesNOEXEC”를 사용하면 됩니다.

< Directory / >
    Options IncludesNOEXEC  ← 추가
    AllowOverride None
< / Directory>


3. Apache와 Tomcat 연동
Apache와 Tomcat이 root를 공유하게 디면 WEB-INF/web.xml와 WEB-INF/classes 아래에 있는 java 파일과 class파일이 노출될 위험이 있으며 파일명만 알아내면 소스 파일을 가져갈 수 있습니다. 따라서, 이를 방지하기 위해서는 apache의 httpd.conf에 다음과 같이 추가 해주어야 합니다.

< Location /WEB-INF >
    SetHandler WEB-INF
Order deny,allow
    Deny from all
< / Location >

이제 선선한 바람이 불어오는 가을입니다. 덥지 않아서 좋기는 하지만 감기 걸리기에 그만인 날씨죠. 여러분 모두 감기 조심하세요.




Robot.txt


로봇이 http://kw1993.egloos.com/ 과 같은 웹 싸이트를 방문하면, 먼저 http://kw1993.egloos.com/robots.txt 파일을 호출한다.
robot.txt 파일이 발견되면 파일을 읽어 그 내용을 분석한다.
로봇에 접근 권한 및 접근 가능한 경로에 대한 정보로 자신이 수집해도 되는 콘텐트만을 수집 하게 된다.

한 사이트에는 하나의 "robots.txt" 를 루트에 가질 수 있다.
로봇은 하위 디렉토리에서 이 파일을 검색하지 않는 것을 원칙으로 한다.
이 때문에 robots.txt 파일은 꼭 웹사이트의 루트에 생성해야 한다.

uri는 대소문자 구별하고, "robots.txt" 파일이름은 모두 소문자로 작성해야 하며. 파일명에 공백은 허용되지 않는다.

robot.txt 파일에 아래와 같이 되어있다면 해당 url에 대하여 모든 로봇에 대해 모든 경로에 접근을 차단한다는 내용이다.

user-agent: * # 모든 로봇(robot)들에 적용
disallow: / # 모든 페이지들의 색인(indexing) 금지


user-agent : 접근을 허용하지 않을 로봇을 설정 한다.
disallow : 허용하지 않을"disallow"를 빈 값으로 설정 할 경우, 모든 하위 경로에 대한 접근이 가능하다.
robots.txt 화일에는 최소한 한개의 "disallow" 필드(field)가 존재해야 한다.

disallow: /help          # /help.html과 /help/index.html 둘 다 허용 안함
disallow: /help/    # /help/index.html는 허용 안하나, /help.html은 허용 됨.


페이지 차단하기
특정 파일 확장자를 차단 하는 방법은 robot.txt 파일에 아래와 같은 내용을 추가 하면된다.

Disallow: /*.xml$      # 루트 하위에 있는 xml 확장자를 가진 모든 파일의 색인을 거부한다.
Disallow: /test.html?  # 루트에 text.html 과 ?가 포함된 파일의 색인을 거부한다.


항목에 대해 설정 한다.



기본적인 사항들은 많은 카페/블로그에서 더 상세한 정보를 제공하고 있는 것 같습니다. XGI 카페에서 다루는 내용은 XGI 및 홈페이지 제작으로 차별화하고 기타 내용은 기본적인 사항만 간단하게 언급하고 지나가도록 하겠습니다.
주로 웹호스팅을 사용하고 있기 때문에 리눅스에서 기본적으로 사용하는 웹서버인 아파치를 설정하실 일이 없을 것 입니다. 하지만 필요하신 분들도 있을 것이고 기본적으로 어떤 설정에 의하여 웹서버가 구동되는지 기본적인 것이나마 알아 두시면 도움이 될 것 같습니다.
좀더 자세한 것은 검색해 보시면 너무나 많은 자료가 있음을 아실 것입니다. 참고 하시고요.
아래 자료는 [펌]자료입니다.

출처는 모르겠네요.  처음 자료를 쓰신 분께 감사

HOW-TO Configuration httpd.conf(apache)

ServerType   Standalone

# 서버 타입을 설정하는 지시자 이다.

# ServerType 에서 설정할 수 있는 것은 Standalone 과 inetd 두가지 설정이 있다.

※ 윈도우 환경에서는 standalone type만 지원이 됩니다.

 

▶ inetd Type

클라이언트의 요청이 있을 때 마다 httpd가 구동되어 클라이언트의 요청을 처리한 후 종료하는 방법이죠... 이런 동작 방식은 느리지만 접속이 적은 사이트라면 서버의 자원 사용을 최소화 합니다.

 

▶ standalone

기본 설정으로 몇개의 httpd를 미리 가동시켜서 사용자의 요청을 기다리죠... 때문에 많은 클라이언트가 빈번하게 요청하는 경우 빠르게 요구를 처리할 수 있습니다.

 

ServerRoot  /usr/local/apache

# 아파치 서버의 루트 디렉토리를 설정한다.(아파치 서버가 설치된 디렉토리)

 

PidFile  /usr/local/apache/logs/httpd.pid

# 아파치가 실행될 때 생성되는 httpd.pid 파일이 생성될 경로를 지정한다.

PID는 Process ID로 리눅스상에서 사용되는 모든 프로그램은 고유의 ID번호를 가지고 있습니다.

아파치 종료시 PID파일을 참조하게 됩니다.

 

ScoreBoardFile  /usr/local/apache/logs/httpd.scoreboard

#부모 프로세스가 자식 프로세스와 의사 소통을 할 때 사용되는 지시자와 그 파일을 지정한다.

 

Timeout    300

# 클라이언트에서 요청이 들어오고 처리를 완료할 때까지의 시간을 설정합니다. 시간단위는 초입니다.

Timeout은 클라이언트에서 서버로 접속할 때 클라이언트나 서버의 통신장애로 인해 300초 동안 클라이언트에서 완벽한 처리를 하지 못할 때 클라이언트와의 연결을 해제한다.

 

KeepAlive  On

# 서버와의 지속적인 연결을 하도록 설정되어 있다. 즉 한번의 연결에 대해 한번의 요청만 처리하는 것이 아니라 또 다른  요청을 기다리게 된다. 하지만 지속적인 연결 시간은 KeepAliveTimeout 값에 설정한 만큼 유지된다. KeepAlive를 Off로 설정하게 되면 클라이언트로 부터 한번의 요청을 받은 후 바로 접속을 해제한다. 특별한 경우가 아니라면 On 상태로 유지하는 것이 좋다.

 

MaxKeepAliveRequests    100

# KeepAlive 상태에서 처리할 최대 요청 처리 건수를 설정한다.

# 보통의 웹 사이트에서는 설정값 100으로 충분하다.

 

KeepAliveTimeout   15

# KeepAlive 설정을 on으로 했을 경우에 아파치 서버가 얼마동안 클라이언트의 다음 요청을 기다리고 있는지 설정합니다. 초단위로 설정합니다.

 

MinSpareServers   5

# 아파치가 실행될 때 최소 예비 프로세스(httpd) 수를 설정한다. 이 값에 의해 현재 nobody 소유의 아파치 프로세스가 5보다  작을 경우 자동으로 부족한 만큼의 아파치 프로세스 생성한다.

# 8 정도 설정하는 것이 적당하다.

 

MaxSpareServers  10

# 아파치가 실행될 때 최대 예비 프로세스(httpd) 수를 설정한다. 이 값에 의해 현재 nobody 소유의 아파치 프로세스가 10보다 클 경우 불필요한 프로세스를 제거한다.

# 20 정도 설정하는 것이 적당하다.

 

StartServers   5

# 아파치가 실행될 때 생성 시키는 자식 프로세스 수이다.

하 지만 이 값이 MinSpareServers 값보다 작을 경우 아파치 실행 후에 바로 MinSpareServers 의 설정만큼 생성하기 때문에 아무런 의미가 없게 된다. StartServer 값과 MinSpareServers 값은 같은 값을 설정하는것이 바람직하다.

 

MaxClients   150

# 아파치 서버의 동시 접속자 수를 정의한다.

최대 값은 256이다. 

256 이상의 값을 설정하고 싶을 때는 아파치 소스의 httpd.h 헤어 파일의 HARD_SERVER_LIMIT 부분을 수정하고 아파치를 다시 컴파일 해야 된다.

 

MaxRequestsPerChild   0

# 아파치의 자식 프로세스가 처리할 수 있는 최대 요청 처리 건수를 설정한다.

0 은 무제한을 뜻한다.

 

Listen

서 버의 어떤 포트에서 클라이언트의 요청에 응답하는지를 설정합니다. Listen은 중복해서 사용할 수 있으며 이를 이용해서 Port Based Virtual Host를 지정할 수 있습니다. 또한 Listen지시자는 Port이외에도 IP주소나 IP주소와 포트에서의 사용자 요청에 응답하도록 설정할 수 있습니다.

 

Listen 80

Listen 8080

Listen 192.168.1.1:80

Listen 192.168.1.1:8080

 

BindAddress   *

# 가상 호스트를 지워한다. 기본적으로 주석 처리 되어 있지만 실제로는 가상 호스트에 영향을 주지 않았다.

 

Port     80

# 아파치가 사용할 기본 포트를 지정한다.

 

User   nobody

Group  nobody

# 자식 프로세스가 생성될 때 그 프로세스의 소유자와 소유그룹을 결정한다.

# 보안상 절대 root 로 설정하는 일은 없도록 한다.

 

ServerAdmin    yunisj@apmtip.com

# 아파치 서버 관리자 e-mail을 설정하는 부분이다.

 

ServerName    apmtip.com

# 아파치 서버가 작동중인 서버 이름을 설정한다. 기본적으로 주석 처리 되어 있다.

도메인이 아닌 IP 주소로 사용자의 홈페이지에 접속할 때 URL 끝에 /를 붙여야 접속이 되는 경우가 있는데 이럴 경우 ServerName 지시자에 주석을 제거 하고 아이피 주소를 설정해 주면 된다.

 

DocumentRoot    "/usr/local/apache/htdocs"

아파치의 웹 문서들의 루트 디렉토리를 지정한다.

 

아래 부터 디렉토리 제어이다.  Directory 구문에 대한 자세한 설명은 아래에 있다.

시스템 루트( / ) 디렉토리에 대한 제어

 

                                             

    Options FollowSymLinks                       

    AllowOverride None                                                                              

 

# /usr/local/apache/htdocs 디렉토리에 대한 제어

   

    Options Indexes FollowSymLinks MultiViews

    AllowOverride None

    Order allow,deny

    Allow from all

 

# 사용자 홈 디렉토리인 public_html 디렉토리에 대한 제어

 

   AllowOverride FileInfo AuthConfig Limit

   Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec

 

       Order allow,deny

       Allow from all

 

       Order deny,allow

       Deny from all

 

###################################################################

#                     디렉토리 제어와 관련된 설정과 옵션 설 명                                     #

###################################################################

디렉토리 제어문의 시작은 로 시작해서 로 끝난다.

 

# -->> Options(옵션) 설명 ;

옵션 구문은 Options 라는 키워드로 시작된다.

FollowSymLinks : 실볼릭 링크를 허용한다.

SymLinksIfOwnerMatch : 링크를 허용하지만 링크 하고자 하는 사용자의 소유로 되어 있는 것만 링크 가능하다.

ExecCGI : CGI 실행을 허용한다.

Includes : SSI를 허용한다.

IncludesNOEXEC : SSI를 허용하지만 "#exec" 와 "include"로 정의한 CGI 실행은 거부한다.

Indexes : 웹 서버의 디렉토리에 접근 했을 때 DirectoryIndex 지시자로 설정한 파일이 없을 경우 디렉토리안의 파일 목록을 보여준다.

MultiViews : 클라이언트의 요청에 따라 적절하게 페이지를 보여준다. 쉽게 생각하면 HTTP 헤드 정보가 Accept-Language:ko 라면 Korea 언어에 맞게 데이터를 클라이언트에 전송한다.

None : 모든 설정을 부정한다.

All : MultiViews를 제외한 옵션을 의미한다. 

 

# -->>AllowOverride 설명

AllowOverride는 클라이언트의 디렉토리 접근 제어에 관한 설정이다.

AllowOverride 는 AccessFileName 지시자와 밀접한 관계를 가지고 있다.

 

아래의 각 설정값들은 AccessFileName 지시자에서 설정한 파일에 적용된다.

None : AllowOverride를 off 한다는 것이다.

All : AccessFileName 지시자로 설정한 파일에 대해 민감하게 반응한다. 모든 지시자를 사용할 수 있다.

AuthConfig : AccessFileName 지시자에 명시한 파일에 대해서 사용자 인증 지시자 사용을 허락한다.

--> AuthDBMGroupFile, AuthDBMUserFile, AuthGroupFile, AuthName, AuthType, AuthUserFile, require등을 사용할 수 있다.

FileInfo : AccessFileName 지시자로 설정한 파일에 대해서 문서 유형을 제어하는 지시자 사용을 허락한다.

--> AddEncoding, AddLanguage, AddType, DefaultType, ErrorDocument, LanguagePriority등을 사용할 수 있다.

Indexes: AccessFileName 지시자로 설정한 파일에 대해서 디렉토리 Indexing을 제어하는 지시자 사용을 허락한다.

--> AddDescription, AddIcon, AddIconByEncoding, AddIconByType, DefaultIcon, DirectoryIndex, FancyIndexing, HeaderName, IndexIgnore, IndexOpions, ReadmeName등을 사용할 수 있다.

Limit : AccessFileName 지시자로 설정한 파일에 대해서 호스트 접근을 제어하는 지시자 사용을 허락한다.

--> Allow, Deny, order 등을 사용할 수 있다.

Options : AccessFileName 지시자에 명시한 파일에 대해서 Options 그리고 XBiHack 등과 같은 지시자 사용을 허락한다.

--> Options, XBitHack등을 사용할 수 있다.

 

AloowOverride와 AccessFileName에 설정한 파일을 이용해서 아파치 인증 기능을 사용할 수 있다.

아파치 인증에 관한 자세한 설명은 "http://rootman.co.kr의 아파치 인증" 강좌를 참고하길 바란다.

 

####################################################################

 

DirectoryIndex    index.html

# 파일 이름을 명시하지 않고 디렉토리에 접근할 경우 자동으로 보여줄 파일 이름을 설정한다.

# 여러개의 파일 이름을 설정할 수 있다. 파일 이름에 대한 구분은 Space 키,  즉 빈 공간으로 구분한다.

 

AccessFileName    .htaccess

# 특정 디렉토리의 접근 제어를 할 파일 이름을 정의한다.

# 단, 해당 디렉토리의 AllowOverride 에서 None으로 설정되어 있지 않아야 된다.

# 자세한 설명은 "아파치 인증" 강좌 참고

 

CacheNegotiatedDocs

# 프록시 서버에 문서를 캐시하도록 설정한다. 기본적으로 주석 처리 되어 있다.

 

HostnameLookup    Off

# 아파치의 로그 파일에는 기본적으로 클라이언트의 IP 주소 정보가 기록되는데 이 설정을 On 하면 호스트 네임(도메인)

# 이 기록된다. 하지만 DNS 질의를 해야 되므로 속도가 느리다는 단점이 있다.

# 그냥  Off로 사용하는것을 추천한다.

 

ErrorLog   /usr/local/apache/logs/error_log

# 아파치 서버 접속 에러 로그를 기록할 결로와 파일 이름을 설정한다.

 

LogLevel   warn

# 에러 로그 내용의 레벨을 설정한다.

 

LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined

LogFormat "%h %l %u %t \"%r\" %>s %b" common

LogFormat "%{Referer}i -> %U" referer

LogFormat "%{User-agent}i" agent 

# 사용자 접속을 기록할 로그 포멧을 정의한 부분이다. 위와 같이 4가지 형식의 로그 포멧이 기본적으로 설정되어 있다.

common : 가장 일반적인 로그 기록

referer : 현재 아파치 서버에 접속하기 전에 머물렀던 URL으 기록한다.

agent : 접속자의 웹 브라우저(OS 포함) 종류를 기록한다.

combined : 위의 3가지 로그 포멧을 모두 조합한 것이다.

           접속자에 대한 많은 정보를 기록하길 원한다면 combined으로 설정하면 된다.

# %h %I 등과 같은 아파치 로그 포멧을 알고 싶으면 아파치 메뉴얼를 참고 하기 바란다.

 

CustomLog    /usr/local/apache/logs/access_log common

# 로그 파일의 경로와 파일 이름,  그리고 로그의 포맷을 설정한다.

# common 이외에 위에서 정의한 로그 포멧을 지정할 수 있다.

 

ServerSignature  On

# apache 서버가 생성하는 Error 페이지와 Ftp 디렉토리 목록, mod_status, mod_info 등에 apache 서버 버젼과 가상 호스트

# 네임을 추가적으로 표시해 준다.(On 설정시)  Email 설정시 ServerAdmin의 E-mail 주소를 페이지에 링크해 준다.

# On, Off, Email을 설정해서 사용할 수 있다.

 

Alias  /icons/  "/usr/local/apache/icons/"

# 특정 디렉토리를 alias 한다. 위의 경우는 /usr/local/apache/icons/ 디렉토리를 icons 라는 이름으로 alias 한것이다

# icons 디렉토리 앞의 /(슬래쉬)는 DocumentRoot를 의미한다.

 

ScriptAlias  /cgi-bin/  "/usr/local/apache/cgi-bin/"

# Alias와 같은 형식이고 실행할 스크립트 디렉토리를 alias할 때 사용한다.

 

Redirect  old-URL  new-URL

# old-URL을 new-URL로 코딩해준다. 하지만 HTML태그로 위의 기능을 대신할 수 있기때문에 사용할 일이 거의 없을것이다.

 

IndexOptions Fancy Indexing

# 디렉토리에 DirectoryIndex에 설정된 파일명이 없을경우 아파치서버는 디렉토리목록을 보여주는데 Fancy Indexing을 설정할 경우 파일의 크기, 생성날짜 등을 같이 출력해준다.

 

DefaultIcon /icons/unknown.gif

# 아이콘이 설정되어 있지 않은 파일 확장자들의 아이콘을 대신한다

 

AddDescription "GZIP compressed document"  .gz

AddDescription "tar archive"  .tar

AddDescription "GZIP compressed tar archive" .tgz

# 아파치가 디렉토리 목록을 보여줄 경우 파일 확장자에 대해 간략한 설명을 할 수 있게 한다. 단, IndexOptions에서 FancyIndexing이 적용되어 있어야 된다.

 

ReadmeName README

HeaderName HEADER

# 아파치가 디렉토리가 목록을 보여줄 경우 페이지 위(HEADER)와 아래(README)에 추가로 출력할 텍스트들을 설정할 수 있다.

# 각 디렉토리에 README, HEADER 라는 이름으로 텍스트 파일을 만들면 된다.

 

ErrorDocument 500  "The server made a boo bo"

ErrorDocument 404  /missing.html

ErrorDocument 402  http://some.other_server.com/subscription_info.html

# 클라이언트의 요구에 의해 발생하는 아파치 서버의 에러페이지에 출력할 텍스트나 문서를 정의할 수 있다.

각 페이지는 에러 코드별로 설정할 수 있으며 외부의 URL을 지정할 수도 있다.

문자열을 설정을 경우네는 " "안에 문자열을 설정하면 되고 내부 html 문서를 지정해줄 경우에는 문서의 경로를 지정해 주면 된다. 단, (/)최상위 경로는 DocumentRoot를 의미한다.

 

 

   SetHandler server-status

   Order deny,allow

   Deny from all

   Allow from .your_domain.com

 

   SetHandler server-info

   Order deny,allow

   Deny from all

   Allow from .your_domain.com          

# 위의 설정을 함으로써 웹 브라우저에서 아파치 서버의 상태와 정보를 볼수 있다. 보안상 특정 호스트에서만 볼 수 있게 설정할 수 있으며 기본적으로 주석 처리되어 있다.

 

 

    Deny from all

    ErrorDocument 403 http://phf.apache.org/phf_abuse_log.cgi

# 아파치 1.1 이전 버젼의 버그를 악용하는 경우가 있는데 이 설정에 해 두면 이러한 공격을 phf.apache.org의 로깅 스키립트로 리다이렉트 시켜준다. 요즘은 필요없는 설정이고 위의 URL에 cgi스크립트가 존재하지도 않는다.

 

DefaultType text/plain

아파치가 처리할 기본 문서들을 정의한다. 위의 설정은 html과 text 파일을 포함시킨 것이다.

위의 설정 때문에 text 파일도 웹 브라우저에 표시해 줄수 있는 것이다.

설정

트랙백

댓글



get과 post의차이를 알아둡시다.

그런데, 원래 php는 특별히 인자를 주지 않더라도, action에 걸어놓은 php가 받아가야 되는데, 그렇게 하면 보안에 안좋은니까,
따로 선언해서 받아간다.
짧은 스타일 ($tireqty)는 register_globals로 활성화 해야 되고,
중간스타일 ($_POST['tireqty'])는 가져다 쓰는 형식이다.

define을 사용하려면
define ('TIREPRICE', 100) 이런 식으로 선언하고 $없이 쓴다.

array의 index=key라고 부른다.
$product = array ('a', 'b', 'c'); 이런식으로 한다.
$product[0], $product[1] 이런ㅅ기이지 머

require와 include는 같다. 다만 error와 warning의 차이다.

정적 class의  method는 
echo math::square(8); 머 이런 식이다.

DB에서 table디자인을 스키마라고 부른다.

이 책은 아주 재미있는 것들을 많이 다루지만, 너무 두껍다. 필요할 때 찾아보고 googling도 잘 하자.
 

설정

트랙백

댓글




Cellspacing : Cell 구분선의 굵기
cellpadding : Cell안에 얼마나 margin을 둘꺼냐

굴림은 가변폭, 굴림체는 고정폭!

앵커만들기

<a href="#앵커이름"> 와우 </a>

<td name="앵커이름">  </td> 또는 <a name="앵커이름"> </a>

colspan은 옆으로,  rowspan은 아래로 몇칸 뚫을꺼냐!

중요한건 frameset은 frame을 나누고, iframe은 다른 web page를 가져옴. 화면분할이 아니다.

Style sheet는 디자이너가 해야 좋다.

css는 tag에 스타일을 먹이는 거고, tag뒤에 style이름으로 불러들일 수 있다.
- <style> <!-- ...   .yellow {font-size:9pt; ....}  -->
   <p class = "yellow">    </p>  이런식으로 스타일을 불러쓸 수 있다.

hover란 mouse over일 때를 말한다.

Span과 Div의 차이는 둘다 css를 적용가능한 단위이나, enter가 들어가느냐 마느냐의 문제이다.

자바스크립트는
onload onclick등의 콤포넌트에 event를 걸 수 있는 것이다.
(또는 a href="javascript:XXXX" 로 hyperlink로 걸수도 있다.)

 
 

'JS HTML PHP' 카테고리의 다른 글

HTML 풍선 도움말, 줄바꿈 효과  (0) 2011.11.10
성공적인 웹프로그래밍 PHP와 MySQL (4판)  (0) 2011.10.20
HTTP ERROR: 404 Not Found 의 의미  (0) 2011.09.14
HTML Table Tag, Frameset Tag  (0) 2011.07.21
FORM tag와 PHP 연동  (0) 2011.07.21

설정

트랙백

댓글