DBCC DBREINDEX('Table이름');
을 이용해서 Index를 Rebuild 시키면 된다.
DB를 Off-line 또는 사용하지 않는 상태에서 하는 것이 원활하며, 많은 시간을 잡아먹게 된다. (DB의 Index의 조각화가 심할 경우에..)
'분류 전체보기'에 해당되는 글 430건
- 2009.02.05 MS SQL 에서 Index의 Rebuild 방법
- 2009.02.05 C#에서 대용량 Text 파일 처리List<string> messages = new List<string>(); 8
- 2009.02.04 Log File Monitor 만들기.
- 2009.02.03 나라가 미쳐버렸군. -_-
- 2009.02.03 기존의 Table code를 CSS로 변경
- 2009.02.02 2009년 2월 2일
- 2009.02.01 CSS에서 float 속성에 관하여..
- 2009.01.30 jQuery for absolute Beginner - Video Series 4~10.
- 2009.01.30 꽤나 맘에 드는 IE Debug Tool
- 2009.01.29 jQuery 기본
어제 만들던 log 파일 분석기에서 Text를 처리하는 것이 문제가 아닌, 대용량 파일 처리에 대해서 생각하지 못했던 문제가 발생되었다.
가장 큰 문제는 File를 한번에 얻어서 byte를 얻어낼 경우에 StringBuilder의 최대 사이즈를 넘어가기 때문에 사용할 수 없다는 점. 그리고 FileStream.Read 에서 읽어낼 수 있는 양 자체도 시스템에 따른 특정 사이즈에 결정이 되어있다는 것이 대용량 처리에서 가장 큰 문제가 되었다.
이 경우에 전에 C++에서는 가상 메모리 또는 File Buffer를 사용해서 일정 크기로 잘라서 읽었던 경험이 있는데. .NET에서는 어떤 방법이 좋을지 다양한 방법으로 실험을 해봤다.;
* 제약 사항
: byte 단위로 읽어야 된다.
: IIS에서 사용되고 있는 log file이기 때문에 공유 형태로 읽어야지 된다.
: 크기에 제약이 없이 처리가 가능해야지 된다.
생각했던 방법들은 다음과 같다.
1. StringBuilder를 이용한 byte 값 저장.
: 가장 처음에 생각한 방법이다. 이 방법의 경우에 파일의 크기가 커질 경우에 StringBuilder에서 OutOfMemory Exception을 발생한다. 큰 파일을 열어야지 되기 때문에 바로 퇴장.
참고로 개발 시스템에서는 2147483647 character만이 string builder의 capacity로 사용 가능.
2. 1Byte 씩 계속해서 읽어가면서 문자열을 만들어간다.
: 매우 안정적이지만, 엄청나게 느리다.
FileStrema.ReadByte() 를 계속해서 호출하기 때문에 느리게 되는데. 상당히 비효율적인 코드로 보인다.;
3. Divide and Conquer
: 거의 방법은 첫번째 방법과 비슷하지만, 특정 BufferSize를 잡아서 그 BufferSize만큼 반복해서 읽어준다. FileStream.Read() 를 호출하는 것으로 약 4096 * 100 byte 씩 한번에 읽어서 처리하는 경우에 약 130 Mbyte의 text를 처리하는데 7sec 도 안걸리게 된다. (속도에 놀라버렸다. 같은 크기의 2번째 방법은 40여분이 걸려도 끝나지 않았다.; )
File의 끝까지 크기를 잡아주기 위해서 언제나 File의 Position과 BufferSize의 비교를 통해서 안정되게 문자열을 뽑아오는데 성공했다. T-T
List<string> messages = new List<string>();
using(FileStream fs = File.Open(fileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
{
Console.WriteLine("Read Text");
byte[] btDatas = new byte[BufferSize];
List<byte> readBytes = new List<byte>();
for(long index = readStartPosition; index < readEndPosition; )
{
fs.Position = index;
int readLength = Math.Min(BufferSize, (int)(readEndPosition - index));
int readCount = fs.Read(btDatas, 0, readLength);
index += readCount;
// 가장 불만인 코드. 한글자씩 얻어와서 찾는 방법 이외에는 없을까.. 라는 생각이 무척 많이 든다.
for(int i = 0 ; i < readCount ; i++)
{
Byte readByte = btDatas[i];
if(readByte == (byte)'\n')
{
string message = Encoding.UTF8.GetString(readBytes.ToArray());
messages.Add(message);
readBytes.Clear();
}
else
{
readBytes.Add(readByte);
}
}
}
}
IIS 나 log4net으로 만들어진 log file에 대해서 monitoring을 해야지 되는 경우에, 파일 로그의 특성상 가장 최근의 데이터는 언제나 파일의 끝부분에 위치하게 된다. 파일 자체도 끝부분이기도 하지만, 어디까지 파일을 읽어야지 되는지를 잘 파악하기 힘들게 된다.
잘 생각을 해보니.. 파일의 끝부분부터 모아서 string 변화를 시키고, 자신이 마지막에 읽었던 string 값과 비교해서 찾는 것이 방법을 사용해봤다.
그런데, 예전부터 사용되는 C에서의 파일처리와 비슷하게 해줘야지 되는 것 같아서.. 조금 애매하긴 하다.
차라리.. 기존에 읽었던 Byte의 Position을 기억해서, 그 부분부터 끝부분까지 읽는 방법은 어떨지 고민해봐야지 될 것 같다.
DateTime dtNow = DateTime.Now;
string fileName = string.Format("ex{0}.log", dtNow.ToString("yyMMdd"));
string lastReadLine = "7015289892;01051410960;1051410960;NB00000380;20081220095101";
using(FileStream fs = File.OpenRead("C:\\zordbs0200511-s06-호스트웨이.dat"))
{
long fileEndPosition = fs.Seek(0, SeekOrigin.End);
long currentPosition = fileEndPosition - 2;
fs.Position = fileEndPosition;
List<string> gettingStrings = new List<string>();
bool findOldText = false;
do
{
bool crlfFind = false;
List<byte> btDatas = new List<byte>();
string text;
do
{
//파일을 뒤에서부터 읽는 루틴
fs.Position = currentPosition;
btDatas.Add((byte) fs.ReadByte());
List<byte> btDatas2 = new List<byte>();
btDatas2.AddRange(btDatas);
btDatas2.Reverse();
text = Encoding.UTF8.GetString(btDatas2.ToArray());
crlfFind = text.Contains("\n");
currentPosition--;
} while (!crlfFind);
if(text.Contains(lastReadLine))
{
findOldText = true;
}
else
{
gettingStrings.Add(text);
}
} while (!findOldText);
foreach(string text in gettingStrings)
{
Console.WriteLine(text);
}
Console.ReadLine();
}
말도 안되는 출판 검열이라니.;;
정말로 20년은 확 돌려버리는 미친정권이라는 생각마져든다.
저는 한 출판사에 다니는 편집자입니다.
이번에 저희 출판사에서 나오는 책이 검열 아닌 검열(?)을 당해 너무 답답한 마음에 처음으로 아고라에 글을 남기게 되었습니다.
이번에 출판사에서 근현대문학을 초판본 형태로 출간한다는 기획을 하고, 기획된 100종 중 50종(현재는 47종)을 출간했습니다.
그런데, 그중 한 작품이 때 아닌 ‘검열’을 받고 출간하지 못하고 있습니다.
근현대문학 전체를 다루는 것이기에 당연히 납북, 월북, 북한 작가들이 포함되었는데,
그중 한 작품이 문제가 된 것입니다.(현재 우리나라에서는 저자 사후 50년이 지나지 않은 경우는, 저작권료를 지불하고 저작권을 획득하고 책을 출간합니다. 북한 저작권의 경우도 마찬가지입니다.)
원래 납북, 월북 작가를 포함하여 북한 작가의 저작권은 ‘남북저작권센터’에서 진행했답니다.
북한 저작권의 경우, 답변이 오는 데 시간이 한참 걸리고 비용 처리하는 데도 시간이 걸려 보통 선출간 후지불이 이루어진다고 합니다.
그래서 송영, 안회남, 이태준, 최명익 등의 작품을 북한 저작권 신청하고, 작업을 진행했습니다.
그런데 출간 준비가 거의 마무리되어 갈 즈음 ‘남북저작권센터’에서 연락이 왔습니다.
이번부터(아마도 이번 정권부터인 듯) 임시정부 수립 이후(48년 이후)에 북한에서 출간된 책의 경우는 저작권을 ‘통일부’에서 담당하기로 되었다는 것입니다.
저희 50종 중에 48년 이후 북한에서 출간된 책의 경우는 황건의 <<개마고원>> 하나가 있었습니다.
이 사실이 통일부로 넘어가자 이제 본격적으로 ‘검열’(?)이 시작되었습니다.
<<개마고원>>의 본문 파일을 요구하더니, (발췌본인지라) 나중에는 원본을 달라고 했습니다.
요청대로 원문을 복사하여 주고, 한참을 기다렸습니다. (그동안 제작 완료된 47종을 출간했습니다.)
그리고 통일부로부터 연락이 왔습니다.
‘원래 이런 타이틀은 반입을 허가하지 않는데, 한국근현대문학 출간의 취지를 고려하여 조건부 승인’을 하겠다는 것입니다.
바로 그 조건부 승인이란 ‘전체 190쪽 분량 가운데 23쪽은 전부 삭제하고, 그 외 29쪽가량은 자신들이 표시한 부분을 삭제하면’ 출간을 허용하겠다는 것입니다.
정말 이 이야기를 듣는 순간 어이가 없었습니다. 지금이 80년대도 아니고, 2000년대에 문학을 통일부 기준으로, 마음대로, 삭제하라니요.
진짜 뭐, 이런 경우가 다 있나 싶었습니다.
삭제하라는 부분을 보면, 정말 가관입니다.
가령 소설에서 당시 시대 상황을 이야기한 장면인데도 ‘김일성’이 들어가면 무조건 삭제하라 하고,
소설의 주인공이 북한 쪽의 입장이기 때문에 당연한 것을, 가령 남한군이나 미군을 ‘원수’, ‘놈들’이라고 부르는 것도 전부 삭제하랍니다.
또 미군이 북한 마을에 와서 행패를 부린 부분은 아예 도려내라고 합니다.(대체 미군이 선량하지 않으면 출간될 수 없다는 현실이 슬픕니다.)
“그사이에 평양에는 북조선 인민 위원회가 창설되고 김 일성 장군이 위원장으로 추대되였다.”(삭제하라는 문장)
“더 안 될 일로 나는 조국의 이 엄중한 날에 원쑤에 대한 싸움보다도 내 개인을 위한 적은 생각에 빠지고 있으며, 빠져가고 있는 것은 아닌지?”(밑줄 친 부분 삭제 요청 문구)
“정치부대 대장은 우선 래일 밤중에, 놈들이 밤이면 기여드는 십릿길 오른편 삼림 속을 기습하겠는데 총소리가 들리는 대로 그 안골 쪽에서 탄약더미에 불을 지르면 놈들을 더욱 당황하게 만들면서 량쪽 전투가 다 유리하리라고 하였다.”(밑줄 친 부분 삭제 요청 문구)
“...고모네가 늦게 떠난 것이 확연한 것처럼 필시 이것은 늦어서야 피난 가다 숨은 두 녀자를 미국 놈들이 발견하고 겁탈하려 끌어냈던 것이며, 반항하는 그들에게 수없는 총탄으로 보복한 것에 틀림없었다...”(이 부분 포함 거의 반 장가량 삭제 요청)
이상이 <<개마고원>> 검열에 대한 이야기였습니다.
지금 답답한 것은 ‘검열’ 자체보다도 이런 일이 벌어지고 있다는 사실을 아무도 몰라줄까 걱정되어서입니다.
현재 회사에서는 그쪽에서 압력을 받게 될까 봐 이러지도 저러지도 못하고 있는 실정입니다.(아무래도 출간을 포기하는 것으로 가닥을 잡아가는 것 같습니다.)
도대체 그들은 문학이 무엇인지, 예술이 무엇인지 아는지 묻고 싶습니다.
이미 연구도 많이 되어온 <<개마고원>>을, 출간하지 못하게 하는 것이 어떤 의미인지... 이제 북한 문학 연구도 금지하려고 하는 것인지... 정말 답답하기만 할 뿐입니다.
도대체 출판의 자유가 이런 식으로 침해받아도 되는 것인지 잘 모르겠습니다.
마지막으로 몇몇 분이라도 <<개마고원>>을 기억해 주십사 하고 <<개마고원>> 줄거리를 넣고, 이야기를 마치겠습니다.
================
징병으로 끌려간 지 두 달 만에 경석은 1945년 6월 하순에 비를 맞으며 집으로 몰래 숨어든다. 스스로를 “어떤 학대받는 주린 짐승”처럼 여기는 경석은 버들골 고모네 집에 숨어 있다가 돌아온 것이다. 순희네 집안 사람들에 의해 일찍 징병에 내보내졌다고 생각하는 경석은 울분을 참으면서 낮에는 숨어 지내고 밤이면 뒷방으로 나오는 은둔 생활을 계속한다. 적극적 저항보다는 일신의 안위와 자유로움을 기대하는 해방 이전의 경석은 나약한 지식인의 표정을 보여준다. 하지만 해방이 되고 면 자치위원회와 보안대가 조직되면서 경석은 적극적으로 해방조국의 건설을 위해 헌신하게 된다. 그러면서 순희와의 앞날에 불길한 예감을 감지하게 된다. 경석은 순희가 정치 학교에 나오지 않자 추궁을 계속하고, 정태기와 정영익의 주도로 보안서가 습격받자 경석은 총상을 입는다. 반란이 수포로 돌아간 뒤, 경석은 순희에게 집에서 도망을 치라고 이야기하지만, 순희는 엄두를 내지 못한다.
1946년 3월 토지 개혁 법령이 내려, 태기네 밭이 거의 몰수되기에 이르고, 경석은 면 민청위원장에 당선된다. 순희에게 다시금 집을 떠날 것을 권유하지만, 순희는 어머니의 만류에 의지를 꺾게 되고, 경석은 순희가 단순히 마음과 용모가 아름다운 여자에 불과했음을 깨닫는다. 경석에게 순희는 낭만적 이상형의 여성이었던 것이다. 신흥리로 돌아온 경석은 안계숙을 보면서 첫눈에 반해 얼굴이 달아오른다. 순희와의 관계가 마무리되기도 전에 다른 여성을 자기의 시선 안에 담게 된 것이다. 이해 겨울 맹증을 교부하러 갔다가 눈보라에 휩싸인 산길을 넘는 계숙을 만나, 경석은 귀중한 벗을 얻은 것 같은 느낌에 젖어든다. 그런 일이 있은 후 허전하거나 외로운 밤이 되면 계숙과 순희 사이에서 경석은 심리적으로 갈등하게 된다. 순희는 계숙과 경석의 사이를 오해하고는 계숙에 대한 원한을 품은 채 자살을 시도한다. 그러한 순희를 보고 소름이 끼친 계숙은 마을을 떠나 군 여맹으로 간다.
2년 반이 지나고 1949년 섣달 그믐께에 남쪽에서 태기를 찾아온 영익은 ‘국군’이 북진해 들어올 날이 멀지 않았음을 이야기한다. 순희는 자살사건 이후 조병호와 혼인을 치르지만, 남편의 불신과 폭력 속에 유산을 하게 된다. 1950년이 되어 양 축사 문 개방 사건과 당원 등록부 도난 사건 이후 전쟁이 발발하자, 경석은 피가 거꾸로 솟는 느낌을 받는다.
전쟁이 나자 경옥은 군대에 자원해 나가고, 경석은 인민들의 애국심과 열성을 발휘시키고자 노력한다. 전선이 이북으로 옮아와서 격전이 지속되고, 경석은 마을 주민들을 산속으로 소개시킨다. 전선 상황이 악화되면서 경석도 빨치산이 되어 마을을 떠나며 동지들에게 용감성과 헌신성을 강조한다. 경석은 헌신적으로 투쟁하다가 태악이 등에게 붙잡혔다가 소작농인 원갑의 도움으로 가까스로 탈출에 성공한다. 순희는 남편 병호에게 살해되고, 1950년 겨울이 가고 봄이 와서 병원에 입원해 있던 경석은 동생 경옥으로부터 편지를 받는다. 지칠 줄 모르는 전투 정신을 가진 사람을 사랑하게 되었으며, 계숙과의 사이가 좋아진 것을 축하한다는 내용이다. 경석은 병문안 온 계숙과 더욱 많은 일을 할 것을 다짐하며 오월에 결혼식을 거행하는 것으로 작품은 종결된다.
web 표준에 대한 관심이 많아지고 있는 때이기도 하고, 무엇보다도 jquery 등 표준화된 Framework를 사용할 때에 기존의 table code의 경우에는 사용에 많은 제약 사항을 가지게 된다.
무엇보다도 table의 <tr>, <td>로 묶여있는 안에서 <div> 등으로 다시 묶어주는 그야말로 엉망인 일을 해야지 되기 때문에 좀더 정형화되고 표준화된 web code의 필요성은 절대적으로 필요하게 된다.
불행히도... 디자이너들중에서 css나 웹표준을 사용해서 디자인을 하시는 분들이 아직까지 많지 않은 현실에서 개발자가 요구사항을 충족하기 위해서 css를 공부해서 변경을 시켜야지 되는 일이 빈번하게 이루어지고 있다. -_-;; (나도 그중 하나. -_-)
공부도 할겸, 기존의 코드보다 뛰어나다는 것을 증명하고 싶어서 아직 디자인중인 코드를 정말로 몸으로 부딛혀서 만들어봤다. 조금 아는 것은 margin, padding, float 정도밖에 없는 상태에서 수많은 삽질과 삽질을 하면서. --;;
1. table에서의 cellspacing, cellpadding의 변경
table에서 옆의 table과 정확한 수평을 유지하고 원하는 디자인을 만들기위해서 cellspacing과 cellpading을 사용한다. 이 부분의 경우에는 간단하게 padding과 margin의 속성을 설정해주는 것으로 해결할 수 있다.
2. 모든 browser를 다 맞추기에는 힘들다.
IE, FIrefox, crome 3개의 browser에서 모두 테스트를 하면서 맞추어보고 있었는데..
솔찍히 IE에서 너무나 안맞는다. -_-;
그나마 괜찮다는 IE 7에서조차 이런데. 다른 사람들이 저주하는 IE 6에서는 도대체 어떤 일들이 벌어지고 있는지 감조차 오지 않는다.
이럴때 주로 사용하게 되는 것이 CSS Hack.
표준을 어기게 되는 코드이지만, 어쩔수없는 선택으로 사용하게 되는 것 같다.
<!--[if IE]>
<style type="text/css" rel="stylesheet">
.header_left_menu img
{
border:0px none;
margin:0px;
margin-top:-1px;
}
</style>
<![endif]-->
3. 먼저 page에 대한 그림을 그리자.
무턱대로 코드부터 시작하는 것이 아닌, page의 layout이 어떤 모양으로 되어있는지 그림을 그려보고, div로 묶는 것을 그림으로부터 시작하는 것이 빠르다. 그리고, 큰 그림에서 시작해서 작은 그림으로 넘어가게 되면 은근히 간단하게 바뀌게 된다.
4. 검증을 확실히 하자.
웹표준에 맞추기 위해서 코딩을 바꾸는것은 좋지만, 자신이 보는 브라우져에서만 보게 되면 십중 팔구 큰 문제가 생기게 된다. 모든 브라우져에서 한번 보면서 문제가 어느곳에서 생긴것인지를 찾는 노력이 필요하다.
게시판_공지_내용.aspx2009년 2월 2일
2009. 2. 2. 02:14보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.
자료를 찾다가 좋은 자료 발견해서 업어오기.
출처는 : http://www.ibm.com/developerworks/kr/library/wa-css/index.html
옛날 옛적 인간이 처음 글을 쓰기 시작한 시절부터 우리는 이미지 주변에 뭔가를 끼적여 왔다.
이렇듯 이미지 주변을 둘러싸는 문자열의 미학과 공간 절약을 이해한 초창기 웹 개척자들은 넷스케이프(Netscape) 1.0과 HTML 2.0에 "부유(float)" 기능을 추가했다. 이후로 페이지에서 요소를 부유시키는 기능은 HTML 표준과 CSS 명세에서 기본으로 제공하는 속성이 되었다.
"float" 속성의 정의 자체는 매우 간단하다. 그러나 속성을 구현하고 사용하는 방식이 다양한 탓에 많은 웹 디자이너들이 원하는 페이지를 얻느라 많은 시간을 낭비한다.
이 기사에서는 "float" 속성에 관해 다음 측면을 살펴본다.
- 정의와 개념 모델
- 일반적인 사용 방법
- 개발 도구 고려 사항
- 브라우저 고려 사항
CSS2 명세는 float 속성을 명확히 정의하고 동작 방식도 규정한다. 이 절에서는 CSS2 명세 9장 5절 화면 구도 모델(Visual Fomatting Mode)에 기술된 내용을 토대로 float 속성을 살펴본다(CSS2 명세 링크는참고자료에 있다).
CSS2 8장 박스 모델에 나오듯이 float 속성은 박스를 부유시킬 위치를 지정한다. 지정할 수 있는 위치는 왼쪽(left) 또는 오른쪽(right)이다. 박스를 생성하는 요소 중 절대적으로 위치가 지정되지 않은 요소는 언제든 float 속성을 설정할 수 있다.
지정할 수 있는 속성 값은 다음과 같다.
- inherit - 요소를 감싸는 바깥 요소에서 float 속성을 상속받는다. 기본 값이다.
- left - 요소는 왼쪽에 부유하는 블록 박스를 생성한다. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐른다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다. "none"이 아니라면 "display" 속성은 무시된다.
- right - 요소는 오른쪽에 부유하는 블록 박스를 생성한다. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐른다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다. "none"이 아니라면 "display" 속성은 무시된다.
- none - 요소를 부유시키지 않는다.
다음은 float 속성이 따르는 규칙이다. 여기서는 왼쪽에서 부유하는 경우만 설명했다. 오른쪽에서 부유하는 경우는 정반대다. 즉, '왼쪽'을 '오른쪽'으로 바꾸면 된다.
명세에서는 박스 모서리(box edge)를 이용하여 동작 방식을 정의한다. 다음은 CSS 박스 모델에서 정의하는 모서리 네 가지다.
- 내용 모서리(content edge) 또는 내부 모서리(inner edge)는 요소 내용을 감싼다. 내용에 가장 가까운 모서리다.
- 패딩 모서리(padding edge)는 요소에 적용된 패딩을 포함한다. 패딩 모서리는 용기 블록(containing block) 모서리를 정의한다.
- 테두리 모서리(border edge)는 요소에 적용된 테두리를 포함한다.
- 여백 모서리(margin edge) 또는 외부 모서리(outer edge)에는 요소에 적용된 여백이 포함된다.
용기 블록 수평 조건: 왼쪽 부유 박스의 왼쪽 마진 모서리는 용기 블록의 왼쪽 패딩 모서리보다 왼쪽에 위치하지 못한다.
용기 블록 수직 조건: 왼쪽 부유 박스의 위쪽 마진 모서리는 용기 블록의 위쪽 패딩 모서리보다 위쪽에 위치하지 못한다.
이전 부유 조건: 현재 박스가 왼쪽 부유 박스이고 이전 박스도 왼쪽 부유 박스라면 1) 현재 박스의 왼쪽 마진 모서리는 이전 박스의 오른쪽 마진 모서리보다 오른쪽에 있거나 2) 현재 박스의 위쪽 마진 모서리는 이전 박스의 아래쪽 마진 모서리보다 아래쪽에 있어야 한다.
겹침 없음 조건: 같은 수평 영역을 공유하는 왼쪽 부유 박스의 오른쪽 마진 모서리는 오른쪽 부유 박스의 왼쪽 마진 모서리보다 오른쪽에 위치하지 못한다.
이전 요소 수직 조건: 왼쪽 부유 박스의 위쪽 마진 모서리는 이전 블록이나 이전 부유 블록의 위쪽 마진 모서리보다 위쪽에 위치하지 못한다.
라인 박스 수직 조건: 왼쪽 부유 박스의 위쪽 마진 모서리는 이전 요소가 생성하는 박스를 포함하는 라인 박스의 위쪽 패딩 모서리보다 위쪽에 위치할 수 없다. 라인 박스(line box)란 용기 블록 내에서 일직선을 이루는 인라인 블록을 모두 포함하는 가상의 직사각형을 가리킨다. 라인 박스 위쪽 패딩 모서리 높이는 가장 높은 박스의 높이와 일치한다.
반대편 수평 마진 조건: 왼쪽에 왼쪽 부유 박스가 있는 왼쪽 부유 박스는 오른쪽 마진 모서리가 용기 블록의 오른쪽 패딩 모서리보다 오른쪽에 위치할 수 없다. 즉, 왼쪽 부유 박스는 이미 최대한 왼쪽으로 배치되지 않는 한 용기 블록의 오른쪽 모서리를 넘어서 “튀어나오지” 못한다.
최적 수직 조건: 부유 박스는 용기 블록 내에서 최대한 위쪽에 놓여야 한다.
최적 수평 조건: 왼쪽 부유 박스는 용기 블록 내에서 최대한 왼쪽에 놓여야 한다.
위치 우선순위 규칙: 부유 박스 위치를 결정할 때는 최적 수직 조건이 최적 수평 조건에 우선한다. 즉, 부유 박스를 최대한 위쪽으로 두는 위치를 최대한 옆쪽으로 두는 위치보다 우선한다.
그림 1은 위 규칙에 따라 이미지를 배치한 예다. 텍스트 블록은 이미지와 상대적인 마진을 유지한다.
그림 1. 왼쪽 부유 박스가 놓이는 예
초보 웹 디자이너들은 흔히 문서 내에서 부유 요소가 놓이는 위치를 정확히 이해하지 못해서 혼란을 겪는다. 이러한 혼란을 조금이나마 덜어줄 경험적 법칙을 소개한다.
위치: 브라우저는 문서의 “정상 흐름”에 속한 요소 위치를 기준으로 부유 요소의 수직 위치를 결정한다. 정상 흐름이란 부라우저가 위치 지정 속성을 무시하는 경우 문서가 표시되는 방식을 가리킨다. 부유 요소는 정상 흐름에서 벗어나 용기 요소 내 최대한 왼쪽이나 오른쪽에 배치된다.
인라인 블록: 부유 요소는 화면에서 블록 박스가 된다. 즉, display: block 속성을 지정하는 경우와 동일하다.
폭 지정: 부유 요소는 폭을 지정해야 한다. CSS2 명세는 1) "width" 속성에 폭을 명시적으로 지정하든지 2) 이미지와 같은 하위 요소로부터 암시적으로 폭을 계산한다. 이미지는 이미지 속성 자체가 폭을 포함한다. 부유 요소에 폭을 지정하지 않으면 결과를 예측할 수 없다.
 |
|
부유 요소 다음에 나오는 요소는 부유 요소를 둘러싸며 흐른다. 다음 요소가 텍스트라면 바람직한 결과가 나온다. 그러나 페이지 레이아웃을 잡으려고 float 속성을 사용한다면 둘러싸기 동작을 취소해야 한다. 이 때 둘러싸기 동작을 취소하려는 요소에 "clear" 속성을 지정한다.
CSS2 명세는 clear 속성을 명확히 정의하고 동작 방식도 규정한다. 이 절에서는 CSS2 섹션 9.5 화면구도 모델(Visual Fomatting Model)에 기술된 내용을 토대로 clear 속성을 살펴본다(참고자료 참조).
clear 속성은 이전 부유 박스와 인접하지 말아야 할 요소 박스 측면을 지정한다. clear 속성을 지정하려는 요소가 부유 요소를 포함하는 경우 clear 속성은 하위 요소에 영향을 미치지 않는다.
clear 속성은 블록 수준 요소에만 적용된다. 여기에는 float 속성으로 블록 수준 요소가 된 요소도 포함된다.
속성은 다음 값 중 하나가 된다.
- inherit - 요소를 감싸는 바깥 요소에서 clear 속성을 상속 받는다. 기본 값이다.
- left - 생성된 박스의 위쪽 마진을 증가시켜 위쪽 테두리 모서리가 이전 왼쪽 부유 박스의 아래쪽 마진 모서리보다 아래쪽에 위치하게 만든다.
- right - 생성된 박스의 위쪽 마진을 증가시켜 위쪽 테두리 모서리가 이전 오른쪽 부유 박스의 아래쪽 마진 모서리보다 아래쪽에 위치하게 만든다.
- both - 생성된 박스 전부를 이전 부유 요소 아래로 배치한다.
- none - 이전 부유 박스 위치와 상관 없이 박스를 배치한다.
clear 속성은 본질적으로 부유 요소가 따르는 위치 규칙을 수정한다. 명세서에서는 이를 부유 요소에 적용되는 추가 제약 조건으로 취급한다.
clear 조건: 부유 박스의 위쪽 마진 모서리는 ("clear:left" 경우) 모든 이전 왼쪽 부유 박스의 아래쪽 마진 모서리보다 아래쪽에 위치하거나 ("clear:right" 경우) 모든 이전 오른쪽 부유 박스의 아래쪽 마진 모서리보다 아래쪽에 위치하거나 ("clear:both" 경우) 모든 이전 부유 박스의 아래쪽 마진 모서리보다 아래쪽에 위치해야 한다.
그림 2는 clear 속성을 사용하는 예다. 두 문단에는 모두 "clear:left" 속성이 지정되어 있다. 첫 번째 문단은 clear 속성이 아무런 영향을 미치지 않으므로 부유 박스가 문단 내에 놓인다. 두 번째 문단은 clear 속성 때문에 부유 이미지보다 아래쪽에 놓인다. 두 번째 문단의 위쪽 마진 모서리가 위로 연장되어 첫 번째 문단의 아래쪽 마진 모서리와 접촉한다는 사실에 주목한다.
그림 2. clear 속성을 사용하는 예
clear 속성을 사용할 때 한 가지 어려운 점이라면, 부유 요소 다음에 나오는 요소에 마크업을 추가해야 한다는 점이다.
Listing 1에서 보듯이, clear를 처리하려면 HTML 문서에 내용이 없는 빈 마크업을 추가한다.
Listing 1. "clear"를 처리하기 위해 추가한 빈 마크업
<div class="myFloatClass">
<p>myFloatClass has float:left specified</p>
</div>
<div class="myClearClass" />
<!--myClearClass has clear:left specified-->
|
여러 사람이 HTML 문서에 별도로 마크업을 추가하지 않고 clear 속성을 처리하는 방법을 제안했다. 그 중 몇 가지를 살펴보자.
- 컨테이너 요소에 "float"를 추가한다
- 컨테이너 요소에 "overflow:hidden"을 추가한다.
- 컨테이너 요소에 CSS2 ":after" 의사-클래스를 추가한다.
부유 컨테이너 사용: 페이지 레이아웃과 수평 탐색 메뉴에서 흔히 사용하는 기교로, 부유 컨테이너 내에 부유 요소를 넣는다. 그러면 부유 컨테이너는 내부 부유 요소를 모두 포함하도록 확장된다. 이 방법을 사용하려면 컨테이너 폭 속성을 올바로 설정해야 한다. 흔히 사용하는 값은 100%다.
이 방법은 여러 가지 단점이 있다. 첫째, 폭을 설정하기 어렵다. 100%를 지정했다가는 패딩과 충돌할 우려가 생긴다. 둘째, IE V6는 아래쪽에 마진을 추가할지도 모른다. 마지막으로, 부유 박스를 여러 겹 중첩하는 경우 일부 브라우저가 페이지를 어떻게 표시할지 예측하기 어렵다.
Listing 2는 부유 컨테이너를 정의한 CSS 코드다.
Listing 2. 부유 컨테이너 사용
.myFloatClass {
float: left;
width: 100%;
}
|
"overflow:hidden" 컨테이너 사용: 거의 사용하지 않는 방법이다. "overflow" 속성과 기본 "clip" 속성이 동작하는 방식을 이용한다. overflow 요소는 (부유 요소를 포함하여) 내부 요소 전체의 크기에 맞춰 확장된다.
이 기술에는 몇 가지 단점이 있다. 첫째, overflow 속성은 컨테이너 높이에 영향을 미친다. 둘째, overflow 속성을 사용하면 IE V6에서 "hasLayout" 속성도 적용된다.
Listing 3은 "overflow:hidden" 컨테이너를 사용하는 CSS 코드다.
Listing 3. "overflow:hidden" 컨테이너 사용
.myFloatClass {
overflow: hidden;
height: 1%;
/* Or zoom:1 to trigger IE's hasLayout */
}
|
:after 의사-클래스 기술: 이 방법은 거의 쓰이지 않는다. CSS 의사-클래스를 사용하여 컨테이너 다음에 내용을 생성하는 방법이다. :after 의사-클래스를 사용하여 결과 HTML 문서 다음에 clear 속성이 지정된 새 요소를 추가한다.
이 기술은 세 가지 방법 중 가장 바람직하지 못하며 지원하는 브라우저도 별로 없다. :after 의사-클래스는 IE V7 이전 버전에서 지원되지 않는다. 하지만 가장 중요하게는 결과 HTML에 의미 없는 내용을 추가한다는 점에서 바람직하지 못하다.
Listing 4는 :after 의사-클래스 기법을 사용하는 CSS 코드다.
Listing 4. :after 의사-클래스 기법
.myFloatClass {
height: 1%;
/* Or zoom:1 to trigger IE's hasLayout */
}
.myFloatClass:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
|
|
|
개발자라면 누구나 알겠지만, HTML/CSS WYSIWYG 편집기가 모두 동급은 아니다. 편집기마다 나름대로 기벽이 있고, 웹 표준을 준수하는 정도도 다르고, 사용하는 페이지 렌더링 엔진도 다르다.
나는 IBM® Rational® Software Architect V7, 어도비 드림위버 CS3, 지뉴이텍 마이이클립스 V6 등 인기 있는 WYSIWYG 편집기를 두루 써보았는데, 모두 처음 시작하기에는 유용하지만 어느 정도 수준에 이르면 결국 조율을 위해 원시 코드를 손봐야 했다. 페이지를 제작한 후에는 대상 브라우저에서 반드시 테스트해야 하는데, 많은 편집기가 편집기 메뉴에서 브라우저를 바로 띄워서 페이지를 테스트하는 추가 기능을 제공했다.
WYSIWYG 편집기를 평가하려면 Acid 2 브라우저 테스트(참고자료 참조)에 편집기를 적용해보길 권한다. Acid 2 브라우저 테스트는 브라우저 개발업체가 브라우저 표준 준수 수준을 테스트하기 쉽도록 웹 표준 프로젝트에서 개발한 테스트다. 그러나 현재 선택을 고려 중인 HTML/CSS WYSIWYG 편집기를 Acid 2를 사용해서 테스트해도 좋다.
널리 사용하는 브라우저 제품이라도 표준에 어긋나는 동작이 많다.
우선, 브라우저마다 중첩된 부유 요소를 처리하는 방식이 다르다. 그러므로 가능하면 부유 요소 내에 부유 요소를 넣는 방식은 피하는 편이 좋다. 중첩이 필요하다면 상대적인 위치를 지정하거나 절대적인 위치를 지정하는 방법을 권한다.
인터넷 익스플로러: Position Is Everything 웹 사이트는 IE 버그와 해결법을 소개한다. 자세한 내용은 Explorer Exposed 페이지를 살펴본다.
파이어폭스: 파이어폭스에서 float 속성과 관련하여 내가 찾은 버그는 Top Gap 버그다. 열이 여러 개고 각 열은 부유 요소이지만 헤더가 부유 요소가 아닌 경우에만 나타나는 버그다. 위쪽 마진이 있는 열 요소가 헤더 위로 올라가는 바람에 윈도우 윗단과 헤더 섹션 윗단에 틈이 생긴다. 버그를 수정하려면 부유 열 위에 무언가를 넣으면 된다. 헤더 바닥에 "clear:both" 속성을 가진 요소를 추가하는 방법도 있고, header까지 모두 부유 요소로 만드는 방법도 있다.
오페라: Position Is Everything 웹 사이트는 오페라 버그와 해결책도 소개한다. 자세한 내용은 Opera Omnibus 페이지를 참조한다.
페이지에서 요소를 부유시키는 방법은 초창기 웹 브라우저에서부터 존재했던 기술이다. 요즘 웹 디자인은 과거 테이블을 사용하던 방식을 점차 float 속성으로 대체하는 추세다. float 속성은 정의와 동작 방식이 간단하지만, 브라우저마다 구현 방식이 달라서 속성을 사용하기 쉽지 않다. 이 기사에서 살펴본 내용은 겉핥기에 불과하다. 좀더 자세한 내용은 참고자료를 살펴본다. 물론, 속성을 직접 사용하면서 실험해 보는 방법도 아주 좋다.
교육
- 이 기사에서 소개한 그림 1과 그림 2는Cascading Style Sheets, Level 2, CSS2 Specification 문서에서 발췌했다. 그림을 사용해도 좋다는 허가는 W3C Copyright statement를 참조한다.
- Eric Meyer가 쓴 온라인 기사인 "Containing Floats"는 기본 페이지 레이아웃에서 float가 동작하는 방식을 설명한다.
- CSS: The Definitive Guide(3rd ed)는 Eric Meyer가 집필하고 오라일리 출판사가 펴낸 CSS 참조 서적이다.
- CSS Cookbook(2nd ed)은 Christopher Schmitt가 집필하고 오라일리 출판사가 펴낸 책이다. CSS 예제가 풍부하다.
- Floatutorial에서는 여러 편에 걸친 튜토리얼을 통해 이미지와 페이지 레이아웃에서 float 속성을 사용하는 방법을 소개한다.
- Robert Nyman이 자신의 블로그에 올린 글인 How to Clear CSS Floats Without Extra Markup - Different Techniques Explained는 웹 페이지에 태그를 별도로 추가하지 않고 float 속성을 해제(clear)하는 방법 세 가지를 소개한다.
- Cascading Style Sheets, Level 2, CSS2 Specification은 W3C에서 내놓은 명세서다. 현재 CSS 속성은 대개 이 명세서가 기술하는 동작을 따른다. 9.5절에서 float 속성을 기술한다.
- Web Standards Project(WaSP)는 웹 표준을 널리 퍼트리려고 노력하는 프로젝트다.
- Acid2 테스트는 웹 브라우저가 웹 표준을 준수하는지 검사한다.
- Position Is Everything은 브라우저 호환성, 버그, 해킹 소식을 제공하는 사이트다.
- Michael Russell이 쓴 기사인 "Compare Web site appearance and functionality"는 브라우저 확장 대신 웹 표준을 사용하는 장점을 논한다.
- "Cross-browser Web application testing made easy"는 다양한 브라우저에서 웹 응용 프로그램을 쉽게 테스트하는 방법을 소개한다.
- Hoverbox Image Gallery는 float 속성을 멋지게 활용하는 사이트다. developerWorks 기사에서도 여러 차례 언급했다.
- developerWorks 웹 개발 영역: 여러분의 실력을 향상시켜 줄 다양한 자원을 제공한다.
제품 및 기술 얻기
- IBM 제품 평가판: DB2®, Lotus®, Rational®, Tivoli®, WebSphere®와 같은 제품을 developerWorks에서 직접 내려 받아 다음 프로젝트에 활용해 보자.
토론
- developerWorks 블로그를 읽어보고 developerWorks 공동체에 참여한다.
집에와서 와이프가 근무나간사이에 간만에 버닝되어서 다보면서 따라해보기 한 4시간정도.
따라해보면서 내가 해보고 싶은 내용들을 하나둘씩 넣어보는 것으로 무엇을 어떻게 할 수 있을지에 대한 생각들이 많이 들게 되는 것 같다.
좀더 UI 적으로 사용자에게 편하게 하는 방법은 무엇일까.. 라는 생각도 들고 무엇보다도 나도 이런 것을 할 수 있다는 생각이 들면서 왠지 너무 기쁘다는 생각이 드는 이유가 무엇일까. ^^
그리고, 오늘 꽤나 괜찮은 툴을 하나 발견.
Mac에서의 Killer S/W인 TextMate의 windows 버젼인 E-TextEditor 인데. 이거 사용법도 쉬우면서 너무나 간편한 인터페이스를 많이 가지고 있는 것 같다. Multi Select 변경이 가장 인상적인데. 좀더 사용을 해봐야지 될듯.
오늘 한 내용들 간단하게 정리.
1. toggleClass(), toggle()
: 오늘 회사에서 잠시 사용해서 그전까지 조금 어색했던 UI를 해결한 방법. css단까지 toggle로 보낼 수 있는 jQuery의 다양한 확장성에 정말 놀랄수밖에 없었다.;
<script type="text/javascript">
$(function() {
$('a').click(function() {
//$('#box').toggle(4000);
$('#box').toggleClass('border');
});
$('p').click(function() {
$(this).toggleClass('highlight');
})
});
</script>
2. animate 기능
: 단순히 style의 변경이 아닌, style의 점진적인 변경이 이루어지기 때문에 animation이 나타나게 된다. 화려한 UI를 꾸밀때에 도움이 될 것 같고, 무엇보다 menu같은 것에서 menu를 선택하고 menu를 확장하는데에 도움을 줄 수 있다.
<script type="text/javascript">
$(function() {
$('#container img').animate({
"opacity" : .5
})
$('#container img').hover(function() {
$(this).stop().animate({ "opacity" : 1 });
console.log("message");
}, function(){
$(this).stop().animate({"opacity" : .5})
});
$('#container img').click(function() {
$(this).animate( { "opacity" : 1 } );
console.log("click") ;
});
});
</script>
3. mouse event 기능
: 기본적으로 hover() 함수를 이용해서 mouse 에 대한 over를 잡아서 선택 가능하다. event를 function으로 잡아서 mouse의 좌표를 얻어서 작업하는 것은 windows application에서 동작하는 것과 거의 유사하게 움직이게 된다.
<script type="text/javascript">
$(function() {
var offsetX = 20;
var offsetY = 10;
$('a').hover(function(e) {
var href = $(this).attr('href');
$('<img id="largeImage" src="' + href + '" alt="image"/>')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function(){
$('#largeImage').remove();
});
$('a').mousemove(function(e) {
$('#largeImgae')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX);
});
});
</script>
4. ajax 기능
: 오늘 본 내용들은 다른 html을 읽어서 그 안에 있는 내용을 긁어서 보여주는 것으로 매우 단순하긴 했지만, 다른 파일에 있는 항목을 긁어오는 것은 하나의 파일에서 너무나 많은 내용을 담고 있을때, 나눠주는 기능으로도 사용 가능해보인다. 조금 만 더 응용을 한다면 web service에서 얻어오는 결과를 다시 보내주는 것도 가능해보인다.
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#info').load('index7.html #movies', function() {
$(this).hide()
.appendTo('#container')
.slideDown(1000);
alert($(this).id);
});
});
});
</script>
보면 볼 수록 내용들이 많아지고 재미있는 기능들이 많아진다는 느낌이 든다.
좀 더 해보고 싶고, 조금만 더 공부를 해서 javascript가 지원되는 tistory에서 한번 사용해볼까.. 하는 욕심도 생기고. 여러모로 공부하면 할수록 즐겁다는 느낌이 드는 framework이다.
구조도 한번 봐봐야지 될 것 같은데...
아직은 너무나 방대해서 구조까지는 볼 생각도 못하고 훝어보는 기분이 드는 것이 조금은 아쉽기만 하다.;
꽤나 맘에 드는 IE Debug Tool
2009. 1. 30. 01:58보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.
자료를 뒤지다가 jQuery에 대해서 잘 정리된 자료가 있어서 업어온 정보.
(원본 : http://funnygangstar.tistory.com/category/jQuery)
1. jQuery를 잘(?) 사용하기 위한 기본 환경 셋팅
- 아래의 사이트에서 jQuery 라이브러리(jquery-1.2.6.js)를 다운로드 받는다.
: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js&can=1&q=
- VisualStudio에서 jQuery의 인텔리전스 기능을 사용하기 위해서는 아래의 순서대로 실행한다.
1) VisualStudio 2008 SP1을 설치한다.
2) VisualStudio의 패치를 실시한다.
: http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
3) jQuery-vsdoc.js 파일을 다운로드한다. ( ~vsdoc.js 파일은 js 파일의 인텔리전스를 위한 도움말 파일임)
: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6-vsdoc.js&can=1&q=
2. jQuery의 시작
jQuery를 사용하기 위해서는 $ 로 시작하거나 jQuery로 시작하면 된다.
: 예) $(“div”) or jQuery(“div”)
페이지가 로드 되었을때 특정한 jQuery를 실행시키기 위해서는 아래의 세가지 방법이 있을 수 있으며 마지막 방법이
일반적으로 가장 많이 사용된다.
1) window.onload = function() {
alert('aaa');
}
2) $(document).ready(function(){
alert('aaaa');
});
3) $(function(){
alert('aaaa');
});
* 일반적인 HTML 페이지의 로딩이벤트에서는 첫번째 방법처럼 사용하게되고 단점은 단 한번밖에는 사용할 수 없다는 단점이 있습니다만, 두번쨰나 세번째 처럼 jQuery를 사용하게 되면 페이지 로드 이벤트시 여러 개의 함수를 호출할 수 있다는 장점이 있습니다.
3. jQuery로 엘리먼트 선택하기
3-1 알아두어야할 기본 사항
조작하려는 HTML 엘리먼트 선택하는 방법
1) a => <a> 태그로 시작하는 모든 엘리먼트를 선택한다.
예) $(“a”)
2) #ID => ID에 지정한 id를 가지는 모든 엘리먼트를 선택한다.
예) $(“div#myID)
3) .CLASS => CLASS에 지정한 class를 가지는 모든 엘리먼트를 선택한다.
예) $(“tr.myClass)
3-2 기본형 선택방식
1) 엘리먼트 사이에 스페이스를 두면 하위의 엘리먼트를 선택하게 된다.
예) $(“ul li a”) è ul 태그 하위에 li 태그 하위에 있는 a 태그를 선택한다.
: 주의할 것은 첫번째 나오는 엘리먼트(위에서는 ul 태그)라고 해서 전체 HTML에서 최상위에 있는 엘리먼트를 지칭하지는
않는다는 것이며, 또한 스페이스는 하위 엘리먼트를 선택하는 것이지 바로 아래의 엘리먼트를 선택하는 것이 아니다
예)
<body>
<div id="all">
<a href="http://www.naver.com">네이버링크</a>
<div>
<div><b><a href="http://www.daum.net">5-2</a></b></div>
</div>
</div>
</body>
와 같은 HTML이 있을 경우 $(“div a”)라고 한다면 위에서 두가지 <a> 태그 모두를 선택하게 된다.
2) 자주 쓰이는 셀렉터
- * => 모든 엘리먼트 => $("ul li *")
- E => 태그명이 E인 모든 엘리먼트 => $(“div”)
- E F => E 엘리먼트의 자손이면서 태그명이 F인 모든 엘리먼트 => $(“div a”)
- E > F => E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트 => $(“div > a”)
- E:has(F) => 태그명이 F인 엘리먼트를 하나 이상 가지는 모든 E 엘리먼트 => $(“ul li ul:has(li)”)
- E.C => 클래스명 C를 가지는 모든 E 엘리먼트, E를 생략하면 *.C와 동일 => $(“ul:myList”)
- E#I => 아이디가 I인 엘리먼트 E 엘리먼트, E를 생략하면 *#I와 동일 => $(“div#someID”)
- E[A] => 어트리뷰트 A를 가지는 엘리먼트 E => $(“img[src”)
- E[A=V] => 값이 V인 어트리뷰트 A를 가지는 엘리먼트E => $(“table[id=languages]”)
- E[A^=V] => 값이 V로 시작하는 어트리뷰트 A를가지는 E 엘리먼트 => $(“table[id^=lan])
- E[A$=V] => 값이 V로 끝나는 어트리뷰트 A를 가지는 E 엘리먼트 => $(“table[id$=ges])
- E[A*=V] => 값에 V가 들어있는 어트리뷰트 A를가지는엘리먼트 => $(“table[id*=g])
3) 하나의 $()에 콤마(,)를 사용하여 여러 요소를 접근할 수 있습니다.
div와 p요소를 선택하고자 한다면
$('div,p')
3-3 위치 기반 선택 방식
- B:first => 페이지에서 첫번째 B요소와 매칭
- B:last => 페이지에서 마지막 B요소와 매칭
- B:first-child => 첫번째 B요소와 매칭
- B:last-child => 마지막 B요소와 매칭
- B:only-child => B요소가 하나일 경우 B요소와 매칭
- B:nth-child(n) => n번째 B요소와 매칭(n:one-based)
- B:nth-child(odd|even) => 홀/짝수 B요소와 매칭
- B:nth-child(Xn+Y) => X배수 + Y인 B요소와 매칭(n:zero-based)
- B:even => 짝수 B요소와 매칭
- B:odd => 홀수 B요소와 매칭
- B:eq(n) => n번째 B요소와 매칭(n:zeno-based)
- B:gt(n) => n번째 초과 B요소와 매칭
- B:lt(n) => n이하 B요소와 매칭
* :nth-child 선택자는 1부터 시작되는 반면에 :eq, :gt, :lt 선택자는 0부터 시작됩니다.
3-4 사용자 정의형 선택 방식
- B:animated => jQuery 애니메이션 메서드로 애니메이션이 활성화된 B요소와 매칭
- B:button => 버튼 형태(button, input[@type=submit], input[@type=reset], input[@type=button])의 B요소와 매칭
- B:checkbox => input[@type=checkbox]인 B요소와 매칭
- B:enabled => 활성화 상태인 B요소와 매칭
- B:file => input[@type=file]인 B요소와 매칭
- B:header => h1~h6인 B요소와 매칭
- B:hidden => 비가시 상태 또는 input[@type=hidden]인 B요소와 매칭
- B:image => input[@type=image]인 B요소와 매칭
- B:input => 입력 요소(input, select, textarea)인 B요소와 매칭
- B:not(f) => :(콜론)으로 시작하는 f를 제외한 B요소와 매칭
- B:parent => 자식요소가 있는 B요소와 매칭
- B:password => input[@type=password]인 B요소와 매칭
- B:radio => input[@type=radio]인 B요소와 매칭
- B:reset => input[@type=reset]인 B요소와 매칭
- B:selected => option요소 중 현재 선택된 B인요소와 매칭
- B:submit => input[@type=submit]인 B요소와 매칭
- B:text => input[@type=text]인 B요소와 매칭
- B:visible => 가시 상태인 B요소와 매칭
4. jQuery의 몇가지 특색
1) 체이닝 호출
- jQuery는 메소드를 연속으로 호출 할 수 있다.
: 예) $(‘#div’).slideup(2000).css("background-color", "#fff0ff").click(function(){ alert(‘completed’); });
2) 유틸리티 함수 지원
- $. 을 사용하면 jQuery에서 지원하는 유틸리티 함수를 사용할 수 있다.
: 예) $.get(), $.ajax() …….
3) 엘리먼트 추가/삭제
- jQuery를 사용하면 손쉽게 HTML 엘리먼트를 추가 삭제할 수 있다. appent(), appentTo(), insertAfter()등의 메소드 사용
: 예) $('#chk').append('<input id=Checkbox6 type=checkbox checked=true />');
4) HTML 어트리뷰트 변경
- HTML 엘리먼트의 어트리뷰트를 변경할 수 있다.
: 예) $('#Img1').attr('width', '200');
5) value 값과 text 값
- HTML 엘리먼트의 value 어트리뷰트를 조작하기 위해서는 val()/val(값) 메소드를 사용하며,
엘리먼트 사이에 있는 Text값 (예: <label>텍스트값</label>)을 조작하기 위해서는 text(), text(값) 메소드를 사용한다
