이 글의 문맥을 분석하여 이글루스에 있는 많은 글 중에서 관련성이 높은 글을 자동으로 검색해 낸 결과입니다.
 손으로 쓰는 가벼운 글... 가끔 머리도 심장도 참견. by Yeon 카테고리
이전블로그
최근 등록된 덧글
인형 옷 만들기에 좋은 예..
by 퀼트 데파토 at 11/27 분홍치즈님. 알뿌리의 .. by Yeon at 07/30 앗... 요즘 공부를 하고.. by 분홍치즈 at 07/25 언제부터인가 고양이를 .. by 엉뚱이 at 06/24 새를 잡아서 연님앞에 대.. by 까탈 at 06/10 고양이는 특히나 아기같다.. by mohany at 05/26 옆에 와서 앉다니 너무 .. by clair at 05/13 순간 레미 눈동자 색하고.. by yuMi at 05/11 고양이들의 저런 은근한 .. by 현재진행형 at 05/07 감사합니다 ^^ 디펜스.. by clair at 05/06 최근 등록된 트랙백
2006-2007 시즌 뜨개질 마무리
by 모늬터 속 따뜻한 단칸방 비스코티biscotti by saturday brunch 항상 헷갈렸던 베이킹 가.. by 기억보관소 스콘을 굽다 by ☆토리영이네♡ 바삭바삭 레몬 쿠키 by 기억보관소 g by 루도빅의 문화여행 스콘을 만들어봐야지.. by the zoo box 만들기 by once in a blue moon Yeon님의 작품♬ by 잎사귀들 3월 어느 날 by 사람 사랑 ... 배움과 생각  |
2005년 09월 15일
아래 레서피 인용박스를 보고 유미님이 어찌한거냐 물어보시는군요. 이렇게 박스를 넣는 건 다른 분들도 많이 하시고 뒤져보면 이글루스에 관련 포스팅도 많을 것 같은데 기록삼아 적어보렵니다.
A. 따라하기 1. 이글루관리 > 스킨 바꾸기 > 현재 사용중인 스킨 편집하기 > CSS 편집하기 창으로 갑니다. 2. CSS 편집하기 창의 맨 아래에 다음과 같은 코드를 복사해줍니다. DIV.QUOTE { border:1px solid #666; float:center; width:460px; background:#eee; padding: 10px; margin: 10px; } 3. 저장하기를 누르시고 본 페이지로 돌아옵니다. 이제 새글쓰기를 할 때 인용글을 박스안에 넣고 싶으면 <DIV CLASS=QUOTE>을 쓰신다음 인용글을 쓰시고 <\DIV>로 닫습니다. 4. 새글을 저장하고 본문에서 보시면 인용박스가 나타납니다. B. 변형하기 1.CSS (cascading style sheet)이 자신의 이글루에서 보이는 글자폰트, 링크의 크기와 색깔, 바탕색 등을 지정해주신다는 건 아시지요. CSS 창에 위 코드를 복사하실 때에 문서 위든 아래든 상관은 없습니다만, 본문의 스타일을 지정해주는 DIV.POST_BODY 뒤에 복사하시거나, 혹은 문서 맨 끝에 복사하시는 게 좋습니다. 중요한 건 각각의 스타일을 정의하는 코드 중간에 새 코드를 복사하지 않도록 주의하는 거에요. 자세히 보시면 각각의 스타일을 정의하는 블럭이 다음과 같은 형식을 따름을 알 수 있어요. TAG.CLASS1 { HERE WE DEFINE THE DETAILS } TAG.CLASS2 { WHATEVER YOU WANT TO SAY GOES HERE } HTML에 쓰이는 a, body, p, div, span 등이 택(tag)에 해당하고요 거기에 사용자가 정의하는 이름이 클래스(class)에 해당합니다. #ID의 형태도 쓰는데 제가 쓰고 있는 기본 스킨은 모두 .클래스를 썼더군요. 어찌되었든 여기서 알 수 있는 건 위 따라하기에서 DIV.QUOTE 의 DIV는 tag, QUOTE는 클래스의 이름이란 걸 알 수 있어요. DIV는 레이아웃을 도와주는 아주 중요한 택으로 문서안에 블럭/박스를 정의하는 택이에요. QUOTE는 클래스의 이름으로 제가 임의로 붙인 이름이란 걸 알 수 있지요. 그러니까 원하신다면 다른 이름을 붙여도 상관 없습니다. 2. 이제 DIV.QUOTE안의 내용물을 살펴 봅시다. border:1px solid #666; 상자의 테두리를 정의합니다. 1px은 테두리의 두께로 테두리를 보이고 싶지 않으면 0px을 두껍게 하고 싶으면 더 큰 숫자를 쓰면 되요. solid는 테두리의 종류로 보통의 선이고 점선을 쓰고 싶으시면 dotted 줄이 그어진 선을 원하시면 dashed를 선택합니다. #666은 테두리의 색깔로 각각의 숫자가 Red, Green, Blue (RGB를 헥사코드로 표시한 것)에 해당합니다. #666은 #666666를 줄여서 쓴거지요. 웹에서 안전한 색깔에 대해 더 알고 싶으시면 이 링크를 참조하세요. float:center; 상자의 위치를 결정합니다. 왼쪽이나 오른쪽에 상자가 놓이길 원하시면 center대신에 left 혹은 right을 쓰세요. width:460px; 상자의 폭을 알려줍니다. 제 경우 스킨의 POST_BODY의 폭이 500px이어서 거기에 맞춰서 쓴 거지요. 자신의 스킨 폭에 맞춰 줄이거나 늘이세요. background:#eee; 상자의 배경색을 결정합니다. 보기에 쓰인 색들은 배경색이 #eee, 테두리색은 #666으로 회색 계열의 색임을 알 수 있어요. 색을 바꾸는 것만으로도 아주 다른 느낌이 납니다. 위에 언급한 링크에 가보시면 문서 아래부분에 색깔별로 테이블을 만들어 놓아서 원하는 색깔의 코드들 쉽게 찾으실 수 있습니다. padding: 10px; 이건 상자 안에 여백을 결정합니다. 상자 안의 인용구와 테두리 사이에 여백을 더 많이 넣고 싶으시면 더 큰 숫자를 쓰세요. margin: 10px; 상자 테두리 밖의 여백을 결정합니다. border, padding, margin등 상자의 4면과 관련된 스타일들은 왼쪽 오른쪽 위 아래의 스타일을 따로 따로 지정해 줄 수 도 있어요. CSS에 대해 더 많이 알고 싶다! 라는 지식욕이 넘치시면 아래 링크를 참조하시지요. W3Schools CSS Webmonkey CSS tutorial 실전예제로 배우는 CSS: glish.com: CSS layout techniques Little Boxes 링크가 너무 많아 하시는 분에겐 맨 아래 Little Boxes를 추천합니다.
|
