AllAcc?ess2007. 4. 24. 19:15
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지


사용자 삽입 이미지


Skill 기준 : 단축키와 기능을 익히고 위 이미지에서 보듯이 캔퍼스화에 이미지를 삽입수 있는 능력 (10분 안에)

이해 사항 :  Photoshop CS의 기능을 이해하며 일주일안에 파기..

난 지금 가능성을 향하는 건가? 그냥 향해 가는 것일까?
일주일 뒤에..
Posted by aspirinirony
AllAcc?ess2007. 4. 2. 01:03

사용자 삽입 이미지
스킨을 교체하고 나니 이제야 좀 내 blog라는 느낌이 드네요..

<= 오른쪽에 있던 스킨이 원래 저의 스킨이였습니다.

Tistory blog skin중에 하나인데..

별루 마음에 들지 않아서 조금씩 변화를 주기 시작했지요.

원래 스킨에 임의적으로 손을 대는 것이죠..


문제는 이 스킨이 3단 이라는 것이 였습니다..

물론 사이드를 모두 합쳐버리면 2단이 되겠지만 스킨편집모드로 들어가면..

여전히 3단으로 편집모드가 나오고 이에 맞추어 스킨을 편집해야 하는 것인데..

신기하게도 버그인지.. 스킨모드에서 하나의 변화만 주어도 한쪽으로 모두 몰아버린 사이드 메뉴들이 제자리로 돌아와 다시 3단으로 바뀌는 것이였습니다..

그리고 스킨편집모드의 css가 아닌 html모드의 코드를 바꾸어도 여전히 3단으로 다시 만들어 집니다..

스킨교체의 어려움을 애기하다 무슨 불만토로모드로 왔는데..

우선 이 스킨은 Tistroy에 없는 제가 만든것입니다.
물론 스킨이라고 할수 없는 텍스트 최적화로 만들었으며 이미지라고는 달랑 상단, 내 이미지와 rss, 통계가 다입니다.

로딩 최적화이며.. 파이어폭스를 최우선 브라우져로 하여 만들었습니다..

가독성에 문제가 있다는 생각은 조금하고 있지만 글씨색을 바꾸고 싶지는 않네요..

어차피 저의 Blog가 인기블로그가 아니니까..

처음 생각한 2개의 디자인은 여기에 적용할수 없었습니다..

우선 그 디자인은 이미지가 많이 들어가며 복잡한 layout을 하고 있고 가장 큰 문제는 3단 스킨의 편집모드에서 [## data  list ##] 를 마음데로 변경하기가 어려워서 입니다.

layout상 이 data list를 임의되로 배치할수 있어야 하는데 그렇게 할수 없는점이 가장 큰 이유로 작용하였으며 data list의 임의 배치가 성공한다 하더라도 다시 문제되는 건 제가 생각 했던 갤러리 페이지의 임의 설정이 였는데 역시 100%의 자유도를 갖지 못함으로 실행할 수 없었습니다..

물론 제가 만든 주크박스는 html페이지를 만들어 window.open으로 뛰워버릴수 있지만 갤러리는 그렇게 할수 있는게 아닌지라 차라리 계정을 하나 만들어 php로 blog를 만들어 버릴까 생각하고 있습니다.. 사실 php보다 닷넷으로 만들어 버릴까도 했는데 제가 잡아 놓은 계정이 apache를 서버로 mysql을 db로 함으로 해서 php를 사용할수 밖에 없는 점도 있지요..(난 닷넷이 좋은데..)

새롭게 만들어질것은 blog가 아닌 site가 될수 있을 것이라 생각됩니다. site안에 blog를 우선 집어 넣고 site구축은 한페이지씩 만들려고 하나 website구축시 계획과 모델링 시나리오등이 중요하여 철저히 준비하지 않으면 다시 갈아없고 다시 해야함으로 조금 오래 걸릴듯 하네요..

site가 완성되면 좋은 곳으로 갈련다...

닷넷이 지원되는 무료호스팅업체는 없는 걸까  cafe24윈도우광이 유료지만 조금 괜찮은 것 같던데..

계획안부터 다시 짜야지...

Posted by aspirinirony
AllAcc?ess2007. 4. 1. 12:18
가만히 생각해 보면 나의 blog에 웃음이 없군 그래서 시작한다..

사용자 삽입 이미지
사용자 삽입 이미지


넘 웃기네요.. 다음 무한도전 갤에 있던데....

지금 무한도전이 다시 도전의식을 불싸지르는 것같은데..

이번에 여름 특집은 사막건너기 할듯...

사용자 삽입 이미지

Posted by aspirinirony
AllAcc?ess2007. 3. 31. 01:43
가끔 든 생각이지만 오늘 결심이 드는 것 같네요..

이놈의 blog를 뒤집어버려야 겠다는 생각..

리뉴얼중 사고가 일어나지 않으면 좋으련만...

xml data backup은 해두고 하자 혹 모르니..

그럼 내일부터 리뉴얼 go.. 오늘은 자야지..

생각해분 두개의 design이 있는데 무엇으로 할지 아직도 결정하지 못했지만 이제까지 없던 design이 될지 않을까 싶다..

Posted by aspirinirony
AllAcc?ess2007. 3. 27. 00:39

오래간만에 좋은 소식이 들려오네요..

간만에 들어와 어제도 왔지만 취중이라...

미친듯이 일하다.. 오늘 넷에 접속하고 블로그스피어중에 S2day님의 블로그에서 me2day에서 초대장을 줄수 있게 되었다며 뎃글순서대로 초대장을 하사하신다는 글을 읽다 저의 id가 나와 깜짝 놀랐습니다..

참을성 없으시지는 않을 실텐데... 걱정이네요.. 바빠서 못보다 이제 보게 되었는데...

여기 증거 사진 나갑니다...

사용자 삽입 이미지
세번째에 당첨되다니 무슨 라디오 사연 당첨된 느낌이라 정말 황송합니다...

고맙다는 말씀드리고 싶네요.. S2day님...

어서 하사하시길...

Posted by aspirinirony
AllAcc?ess2007. 3. 24. 17:54
나의 컴이 어제 아니 오늘 새벽 스타도중 갑자기 나가 버렸다..
새벽에 부품이 있는 것도 아니고 ..
그래서 잤다..

일어나 바로 컴퓨터 상가로 컴을 가지고 가니 예상한것과 같은 서플이상..

서플 3만원짜리로 바꿨다..

이미 3번이나 서플을 바꾼 관계로 이번에 좀 돈들였네..

그런데.. 새벽 어째 찜찜한 현상이 일어나던것이 현실로 바뀌었다..

하드가 나갔셨다..

아 이럴수가 나의 자료들..

각종 프로그래밍 소스들이 다들어 있는 나의 D 만이라도 살려야 했는데..

완전 나가 벼렸다..

시게이트 160기가 6만 5천원(이상하다.. 160기가는 이제 더이상 안나온다고 하던데.. 혹시 중고인가..)

많이 비싸다. 이것저것 해서 십만 5천원에 다시 설치해야하는 윈도우 xp 와 server2003 그리고xp 의 APM설치와 sever의 비주얼 스튜디오 플래쉬 포토샵에.. MS SQL에 office에 머리가 아플만큼이데 가장 중요한것은 모든 소스가 날아가 버린데다.. 다시 시작하려니 죽음같다..

인생이 이렇게 고달픈가...


Posted by aspirinirony
AllAcc?ess2007. 3. 10. 09:07

먼저 내가 Blogaip를 사용하는게 된것은 엄청난 노력끝에 탈고한 Post를 단한번의 실수인 Ctrl+R로 날려버려서 이다..

고통과 좌절의 아픔을 다른이는 겪게 하고 싶지 않는 마음에 이글을 쓴다.

MS Live Writer Download 이 주소로 MS Live Writer를 다운받는다..

.Net Framework 2.0 이상이 깔려 있지 않으면 설치되지 않는다. 보통은 1.1한국어버젼이 설치되어 있으니 제어판에서 확인해보고 설치하다.  만약 설치되어 있지 않다면..

=> .Net Framework 20 Download로 다운받는다.

티스토리 BlogApi 활용페이지로 이동한다. 활용페이지

티스토리 Blogapi 활용페이지 MS Writer편에서 그림까지 이용해 잘 알려주만 마지막 하나의 정보가 없다. 

이 그림 다음에 나오는것 설정메뉴인데 티스토리 설정설명과는 틀린 그림이 나온다.

당황은 금물.. 침착하게 따라한다.

Select Provider를 선택하라는 Select 메뉴가 나오는데 이때 Custom(Metaweblog API)를 선택하고 url에 http :// <hosturl>를 모두 지우고 http ://블로그주소/api를 넣어준다.

그러면 사용설정이 끝났다.. 다음은 Firefix에서 Blogaip를 해볼까..

Technorati tags: ,
Posted by aspirinirony
AllAcc?ess2007. 3. 8. 00:55
리퍼러를 통해 내 Blog의 Identity를 생각하기도 하는데..
하나의 아리꾸리한 주소가 보여 역으로 들어가봤다..

http://pista.dva.gva.es/ppal/Main;jsessionid=EE759C27AF3EA4C105D8ED7B9C83C998?ISUM_ID=Content&ISUM_SCR=externalServiceScr&ISUM_CIPH=NO4nynRwy0M4Df0FQh9y85y3EKPIDkLKgsXrP2QYeiBYjJFOoz-VysSNI4W5W0IN

야리꾸리한 주소만큼 텍스트인코딩이 안된다.. 서유럽으로 되어있어 자동선택으로도 바꿔봤는데.. 이게 대체 어느나라 글이야란 생각 분이였다..

그러다 이상하게 많이 본 페이지디지인 구성에다 조금씩 다운로드되는 이미지들에서 다음과 디스토리 데터툴즈 이미지를 보게 되었다.. 어.. 하나의 통 이미지라면 말이 안되는데..하다..

이 페이지의 구성이 iframe인걸 깨닫고 title이라 여겨지는 hyperlink에 마우스를 가져다 데니까..
어라 link가 반응을 하네.. 그래서 클릭해 봤더니.. 어느 분의 티스토리 블로그로 이동되었다.(역시 문자인코딩이 인식되지 않는다. 이는 역시 iframe안에서 움직인다는 것인데..)

이건 티스토리메인페이지였다..
사용자 삽입 이미지

사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

이 사이트를 만든이가 누구인지 이따위로 iframe을 걸어놓았는지.. 마지막 그림에 티스토리와 데터툴즈그리고 다음의 로고이미지가 보인다..

이 사이트의 주소는 http://pista.dva.gva.es이다. 다른걸 떠나서 티스토리가 서유럽국가의 사이트에서 하나의 페이지를 찾지하고 있다는것이 IT한국이란 생각이 생겨난다. [우리는 IT소비최강한국이라 부르지만.]

근데.. 이 사이트는 왜 티스토리메인페이지를 iframe으로 걸어서 사용하는 것일까?


Posted by aspirinirony
AllAcc?ess2007. 2. 28. 21:16
IE7과 IE6,FireFox의 차이로 인해 벌어지는 Tistory script 오류[이것 때문에 오늘도 밤새나..]

우선 차이를 알기 위한 이미지부터 보죠..
사용자 삽입 이미지

위 IE7

사용자 삽입 이미지
위 IE6

사용자 삽입 이미지
위 Firefox 2.0

위 세가지 브라우져에 같은 페이지를 로드시켰더니 이런 결과가 나왔습니다..

IE7는 동영상이 두개 IE6과 FF은 동여상이 하나 입니다.

소스라인이 살아있으며 브라우져가 저에게 장난치지 안는다면 IE7의 결과가 나와야 정상인데...요...


이 Blog의 스크립트상 정상적인 브라우져의 script 파싱의 결과로는 IE7의 경우로 나오겠지만 제가 server2003 sp1을 사용하다 보니 IE6과 FF1.5를 사용하고 있습니다..

제 컴퓨터의 경우 xp와 server를 듀얼부팅으로 사용하고 있는데 주로 server2003을 사용하지요..
어제 Flash Player script library가 신기하여 만든 동영상들인데.. 그때전 server에서 IE6와 FF1.5를 기준으로 만들었으며 만들면서 이 script의 최적화가 FF1.5라고 생각되어 FF1.5로 최적화 하여 만들었습니다.
[이유는 전체화면보기인데 IE7의 경우 전체화면보기가 가능하더군요.]

그런데 어이 없게 오늘 XP로 부팅하여 IE7으로 제 Blog를 보는 순간 우려 했던 결과가 나왔습니다.

이 script는 UFO.js를 사용해 Flash를 로드하는데 IE6에선 Tistory로 업로드한 UFO script 소스라인은 살아있되 실행되지 않는 결과가 나왔습니다. 그리하여 오브젝트로 IE전용 script와 FF전용 script를 동시에 사용하여 Post하였습니다..

만들면서 분명 결과물에 오류가 있다는 걸 알았지만 내가 모르는 무언가가 있나 싶어 그냥 급날조 소스로 얼버무려습니다.

결국 XP로 부팅하여 IE7으로 이 오류는 현실이 되었습니다.. IE6의 브라우져 옵션설정에 문제가 있는 것은 아닐까 아니면 Server2003의 보안설정으로 인해 이런 결과가 나온것일까 그런데 FF1.5도 IE6과 같은 결과가 나오는데.. 그럼하고 XP에 FF2.0을 설치하고 페이지를 로드하니 IE6,FF1.5와 같은 결과가 나왔습니다..

두 동영상이 한꺼번에 보이는 IE7같은 경우는 스크립트 실행결과상 true에 해당할수 있습니다.

왜냐하면 동영상을 동시에 두개를 뛰울수 있는 소스로 코딩했으니까요..

그런데 그 소스코드가 실행되지 않는 IE6과 FF시리즈로 인해 전 제가 모르는 무언가가 있는것이 아닌지 생각하고 있습니다.

참고로 IE6의 오프라인 상태에서 Tistory script라인을 모두 실행시키게 만들어 제가 직접 하나의 페이지를 통으로 코딩하였을 경우 두개의 동영상이 동시에 다 보입니다..

웹어플리케이션의 특성상 서버스크립트로 인해 온라인과 오프라인의 차이가 나올수 있겠지만 javascript 소스를 서버에서 replace하는 것도 아니고 소스보기로 볼 경우 해당 페이지의 javascript소스라인은 그대로 살아있습니다.. 그리고 js파일또한 그대로 로드되어 메서드를 실행하수 있는데 이건 도데체 어떤 경우로 이런 결과가 나오는 것인지 궁금하군요..

현재에도 왜 이런 결과가 나오는지 잘 이해되지 않고 있습니다.. 만약 동영상이 하나로 보인다면 동영상의 아래나 위에 하나의 .[점]이 찍혀있는것이 보일겁니다.. 그것이 FF전용 script의 흔적 입니다..

Post By Aspirinirony
Posted by aspirinirony
AllAcc?ess2007. 2. 26. 22:50

참고: http://www.alistapart.com/articles/slidingdoors


Web Standard에 기반한 CSS를 사용한 Tab 구현시

Tab 모서리를 라운드 처리하는 방법


겹치는 2개의 background image를 사용한다.

이 때 2개의 background 를 사용하기 위해

element 2개가 필요한데

tab을 표현하는 경우 <li> 와 <a> 를 활용한다.

(적절히 활용할 것이 무엇인지 경우에 따라 다를 수 있다.)


선행하는 <li>에 아래로 깔리는 이미지를

뒤따르는 <a>에 위에 덮히는 이미지를

background 로 잡아준다.


아래로 깔리는 이미지는 크기를 넉넉히 잡고

위로 덮히는 이미지는 크기를 최소화 한다.


자세한 구현 방법은 위 출처 참고


예) www.mozilla.org

사용자 삽입 이미지


Posted by aspirinirony
AllAcc?ess2007. 2. 26. 22:47
W3C 8 박스(box) 모델 Trio 홈페이지 

CSS 박스 모델은 문서계통(tree)에서 엘레멘트에 생성된 사각형 박스를 기술하고, 보이는 양식화 모델에 따라서 배치한다. 페이지 박스는 박스의 특수한 종류로, 페이지화된 메디아(paged media) 항목에 기술되어 있다.

8.1 박스(box) 규격

각 박스는 내용 지역(content area 예: 텍스트, 이미지, 등)과 선택적 주위의 패딩, 테두리마진 지역들을 갖는다; 각 지역 속성은 아래에 그 정의가 기술되었다. 다음 도표는 이 지역들이 어떻게 연관되고, 마진(margin), 테두리(border)와 패딩(padding)의 용어가 사용되는가를 설명한다:

내용(content), 패딩(padding), 테두리(border)과 마진(margin)들의 관계를 설명하는 이미지(image)   [D]

마진, 테두리와 패딩은 왼쪽, 오른쪽, 맨위과 바닥 부분들로 나뉘어 질 수 있다(예: 도표에서, 왼쪽 마진(margin)은 "LM", 오른쪽 패딩(padding)은 "RP", 맨위 테두리(border)는 "TB", 등으로).

각 네 지역들(내용, 패딩, 테두리와 마진)의 주변으로 구분되는 부분을 모서리("edge")라 부르고, 각 박스는 네개의 모서리(edge)들을 갖는다:

내용 모서리(content edge) 또는 내부 모서리(inner edge)
그 엘레멘트의 내용의 표현의 주위를 둘러 싼다.
패딩 모서리(padding edge)
박스 패딩 주위를 둘러 싼다. 만일 패딩이 0의 너비를 가지면, 그 패딩 모서리는 내용 모서리와 같다. 박스의 패딩 모서리는, 박스에 의하여 형성된, 용기블럭(containing block)의 모서리를 정의한다.
테두리 모서리(border edge)
박스 테두리의 주위를 둘러 싼다. 만일 테두리가 0의 너비를 가지면, 테두리 모서리는 그 패딩 모서리와 같다.
마진 모서리(margin edge) 또는 바깥쪽 모서리(outer edge)
박스 마진의 주위를 둘러 싼다. 만일 마진이 0의 너비를 가지면, 마진 모서리는 그 테두리 모서리와 같다.

각 모서리는 왼쪽, 오른쪽, 맨위, 바닥 모서리로 나눌 수 있다.

박스의 내용 지역에 대한 크기인 내용 너비내용 높이는 여러가지 요인에 따라 다르다: 엘레멘트가 생성하는 박스의 'width' 또는 'height' 속성을 설정하는가, 그 박스가 텍스트 또는 다른 박스를 포함하는가, 그 박스가 테이블(table)인가, 등 박스 너비와 높이들은 보이는 양식화 모델 세부사항에서 다뤘다.

박스 너비는 왼쪽과 오른쪽 마진, 테두리, 패딩과 내용 너비들의 합계로 주어진다. 박스 높이는 왼쪽과 오른쪽 마진, 테두리, 패딩과 내용 높이들의 합계로 주어진다.

박스에서 여러 지역의 배경 스타일은 다음과 같이 결정된다:

  • 내용 지역: 엘레멘트의 'background' 속성으로 생성.
  • 패딩 지역: 엘레멘트의 'background' 속성으로 생성.
  • 테두리 지역: 엘레멘트의 테두리 속성으로 생성.
  • 마진 지역: 마진들은 항상 투명하다.

8.2 마진, 패딩, 테두리들의 예제

이 예제는 마진(margin), 패딩(padding)과 테두리(border)들이 어떻게 작용하는가를 설명한다. 예제 HTML 문서에서:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>마진, 패딩, 테두리들의 예제</TITLE>
      <STYLE type="text/css">
         UL {
            background: green;
            margin: 12px 12px 12px 12px;
            padding: 3x 3px 3px 3px;
            /* 테두리들이 설정되지 않음 */
         }
         LI {
           color: black;  /* 텍스트 색상은 검정 */
           background: gray;  /* 내용, 패딩(padding)은 회색 */
           margin: 12px 12px 12px 12px;
           padding: 12px 0px 12px 12px; /* 오른쪽은 패딩 0px 임 */
           list-style: none   /* 목록 항목 앞에 그림문자들이 없슴 */
           /* 테두리들이 설정되지 않음 */
        }
        LI.withborder {
           border-style: dashed;
           border-width: medium;  /* 모든 면들에  테두리 너비를 설정 함 */
           border-color: black;
        }
     </STYLE>
  </HEAD>

  <BODY>
  <UL>
    <LI>First element of list
    <LI class="withborder">Second element of list is longer
      to illustrate wrapping.
    </UL>
  </BODY>
</HTML>

문서계통에서의 결과는(다른 관계들 중에서) 한 UL 엘레멘트에 두개의 LI 자식(child)들을 갖는다.

다음 도표의 첫번째는 이 예제에서 무엇이 생성되는가를 설명한다. 두번째는, UL 엘레멘트의 마진, 패딩과 테두리들사이의 관계와, 그 자식인 LI 엘레멘트와의 관계를 설명한다.

모체와 자식(child)의 마진(margin), 테두리(border)와 패딩(padding)들의 관계를 설명하는 이미지(image).   [D]

다음의 사항에 유의하라:

  • 각 LI 박스의 내용 너비는 위에서 아래로(top-down) 계산된다; 각 LI 박스의 용기블럭(containing block)은 그 UL 엘레멘트에 의하여 형성된다.
  • 각 LI 박스의 높이는 그 내용 높이, 더하기 맨위와 바닥 패딩, 테두리와 마진들로 주어진다. 수직 마진들은 LI 박스들사이에서 통합(collapse)됨에 유의하라.
  • LI 박스들의 오른쪽 패딩은 0의 너비로 설정되었다('padding' 속성). 두번째 설명에서 그 효과가 명백하다.
  • LI 박스의 마진들은 항상 투명하다. 따라서, UL 패딩의 배경색(녹색)과 내용 지역이 부각된다.
  • 두번째 LI 엘레멘트는 점선으로 된 테두리('border-style' 속성)를 지정한다.

8.3 마진(margin) 속성:

마진 속성은 박스의 마진 지역(margin area) 너비를 지정한다. 다른 마진 속성은 그들의 해당 면 만을 결정하는 데 반해, 'margin' 약식속성은 네면의 모든 마진들을 설정한다.

다음 값들 중 하나가 될 수 있는 속성 <margin-width> 값 타입(value type)의 정의를 참조하라:

<길이>
고정된 너비를 지정한다.
<백분율>
백분율은 생성된 박스의 용기블럭(containing block)너비에 대하여 계산된다. 이는 'margin-top''margin-bottom'에서 일치하며, 페이지 박스 높이를 참조하는 백분율 페이지 문맥 안에서는 예외이다.
auto
기능은 너비와 마진의 계산 항목을 참조하라.

마진 속성의 음수값은 허용되나, 특정 적용의 한계들이 있을 수 있다.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
값:  <margin-width> | inherit
최초값:  0
적용:  모든 엘레멘트들
전달:  안됨
백분율:  포함한 블럭(block)의 너비를 참조
메디아:  visible(보이는)

이 속성들은 박스의 맨위, 오른쪽, 바닥, 왼쪽 마진을 시계방향으로 설정한다.

예제:

H1 { margin-top: 2em }
'margin'
값:  <margin-width>{1,4} | inherit
최초값:  약식속성들에 정의되지 않음
적용:  모든 엘레멘트들
전달:  안됨
백분율:  포함한 블럭(block)의 너비를 참조
메디아:  visible(보이는)

'margin' 속성은 스타일쉬트 안에서 한 번에 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'들을 설정하는 약식속성이다.

값이 하나 만 있으면, 모든 면들에 적용된다.
값이 두개 있으면, 맨위와 바닥 마진은 첫 값으로, 오른쪽과 왼쪽 마진은 두째 값으로 설정된다.
값이 세개 있으면, 맨위는 첫 값으로, 왼쪽과 오른쪽은 두째 값으로, 바닥은 세째 값으로 설정된다.
값이 네개 있으면, 각각은 맨위, 오른쪽, 바닥, 왼쪽의 순서(시계방향)로 설정된다.

예제:

BODY { margin: 2em }  /* 모든 마진들을 2em으로 설정 */
BODY { margin: 1em 2em }  /* 맨위 & 바닥 = 1em, 오른쪽 & 왼쪽 = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

위 예제의 마지막 명령은 아래 예제와 같다:

BODY {
   margin-top: 1em;
   margin-right: 2em;
   margin-bottom: 3em;
   margin-left: 2em; /* 반대쪽(right)에서 복사 */
}

8.3.1 마진들의 통합

이 규격에서, 마진(margin)들의 통합(collapsing)의 표현은, 두개이상의 박스(서로 옆에 있거나 네스트된)들의 인접 마진(이들을 분리하는 패딩이나 테두리 지역이 아닌)들이 통합되어, 단일한 마진을 형성한다.

CSS2에서 수평 마진들은 절대로 통합되지 않는다.

수직 마진들은 박스들사이에서 통합될 수 있다:

  • 정상 흐름(normal flow)에서 블럭(block) 박스들의 두개이상의 인접 수직 마진들은 통합된다 그 결과 마진 너비는 인접 마진 너비들의 최대로 된다. 음수 마진의 경우, 음수 인접 마진의 절대값 최대를 양수 인접 마진들의 최대로 부터 뺀다. 만일 양수 마진이 없으면, 음수 인접 마진의 절대 값 최대를 0(zero)로 부터 뺀다.
  • 유동된(floated) 박스와 다른 박스의 수직 마진들사이에서는 통합이 이루어 지지 않는다.
  • 절대적으로와 상대적으로 위치된 박스의 마진들은 통합(collapse)되지 않는다.

통합된 마진의 설명은 마진, 패딩, 테두리의 예제를 참조하라.

8.4 패딩(padding) 속성:

패딩 속성들은 박스의 패딩 지역 너비를 지정한다. 제작자가 패딩 속성으로 그 해당 면 만을 설정하는데 반해, 약식속성 'padding'은 한 번의 설정으로 모든 네면들의 패딩을 설정한다.

여기서 정의된 속성은 값 타입 <padding-width>를 참조하며, 다음 중 한 값을 가질 수 있다:

<길이>
고정된 너비를 지정한다.
<백분율>
백분율은 생성된 박스의 용기블럭너비에 대하여, 또한 'padding-top''padding-bottom'에 대해서도 계산된다.

마진 속성과는 달리, 패딩 값은 음수값이 될 수는 없다. 마진 속성과 같이, 패딩의 백분율 값은 생성된 박스의 용기블럭(containing block) 너비의 속성들을 참조한다.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
값:  <padding-width> | inherit
최초값:  0
적용:  모든 엘레멘트들
전달:  안됨
백분율:  포함한 블럭의 너비를 참조
메디아:  visible(보이는)

이 속성은 박스의 맨위, 오른쪽, 바닥과 왼쪽 패딩을 시계방향으로 설정한다.

예제:

BLOCKQUOTE { padding-top: 0.3em }
'padding'
값:  <padding-width>{1,4} | inherit
최초값:  약식속성들에 정의되지 않음
적용:  모든 엘레멘트들
전달:  안됨
백분율:  포함한 블럭의 너비를 참조
메디아:  visible(보이는)

'padding' 속성은 스타일쉬트에서 한번에 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'을 설정하는 약식속성이다.

값이 하나 만 있으면, 모든 면들에 적용된다.
값이 두개이면, 맨위와 바닥 패딩은 첫 값으로, 오른쪽과 왼쪽 패딩은 두째 값으로 설정된다.
값이 세개이면, 맨위는 첫 값으로, 왼쪽과 오른쪽은 두째 값으로, 바닥은 세째 값으로 설정된다.
값이 네개이면, 각각은 맨위, 오른쪽, 바닥, 왼쪽의 순서(시계방향)로 설정된다.

패딩 지역의 표면 색상 또는 이미지는 'background' 속성를 통하여 지정한다:

예제:

H1 {
   background: white;
   padding: 1em 2em;
}

위 예제는 수직 패딩('padding-top''padding-bottom')을 '1em'으로, 수평 패딩('padding-right''padding-left')를 '2em'으로 설정한다. 단위 'em'은 그 엘레멘트의 글꼴 크기(font size)에 상대적이고, '1em'은 그 사용 글꼴의 크기와 같다.

8.5 테두리(border) 속성

테두리 속성들은 박스의 테두리 지역 너비, 색상 스타일을 지정한다. 이 속성은 모든 엘레멘트에 적용된다.

주석. 특히 HTML에서, 사용도구들은, 일반적인("ordinary") 엘레멘트들에서와는 다르게, 일부 엘레멘트(예: button, menu, 등)에서는, 테두리들을 읽어 표현할 수 있다.

8.5.1 테두리 너비:

테두리 너비 속성은 테두리 지역의 너비를 지정한다, 이 항목에서 정의된 속성은 값 타입 <border-width>를 참조하며, 다음 중 하나의 값을 갖는다:

thin
얇은(thin) 테두리.
medium
보통(medium) 테두리.
thick
두꺼운(thick) 테두리.
<길이>
테두리의 두께는 명시적인 값이다. 명시적 테두리 너비는 음수가 될 수 없다.

앞의 세가지 값들의 해석은 사용도구에 따라 다르나, 다음 관계를 준수하여야 한다:

'thin' <='medium' <= 'thick'.

나아가, 이 너비들은 한 문서를 통하여 균일하여야 한다.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
값:  <border-width> | inherit
최초값:  medium
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

이 속성들은 박스의 맨위, 오른쪽, 바닥, 왼쪽 테두리 너비를 시계방향으로 설정한다.

'border-width'
값:  <border-width>{1,4} | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

이 속성은 스타일쉬트에서 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'를 한번에 설정하는 약식속성이다.

값이 하나 만 있으면, 모든 면들에 적용된다.
값이 두개이면, 맨위와 바닥 테두리는 첫 값으로, 오른쪽과 왼쪽 테두리는 두째 값으로 설정된다.
값이 세개이면, 맨위는 첫 값으로, 왼쪽과 오른쪽은 두째 값으로, 바닥은 세째 값으로 설정된다.
값이 네개이면, 각각은 맨위, 오른쪽, 바닥, 왼쪽의 순서(시계방향)로 설정된다.

예제:

아래 예제에서, 주석(comment)들은 결과적인 맨위, 오른쪽, 바닥, 왼쪽 테두리의 너비를 순서대로 나타낸다:

H1 { border-width: thin }  /* thin thin thin thin */
H1 { border-width: thin thick }  /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thick */

8.5.2 테두리(border) 색상:

테두리 색상 속성은 박스의 테두리 색상을 지정한다.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
값:  <색상> | inherit
최초값:  그 'color' 속성값
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)
'border-color'
값:  <색상>{1,4} | transparent | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

'border-color'는 네 테두리들의 색상 속성을 지정하며, 값들은 다음의 의미를 갖는다:

<색상>
색상값을 지정한다.
transparent
이 테두리는 너비를 가질 수 있지 만 투명(transparent)하다.

'border-color' 속성은 네가지 값의 종류들 중 한가지를 가질 수 있고, 그 값들은, 'border-width'에서와 같은 방식으로, 다른 면들의 색상들을 설정한다.

엘레멘트의 테두리 색상이 테두리 속성에서 지정되지 않았으면, 사용도구들은, 테두리 색상의 계산된 값과 같이, 그 엘레멘트의 'color' 속성값을 사용하여야 한다.

예제:

이 예제에서, 테두리는 두꺼운 검정 실선이 된다.

P {
   color: black;
   background: white;
   border: solid;
}

8.5.3 테두리(border) 스타일:

이 테두리 스타일 속성들은 박스 테두리 줄의 스타일(solid, double, dashed, 등)을 지정한다. 이 항목에서 정의된 속성은 <border-style> 값 타입을 참조하며, 다음 중 하나가 될 수 있다:

none
테두리가 없슴. 이 값은 'border-width'의 계산된 값를 강제로 '0'으로 만든다.
hidden
'none'과 같으나, 테이블(table) 엘레멘트테두리의 해상도 마찰(conflict resolution)에서는 예외이다.
dotted
테두리가 점선이다.
dashed
테두리가 짧은 선 조각들의 연속이다.
solid
테두리는 단일한 줄이다.
double
테두리가 두개의 실선(solid) 줄로 된다. 두 줄들의 합계와 그 사이의 공간은 'border-width'의 값과 같다.
groove
테두리가 창(canvas)에서 조각(파진)된 것처럼 보인다.
ridge
'grove'의 반대: 테두리가 창에서 튀어나온 것처럼 보인다.
inset
테두리가 창에서 전체 박스가 깔려있는(embed) 것처럼 보인다.
outset
'inset'의 반대: 테두리가 창에서 전체 박스가 튀어나온 것처럼 보인다.

모든 테두리들은 박스 배경의 맨위 그려진다. 'groove', 'ridge', 'inset', 'outset' 값들에 따라 그려진 테두리의 색상은 그 엘레멘트의 'color' 속성에 따라 다르다.

규격에 부합하는 HTML 사용도구은 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset'들을 'solid'로 해석해도 된다.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
값:  <border-style> | inherit
최초값:  none
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)
'border-style'
값:  <border-style>{1,4} | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

'border-style' 속성은 네 테두리의 스타일을 설정한다. 이는 네가지 값 중의 하나가 될 수 있으며, 그 값들은, 위에 기술된 'border-width'에서와 같이 다른 면들을 설정한다.

예제:

#xy34 { border-style: solid dotted }

위 예제에서, 수평 테두리들은 'solid'가 되고, 수직 테두리들은 'dotted'가 된다.

테두리 스타일의 최초값이 'none' 이므로, 테두리 스타일이 설정되지 않는 한, 테두리는 보이지 않는다.

8.5.4 테두리(border) 약식속성:

'border-top', 'border-right', 'border-bottom', 'border-left'
값:  [ <'border-top-width'> || <'border-style'> || <색상> ] | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

이는 박스 맨위, 오른쪽, 바닥, 왼쪽 테두리의 너비, 스타일, 색상을 설정하는 약식속성이다.

예제:

H1 { border-bottom: thick solid red }

위 명령은 H1 엘레멘트의 아래쪽 테두리의 너비, 스타일, 색상를 설정한다. 생략된 값은 그들의 최초값들로 설정된다. 다음 명령은 테두리 색상을 지정하지 않았으므로, 이 테두리는 'color' 속성에 의하여 지정된 색상을 갖는다:

H1 { border-bottom: thick solid }
'border'
값:  [ <'border-width'> || <'border-style'> || <색상> ] | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

'border' 속성은 박스의 모든 네 테두리들에 같은 너비, 색상, 스타일을 설정하는 약식속성이다. 'margin', 'padding' 속성의 약식 명령들과는 달리, 이 'border' 속성은 네 테두리들에 다른 값들을 설정할 수 없다. 그렇게 하기 위하여서는, 하나이상의 다른 테두리 속성들을 사용하여야 한다.

예제:

예를 들어, 아래 첫번째 명령은 그 다음에 있는 네개의 명령들에 의하여 설정된 것과 같다:

P { border: solid red }

P {
   border-top: solid red;
   border-right: solid red;
   border-bottom: solid red;
   border-left: solid red
}

이 속성들은, 어느 정도 기능성이 중첩되어 있어 어떤 명령들을 어떤 순서로 지정하는가는 중요하다.

예제:

이 예제를 보자:

BLOCKQUOTE {
   border-color: red;
   border-left: double;
   color: black
}

위 예제에서, 왼쪽 테두리의 색상은 검정이며, 다른 테두리들은 적색이다. 이는 'border-left'가 너비, 스타일, 색상을 설정하였기 때문이다. 'border-left' 속성에 의하여 색상값이 주어지지 않았으므로, 그 'color' 속성으로 부터 가져 온다. 'color' 속성이 'border-left' 속성 다음에 설정되지 않았기 때문이다.


페이지 맨위로맨위Trio 홈페이지 문서( http://trio.co.kr/webrefer/css2/box.html#box-dimensions)는 자유로이 연결 사용이 가능함.
(수정일 12/16/2006 19:28:44)

Posted by aspirinirony
AllAcc?ess2007. 2. 10. 01:42
난 툴로 layout을 잡지 않고 일일이 소스를 만들어간다..

비주얼 스튜디오로 layout을 잡아도 되지만 왠지.. 그냥 하는게 버릇이 되어나서 일일이 소스 치고 확인하고.. 머리굴리고.. 담배피고..

처음엔  그냥 notepad에서 하다가.. editplus로 바꾸었는데.. 이게 브라우져가 IE전용이라서 가끔 그냥 생각없이 지나치면 fox에서 개털난다..

난 왠만해선 layout을 설정할때 position을 주지 않는다.

특정 개체외엔 주지 않는것은 거의 대부분이겠지만 아니면 툴로 만들어 사용했을 경우 자동으로 position이 주어지지만 나같이 일일이 손으로 치고 확인하는 놈에겐 position은 짜증나는것이다..

뭐 absolute야 상관 없겠지만 이것이 상속되는 layer에서 일어나는 일이 허다해서 두 브라우져를 생각할때 너무 힘들다..

특히 지금 만들고 있는 것은 모든것이 position이며 width값이 %이다.. %로 width값을 모두 주는 것은 아니지만.. layout에서 가장신경쓰이는 부분인 클라이언트의 디스플레이값에 반응하는 layout의 설정이다..

정적이며 일부분과 일정 개체에 동적 데이터를 주입시키는 ajax도 있고 script도 있지만 난.. AJAX 이라는 인터페이스를 FLASH와 동등한 느낌을 가지는 것이라..

layer의 동적인 생성에서 position의 상속과 주위의 layer들이 반응하는  부분을 일일이 다 컨트롤하려니 머리 터진다..

IE는 그래도 익숙하니 괜찮아 문제는 NS이다..
relative와 absolute, fixed IE와 NS의 상속개념이 틀리며.. margin과 padding의 개념도 틀리고 %라는 개념 또한 틀리다..

IE는 layer한 개체에 %를 주면 %에 충실하게 반능한다.. 그런데 NS는 %를 주면 이 %를 이해하려든다..
우선 비어있는 페이지에 달랑하나의 layer개체에 position absoute 값으로 Top%를 주면 두 브라우져모두 %에 반능한다..

문제는 개체속의 개체의 %값에 해석이다.. relative에 상속되는 absolute에서 %를 주면 두 부라우져가 다른 해석을 한다는것이 문제이다.. 우선 IE는 %에 반응하지만 top 90%를 준다고 하면 화면아래로 살아지는데 있데 스크롤바가 반능이 없다는 것이다.. 이론이론..

그리고 NS는 %를 이해하려는것인지 상속개체의 속성값에 %를 맞추는데 이건 종잡기가 힘들다..
누구는 px를 쓸지 몰라서 안쓰는지.. 꼭 %를 써야하며 써야 다른 부수적인 부분에서 쉽게 만들어갈수있는데.. 두 부라우져가 해석하는 것이 틀려 나름데로 고민하다..

해결해버렸다.. 두부라우져를 인식할수 있는 styleshoot 주석을 import시키는 것 이때 주는 NS이며 IE가 필요한것은 IE전용 CSS로 사용했다. ... 아이고 머리야..




'AllAcc?ess' 카테고리의 다른 글

Sliding Doors of CSS - Douglas Bowman  (0) 2007.02.26
CSS 박스(box) 모델  (0) 2007.02.26
Flash [No.01] 모양트윈  (0) 2007.02.10
Flash를 시작하며  (0) 2007.02.09
CSS Design libary [ display : block, inline, none ]  (0) 2007.02.04
Posted by aspirinirony
AllAcc?ess2007. 2. 10. 01:00

동영상강의 보고 만들어본 모양트윈 ..

신기하다..

vml 스크립트 열라 짜야하는데..

그래픽툴로 만들어내다니..

근데 언제 flash 스크립트로 들어가나..




Posted by aspirinirony
AllAcc?ess2007. 2. 9. 04:11

web을 사용하고 net을 만들면서 수많은 컨포넌트를 접해보았지만 알고 있어야할것을 알지 못한것 같아 Flash를 시작한다..

프로그래밍소스에 구역질이 날만큼의 < >을 모니터에 넣어 왔다.

그런데 이제 다시 Flash의 영역으로 들어선다..

당연히 script소스가 있겠지 수많은 objcet에 class에 method에 속성까지 익혀야 하나..

C에서 부터 시작하여 html javascript asp C# asp.net xml sql 이젠 flash에 photoshoop까지 죽같다..
난 MFC도 모르는데..
php는 소스도 못봤고 리눅스의 인터페스가 어떻게 되는지도 알지도 못한다..

그저 window에서 모든걸 만들어낸다..

어쨌든 나의 첫작품의 flash..


어라 원래 이런건가 프레임이 잡히고 있네...
앞으로 감기 뒤로 감기..라니..

Posted by aspirinirony
AllAcc?ess2007. 2. 4. 00:41
IE와 Fox를 사용하면서 알게된 표준적 코드사용에서 CSS부분 또한 많은 차이가 있음을 알았고 그로인해 기존의 지식들에 새로운 추가적 정보들을 끼워넣어야 하는 상황에 이르렇다.

ASP,net을 하면서 visual studio를 사용하니 표준적 코드를 사용하는 것을 알고 하는지 코드가 자동생성되어 사용하는것인지 모를정도로 나의 지식을 형편없었다.. 처음으로 돌아가는 것은 내가 바보로 다시 돌아간다는 뜻인 것같다... 새롭게 시작한다는 것도 이상하다.. 돌아갈곳이 있는 곳도 아니지만..

그저 이제 또 걸어야지 라는 생각으로 해봐야지...

CSS Design 에서 display의 역활은 중요하고 할수있겠지..

none이되면 없어져 버리니까..
block이되면 나타나고.. 그런데.. inline 이것은 무엇일까...

div 와 span의 차이 tr과 td의 차이 세로의 나열과 가로의 나열 그러면 어떻게 사용할까?

우선 사용해보자..

layer를 준비하고 소소한 style을 적용할 준비를 하고..

<div style="display:;">block</div>
<div style="display:;">inline</div>
<div style="display:;">none</div>

이제 스타일 적용. all block

block
inline
none

당연 이렇게 나온다..

div 이기에 이렇게 나온다.. 그럼 all inline으로

block
inline
none

span이 아니다. div이다.. 모두 display를 inline으로 주니 span처럼 같은 line에서 뿌린다..
단어의 뜻만큼 inline 이다..
 none은 안한다..

해봐야 볼수없으니..

그럼 block에만 block을 준다.

block
inline
none

block에 display block을 하니 block에서 줄을 바꾸어 다음 소스를 뿌린다.

그럼 block 과 none에 block을 준다.

block
inline
none

생각해보면 inline을 선언하면 다음소스를 같은 라인으로 뿌려야 하지만 다음 소스의 display가 block이니 block 되어 버렸다.

그런데 중요한 사실은 display의 선언에서 inline의 설정이다. inline 다음의 dispaly가 없다면 어떻게 될까

block
inline
무설정
inline
무설정

무설정 즉 style 설정자체가 없다면 본래의 tag 속성되로 뿌려진다. inline다음에 span이 오면 같은 라인에 뿌려지지만 div가 오면 다음라인으로 내려간다...

display의 설정으로 모두 inline으로 만든다면 어떻게 될까?

block
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline


같은 라인에서 계속 뻗어나가 뿌려진다...

이로써 inline 속성을 잘 알아 보았다..




Posted by aspirinirony