wystan's tales - Article

위스턴의 작은 이야기들
블로그 "wystan's tales - Article"에 대한 검색결과 16
  •  [비공개] [JavaScript] 굉장한 자바스크립트 강좌(영문) 소개

    굉장히 좋은 자바스크립트 강좌가 있어 소개합니다. 영문이라는 한계가 있지만 “굉장히”라는 수식어가 모자랄 만큼 좋은 글입니다. 이렇게 좋은 글이 많이 알려지지 않은 건 글 제목이 자바스크립트가 아닌 “ECMAScript”여서가 아닐까 하는데요. ECMAScript는 자바스크립트의 기반이 되는 ..
  •  [비공개] [CSS3] 미디어 쿼리(Media Query)의 only 키워드

    CSS3 미디어 쿼리 모듈은 웹의 미래에 있어서 굉장히 중요한 의미를 갖습니다. 미디어의 종류(type)별로만 스타일을 다르게 줄 수 있었던 이전과는 달리 미디어 각각의 특성(feature)에 맞춰서 스타일에 변화를 줄 수 있기 때문이지요. 그 배경에는 웹에 접근할 수 있는 장치의 다양성이 점점 커지는 현상..
  •  [비공개] CSS 이야기: position, float, display 속성간의 관계

    CSS의 관점에서, HTML 문서는 크고 작은 여러 개의 사각형 박스로 구성됩니다. 그 중에는 요소에 의해서 만들어지는 박스도 있고, 자동적으로 만들어지는 박스(익명(anonymous) 박스)도 있지만, 근본적으로 “박스”라는 것에는 차이가 없습니다. CSS를 지원하는 사용자 에이전트는 이렇게 만들어진 박스를 ..
  •  [비공개] CSS 이야기: position, float, display 속성간의 관계

    CSS의 관점에서, HTML 문서는 크고 작은 여러 개의 사각형 박스로 구성됩니다. 그 중에는 요소에 의해서 만들어지는 박스도 있고, 자동적으로 만들어지는 박스(익명(anonymous) 박스)도 있지만, 근본적으로 “박스”라는 것에는 차이가 없습니다. CSS를 지원하는 사용자 에이전트는 이렇게 만들어진 박스를 ..
  •  [비공개] CSS 이야기: overflow 속성의 float 해제 효과

    예전에 float을 제거하는 방법이라는 글에서 overflow 속성을 이용하는 float 해제 방법을 다뤘습니다. 그 내용을 아래에 일부 인용하겠습니다. “만약 width만 지정한 상태에서 overflow: hidden;을 적용하면 박스가 내용물의 크기만큼 아래로 늘어나니까요. 이 때 박스 안에 있는 float된 요소의 높이까지도..
  •  [비공개] CSS 이야기: 마진 병합(collapsing margins)

    CSS를 이용해서 블록 레벨 요소를 배치하다보면 간혹 수직 방향으로 마진이 적용되지 않을 때가 있습니다. 이런 현상은 대부분 CSS의 중요한 레이아웃 모델 중 하나인 마진 병합(collapsing margins) 때문에 발생하는데 브라우저에 따라서 다르게 나타나는 경우가 많기 때문에 크로스 브라우징에 어려움을 주..
  •  [비공개] CSS 이야기: CSS 2.1과 2의 관계

    현재 공식적인 CSS 최종 권고안은 1998년에 발표된 CSS 2이고, 이를 보완한 CSS 2 리비전 1(CSS 2.1)이 2007년 권고안 후보(CR: Candidated Recommendation)로서 발표되었습니다. 즉, CSS 2.1은 아직 최종 권고안이 아니고, 최종 권고안이 되기 위한 과정을 밟고 있는 단계지요. 그럼 한 가지 질문을 던져보겠습니다. 과연 CS..
  •  [비공개] CSS 이야기: CSS 2.1과 2의 관계

    현재 공식적인 CSS 최종 권고안은 1998년에 발표된 CSS 2이고, 이를 보완한 CSS 2 리비전 1(CSS 2.1)이 2007년 권고안 후보(CR: Candidated Recommendation)로서 발표되었습니다. 즉, CSS 2.1은 아직 최종 권고안이 아니고, 최종 권고안이 되기 위한 과정을 밟고 있는 단계지요. 그럼 한 가지 질문을 던져보겠습니다. 과연 CS..
  •  [비공개] CSS 이야기: “규격을 따른다”라는 표현의 의미(conformance)

    W3C 권고안에서 자주 사용되는 용어 중 하나가 “규격을 따르는 사용자 에이전트(Conforming User Agent)”입니다. 이렇게 어떤 규격을 “따른다”거나 규격에 “부합한다”라는 의미로 사용되는 단어가 “conformance”인데 conformance에 대한 W3C의 정의는 다음과 같습니다. conformance : 표준(standard)이나 지침(gu..
  •  [비공개] CSS 이야기: 속성 값 처리 방식

    사용자 에이전트는 CSS를 이용해서 스타일을 요소에 적용시킵니다. 이렇게 스타일이 최종적으로 적용될 때까지 속성 값은 최대 네 번 처리되는데 CSS 2.1 권고안은 그 과정을 값 지정, 캐스케이딩, 상속을 다루는 6장에서 설명하고 있습니다. 이 과정에서 핵심이 되는 것은 “지정된 값(specified values)”, “..
  •  [비공개] CSS 이야기: 속성 정의(property definitions)

    W3C가 제정한 CSS 권고안(규격)의 핵심이 바로 속성 정의와 그에 따른 설명입니다. 각각의 속성들이 어떻게 해석되고 적용되는지를 알기 위해서 속성 정의를 살펴볼 때가 많은데 CSS 권고안이 기본적으로 CSS를 작성하는 웹 제작자와 CSS를 구현하는 사용자 에이전트 제작자 모두를 대상으로 작성되었기 때..
  •  [비공개] 플래시 대체 컨텐츠와 noscript 요소

    adobe사의 플래시는 웹 페이지에 강력한 멀티미디어 효과를 불어넣을 수 있게 해주는 강력한 도구입니다. 하지만 기본적으로 “시각”적인 인지를 바탕으로 하기 때문에 비시각적인 환경에서는 접근성을 떨어뜨리는 원인이 되기도 합니다. 물론, 플래시 자체적으로 접근성 향상을 위한 대체 텍..
  •  [비공개] 인터넷 익스플로러 8의 레이아웃 모델

    마이크로소프트(이하 MS)가 인터넷 익스플로러(이하 IE) 8 베타1을 공개했다는 소식을 듣고 간단한 테스트를 해봤습니다. 웹 페이지 제작자의 입장에서 이전 버전과의 가장 큰 차이점은 달라진 레이아웃 모델(정확히는 CSS의 “시각적인 서식 모델(Visual Formatting Model)”)이라고 생각하는데 이 부분에 관한 ..
  •  [비공개] 인터넷 익스플로러 8의 레이아웃 모델

    마이크로소프트(이하 MS)가 인터넷 익스플로러(이하 IE) 8 베타1을 공개했다는 소식을 듣고 간단한 테스트를 해봤습니다. 웹 페이지 제작자의 입장에서 이전 버전과의 가장 큰 차이점은 달라진 레이아웃 모델(정확히는 CSS의 “시각적인 서식 모델(Visual Formatting Model)”)이라고 생각하는데 이 부분에 관한 ..
  •  [비공개] DOM 스크립트: 이미지, 텍스트 스크롤러

    scrollObj는 자바스크립트의 문서 객체 모델(DOM)을 이용해서 이미지나 텍스트에 스크롤 효과를 주는 오브젝트(객체)입니다. 비슷한 효과를 내는 함수나 오브젝트들이 자바스크립트 상의 소스를 document.write 메소드로 화면상에 출력하는 것과 달리 HTML 소스를 그대로 이용하므로 자바스크립트를 사용할 수 ..