Category: HTML & CSS

HTML과 CSS에 관련된 자료

26
2월
2009

모바일을 위한 DTD의 종류와 특징

모바일 기기는 다음과 같은 특성을 가집니다. 적은 메모리 용량, 적은 저장 공간, 작은 스크린 사이즈, 느린 CPU, 입력방법의 제한, 전원(밧데리)의 시간 제한 초기의 모바일 기기들은 웹을 사용하기에는 성능이나 메모리, 스크린사이즈가 매우 조악하였기 때문에 모바일 기기에 특화된 언어로 WML(wireless Markup Language)를 사용했습니다. 현재 쓰이는 HTML 과는 차이가 있으며, XML기반으로 만들어졌기 때문에 문법 검사에 매우 엄격합니다. Deck, Card 라는 특이한 개념(페이지와 유사하여, 하나의 WML문서에 여러개의 card를 만들어 여러페이지의 문서를 만들 수 있음)을 제외하면 사용되는 태그는 HTML 과 유사한 면이 있지만, 문법검사가 XHTML과 비슷하여 xml 문법을 따르기 때문에 문법 오류가 자동 수정되지 않습니다....

19
6월
2008

IE6 의 CSS 다중선택자 버그에 대해

CSS에서 사용하는 다중 선택자(Multi Class)란 동일 엘리먼트에 여러개의 선택자(id, class)를 동시에 적용하기 위한 목적으로 여러개의 선택자를 사용하는 것을 말합니다. CSS1에서 선택자의 개념이 사용된 후, CSS2에서 다중 선택자가 추가되어 사용되고 있는데요, CSS를 사용해 웹사이트를 개발하다 보면 다중선택자는 매우 편리한 존재임을 알 수 있습니다. 위의 코드는 다중 선택자를 적용하여 foo 클래스와 bar 클래스의 속성을 하나의 엘리먼트에 동시에 적용한 예제입니다. 또한 클래스를 붙여서 선언하게 되면 평소에는 적용되지 않다가 두 클래스가 동시에 적용될 경우에만 별도의 효과를 주는 것도 가능합니다.이렇게 여러 개의 클래스를 하나의 엘리먼트에 적용하여 서로 다른 효과를 동시에 적용할 수 있고, 이 다중...

01
4월
2008

나를 미치게 하는 PNG

인터넷 브라우저에서 사용할 수 있는 이미지는 아시다시피 GIF, JPG, PNG 가 있습니다. 그중, 웹에서 사용할 수 있는 이미지로서의 PNG 는 GIF 나 JPG 에 비해 많은 장점을 가지고 있습니다. PNG 는 “Portable Network Graphics” 의 약자이며, 프리웨어이고, JPG 와는 달리 무손실압축(원본과 완전히 같음)을 지원하며, 24bit(1670만) 컬러를 구현합니다. 무엇보다도 알파채널, 즉 반투명을 지원한다는 큰 장점이 있죠. 단점이라면, GIF 처럼 애니메이션을 지원하지 못한다는 것과, 파일 크기가 다소 크다는 점이지만, 큰 단점은 아닙니다. (사실, 구버전의 포토샵에서 PNG로 저장할 때 용량이 비정상적으로 커지는 버그 때문에 PNG 에 대한 편견이 부각된 점도 있습니다.) PNG References...

27
2월
2008

웹브라우저를 위한 웹표준 테스트 Acid test

최근들어 MicroSoft 에서 개발중인 Internet Explorer 8 이 Acid2 test 를 통과했다던가, 새로운 웹표준 테스트로 발표된 Acid3 가 웹브라우저 시장에 좌절을 안겨주고 있다는 소식이 들려오고 있습니다. 특히 IE8 이 Acid2를 통과했다는 소식은 이제 IE도 악명높은 IE6 의 비정상적인 렌더링을 벗어나 웹표준을 잘 지킬 수 있지 않느냐 하는 희망을 주기도 했는데요… 그런데 과연 이 Acid 테스트라는 것은 무엇일까요? Acid 테스트란 웹브라우저들이 웹 표준을 어느정도로 지원하면서 렌더링을 하는지 측정할 수 있도록 작성된 예제 페이지를 말합니다. 단 한장의 페이지에서 수많은 웹표준 스펙을 포함하고 있으며, 그래픽이 얼마나 잘 표현되는지의 결과를 통해 해당 브라우저의 웹표준...

08
11월
2007

CSS의 display 속성

CSS의 display 속성은 해당 엘레멘트가 화면에 어떻게 보여지는지를 결정하는 역할을 합니다. display 속성의 값은 다 따지면 19가지나 되지만, 실제로 자주 쓰이는 것은 inline과 block, inline-block, none 값이며, 이외의 것은 브라우저에서 지원하지 않는 것도 많기 때문에 불안정해서 사용되지 않는다고 하네요. block 블록박스로 만든다. inline 인라인 박스로 만든다. inline-block 블록박스로 만들어지지만, 인라인 박스처럼 배치된다. (CSS2.1 권고후보에 추가) none 박스를 만들지 않으며 시각적으로 완전히 보이지 않는다. inherit 상위 요소의 display속성을 상속받는다. table 블록레벨의 표로 만든다. (table) inline-table 인라인레벨의 표로 만든다. (table) table-row 행으로 만든다 (tr 기본 속성) table-row-group 본체 행 그룹으로 만든다. (tbody...

16
10월
2007

CSS 박스 모델에 대해

CSS 에서 가장 중요한 개념 중 하나가 박스모델입니다. 박스모델의 개념을 이해함으로써 각각의 엘리먼트를 문서에 배치하는 원리를 알 수 있기 때문입니다. 그리고 이를 응용하여 전체 레이아웃을 정의할 수도 있고, 콘텐츠를 디자인할 수도 있기 때문에 CSS를 통한 디자인을 하려면 박스모델을 이해하는 것이 필수라고 할 수 있습니다. 우선… 첫번째로 이해해야 할 명제는 “모든 엘리먼트, 태그는 박스 모델이다” 라는 것입니다. <br>, <b> 같은 표현을 위한 태그를 제외하면, 자주 사용하는 <div>, <span>, <table>, <p> 등의 태그들은 기본적으로 사각형(박스) 형태로 되어 있습니다. 두번째는 “contents, padding, border, margin” 입니다. 모든 박스모델은 이러한 속성을 가지고 있고 이 순서대로...

20
9월
2007

CSS의 em 단위

CSS에서는 글자 폰트 크기나 width, height 등의 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. (pt, px, em, ex, %) 대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px단위(모니터의 픽셀)로 인식하여 렌더링을 하게 되지만, 현재 표준은 단위를 항상 명시해주는 것입니다. (0 제외) 대부분 HTML 개발 시에는 px 단위를 사용하고 폰트 크기에는 pt, px 단위를 혼용하여 사용하고는 하는데, em 이라는 단위를 사용하자는 움직임도 있는 것 같습니다. pt, px 가 절대적인 크기를 나타내는데 반해서, em, ex, % 는 상위 엘레멘트에 대한 상대적인 크기를 나타냅니다. em, ex 단위의 장점이라면 웹 브라우저 메뉴에서 글꼴 크기를 변화시켜...

12
9월
2007

이젠 CSS도 프레임워크 등장? BluePrint 0.5

최근 웹 2.0 시대에 들어서 RIA가 대세가 됨에 따라… 마치 플래시와 같은 동적인 UI를 구현하기 위해서 자바스크립트 개발의 중요성이 많이 부각되었습니다. 이러한 개발을 도와주는 도구로 각종 컴포넌트와 편리한 명령어를 담은 자바스크립트 프레임워크가 많이 개발되어 있습니다. 잘 알려진 자바스크립트 프레임워크로는 Prototype.js, Dojo Toolkit, MooTools, jQuery 등이 사용되고 있죠. 그런데… 이러한 프레임워크라는 개념이 CSS에도 도입이 된 것 같습니다. 저도 나름 새로운 사이트를 들어갈 때나, 프리랜스로 작업할 때 CSS의 기초로 사용하는 파일을 가지고 있구요.. 이를 바탕으로 작업을 진행합니다. 이것의 확장된 개념이라고 할 수도 있을까요? 그와 더불어 디자이너 입장에서도 디자인을 하면서 CSS를 더 잘...

19
8월
2007

XHTML Cheat Sheet – ver1.03

XHTML을 통한 UI개발 시에 참고할 수 있는 Cheat Sheet 입니다. 사무실이나 집에서 책상 벽에 붙여놓고 필요할 때 참고하면서 사용하기에도 좋은 듯. (그리고 이런 것 붙여놓으면 폼나잖아요~? ㅋㅋ) XHTML 상에서 사용하는 태그와 태그별로 사용가능한 속성을 표 형태로 표기한 문서이구요, 2페이지입니다. 예를 들어… <div> 태그의 경우 generic container(block) 이라는 설명과 함께, %attrs, align* 이라는 속성을 넣을 수 있는 것으로 참고할 수 있죠. 표 옆에서 %attrs 는 %coreattrs, %i18n, %events 세가지로 되어 있는데, id/class/style/title, xml:lang/lang/dir, onclick 의 속성을 포함할 수 있다는 뜻이겠네요. align* 으로 표기된 것은 2페이지를 보시면 아시겠지만, align 속성은 폐지되었지만 Transitional...

16
8월
2007

CSS 핵

브라우저마다 HTML렌더링하는 방식이 조금씩 차이가 나고, 때로는 버그가 존재하는 관계로(망할 IE) 모든 CSS 코드가 모든 웹브라우저에서 똑같이 보이지 않습니다. 따라서 이러한 특성을 이용하여 특정 브라우저를 제외하거나, 특정 브라우저에서만 CSS를 적용하는 기법을 CSS 핵(Hack) 이라고 부르죠… 그래서 문법적으로 맞지 않거나, 특정 브라우저에만 적용되는 비표준인 경우가 많기 때문에 이러한 CSS핵은 어쩔 수 없는 경우가 아니면 사용하지 않아야 합니다. 또한, 단순히 눈앞의 문제만을 해결하기 위해 핵을 사용하면 나중에 페이지를 수정하거나 브라우저의 버전이 올라갈 때에 문제가 생기는 경우도 있구요. CSS핵은 이런게 있다 정도로 알아두고, CSS핵을 사용하기 이전에 근본적으로 디자인을 수정하거나 다른 표준 태그로 해결하는게...