CSS의 display 속성은 해당 엘레멘트가 화면에 어떻게 보여지는지를 결정하는 역할을 합니다. display 속성의 값은 다 따지면 19가지나 되지만, 실제로 자주 쓰이는 것은 inline과 block, inline-block, none 값이며, 이외의 것은 브라우저에서 지원하지 않는 것도 많기 때문에 불안정해서 사용되지 않는다고 하네요. block : 블록박스로 만든다. inline : 인라인 박스로 만든다. inline-block : 블록박스로 만들어지지만, 인라인 박스처럼 배치된다. (CSS2.1 권고후보에 추가) none : 박스를 만들지 않으며 시각적으로 완전히 보이지 않는다. inherit : 상위 요소의 display속성을 상속받는다. table : 블록레벨의 표로 만든다. (table)..
CSS 에서 가장 중요한 개념 중 하나가 박스모델입니다. 박스모델의 개념을 이해함으로써 각각의 엘리먼트를 문서에 배치하는 원리를 알 수 있기 때문입니다. 그리고 이를 응용하여 전체 레이아웃을 정의할 수도 있고, 콘텐츠를 디자인할 수도 있기 때문에 CSS를 통한 디자인을 하려면 박스모델을 이해하는 것이 필수라고 할 수 있습니다. 우선... 첫번째로 이해해야 할 명제는 "모든 엘리먼트, 태그는 박스 모델이다" 라는 것입니다. , 같은 표현을 위한 태그를 제외하면, 자주 사용하는 , , , 등의 태그들은 기본적으로 사각형(박스) 형태로 되어 있습니다. 생각해보면 이러한 태그들이 원형으로 들어가는 것은 없지요? ^^;; 두번째는 "contents, padding, border, margin" 입니다. 모든 박스..
이젠 CSS가 자바스크립트의 역할을 하나 둘 뺏어오고 있는 것 같습니다. 예전엔 복잡한 자바스크립트로 구현 가능했던 풀-다운 메뉴를 CSS만으로 구성한 예제입니다. 현재의 웹 퍼블리셔로선 CSS가 힘내서 자바스크립트를 이기길 바라는 마음이 없잖아 있지만(?) UI개발의 입장에선 자바스크립트든 CSS든 계속 발전해서 디자인단이나 개발단에서 못하는 것들을 하나둘 할 수 있는 모습을 보고 싶다는 기대를 하고 있습니다~ 출처는 cssplay.co.uk 참고로 이 사이트에선 CSS 와 (X)HTML 만을 사용하여 각종 컴포넌트(주로 메뉴)들을 만들어 공개하는 사이트. 다만 공개된 소스 중에는 무료로 사용가능한 것, 라이센스를 구입하여 쓸 수 있는 것, 무료이지만 출처를 표기해야하는 것들이 있습니다. Website..
CSS에서는 글자 폰트 크기나 width, height 등의 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. (pt, px, em, ex, %) 대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px단위(모니터의 픽셀)로 인식하여 렌더링을 하게 되지만, 현재 표준은 단위를 항상 명시해주는 것입니다. (0 제외) ex. DIV.test { padding:5px 0 5px 10px; font:normal 9pt 돋움; } 대부분 HTML 개발 시에는 px 단위를 사용하고 폰트 크기에는 pt, px 단위를 혼용하여 사용하고는 하는데, em 이라는 단위를 사용하자는 움직임도 있는 것 같습니다. pt, px 가 절대적인 크기를 나타내는데 반해서, em, ex, % 는 상위 엘레멘트에 대한 상대적인 크기를 ..
최근 웹 2.0 시대에 들어서 RIA가 대세가 됨에 따라... 마치 플래시와 같은 동적인 UI를 구현하기 위해서 자바스크립트 개발의 중요성이 많이 부각되었습니다. 이러한 개발을 도와주는 도구로 각종 컴포넌트와 편리한 명령어를 담은 자바스크립트 프레임워크가 많이 개발되어 있습니다. 잘 알려진 자바스크립트 프레임워크로는 Prototype.js, Dojo Toolkit, MooTools, jQuery 등이 사용되고 있죠. 그런데... 이러한 프레임워크라는 개념이 CSS에도 도입이 된 것 같습니다. 저도 나름 새로운 사이트를 들어갈 때나, 프리랜스로 작업할 때 CSS의 기초로 사용하는 파일을 가지고 있구요.. 이를 바탕으로 작업을 진행합니다. 이것의 확장된 개념이라고 할 수도 있을까요? 그와 더불어 디자이너 입..
- Total
- Today
- Yesterday