http://itweb.tistory.com/ 우리가 살아갈 웹과 컴퓨터, IT와 정보통신 ko Wed, 20 Aug 2008 17:58:04 +0900 Tistory 1.1 http://itweb.tistory.com/ 우리가 살아갈 웹과 컴퓨터, IT와 정보통신 http://itweb.tistory.com/9 아마도 앞으로는 디자인을 모듈화 하는 작업이 더욱 많아질 것입니다. 그래서 CSS를 통한 박스형 디자인은 자주 쓰이는 업무 중 하나인데요, 아직까지는 CSS를 이용해서 박스를 디자인함에 있어서 불편한 점이 많습니다. CSS3 에서 새로이 추가되는 프로퍼티들을 보면서 기대되는 것 몇 가지를 소개할까 합니다. background-size background의 사이즈를 조절할 수 있는 프로퍼티입니다 div { background-image: url(bg...<p><strong><a href="http://itweb.tistory.com/9">글 전체보기</a></strong></p> 웹표준 HTML/CSS CSS css3 스타일시트 웹표준 소년허클베리핀 http://itweb.tistory.com/9 http://itweb.tistory.com/9#entry9comment Tue, 4 Dec 2007 23:08:37 +0900 http://itweb.tistory.com/8 DIV 남발을 하지말자 TABLE 마인드에서 갓 DIV 마인드로 넘어오기 시작한 디자이너분들께서 실수하시는 부분 중 하나가, 바로 DIV를 남발하는 것입니다. DIV는 만병통치약이 아닙니다. 테이블의 단점 중 하나가 <td>에 재차 <table>이 들어가기 때문에, 겹테이블이 많아져서 페이지 로딩이 느려진다는 것 입니다. DIV도 예외는 아닙니다. DIV의 숫자가 늘어나면 자연적으로 페이지 로드가 느려집니다. 굳이 DIV를 쓰지 않아도 되는 곳에서..<p><strong><a href="http://itweb.tistory.com/8">글 전체보기</a></strong></p> 웹표준 HTML/CSS class CSS div 상속 스타일시트 웹표준 의미있는네이밍 작명 코딩 소년허클베리핀 http://itweb.tistory.com/8 http://itweb.tistory.com/8#entry8comment Wed, 21 Nov 2007 07:26:21 +0900 http://itweb.tistory.com/7 CSS의 :hover 이벤트는 마우스가 엘리먼트 위에 올라가있을 때 발생합니다. 이것은 될 수 있으면 자바스크립트의 onmouseover 를 사용하지 않고도, 디스플레이를 컨트롤 할 수 있기 때문에 편리합니다. 최근에 나오는 브라우저는 앵커태그(a) 이 외에 다른 엘리먼트 에서도 :hover 를 사용할 수 있도록 되어있습니다. 하지만 익스플로러 6 이하 브라우저에서는 오직 앵커 태그에서만 :hover가 작동하고, 다른 엘리먼트에서는 작동하지 않는 문..<p><strong><a href="http://itweb.tistory.com/7">글 전체보기</a></strong></p> 웹표준 HTML/CSS CSS Expression 스타일시트 웹표준 소년허클베리핀 http://itweb.tistory.com/7 http://itweb.tistory.com/7#entry7comment Wed, 21 Nov 2007 07:24:11 +0900 http://itweb.tistory.com/6 CSS 강좌를 쓰는 것은 참으로 오랜만입니다. 개발자분들은 연일 죽어나고 계시지만, 디자인은 비교적 회사일에 여유가 생기면서 이런 강좌를 쓸 시간도 주어지네요~ (특별히 칼님께서 휴일도 없이 해피빈기부와 올블릿 적립금 관련 개발하시느라 고생많으셨어요~ 토닥토닥~) 요번 강좌에서는 곧 마이올블에서 사용될 미니캘린더를 디자인 해볼까합니다. 테이블도 웹표준이 아닌건 아니란걸 아시리라 믿고~ 테이블로 레이아웃을 짜지마라고는 많이들 들으셨을거에요~ 하지만....<p><strong><a href="http://itweb.tistory.com/6">글 전체보기</a></strong></p> 웹표준 HTML/CSS CSS 달력 디자인 미니달력 스타일시트 웹표준 캘린더 소년허클베리핀 http://itweb.tistory.com/6 http://itweb.tistory.com/6#entry6comment Tue, 16 Oct 2007 13:12:38 +0900 http://itweb.tistory.com/5 needs... 태터 앤 미디어 링크롤 같이 접였다 폈다하는 링크롤 소스를 가지고 싶어하시는 분이 많으셔서, 급조해봤습니다. 일단은 기본 스킨을 배포합니다. 디자인을 자유롭게 고쳐서 사용하시면 될 듯 합니다~ 소스 퍼가기 기본 스킨 01 - 기본 닫힘 소스보기 기본 스킨 01 - 기본 열림 소스보기 기본 스킨 02 - 기본 닫힘 소스보기 기본 스킨 02 - 기본 열림 소스보기 블로그에 소스 붙이기 기본적인 링크 디자인은 하지 않았습니다. (블로그 자..<p><strong><a href="http://itweb.tistory.com/5">글 전체보기</a></strong></p> 웹표준 HTML/CSS CSS linkroll 링크롤 북마크 웹표준 소년허클베리핀 http://itweb.tistory.com/5 http://itweb.tistory.com/5#entry5comment Tue, 16 Oct 2007 13:10:40 +0900 http://itweb.tistory.com/4 웹2.0 시대가 되면서 기존의 table 방식이 아닌, div를 이용해서 웹표준화 작업을 하는곳이 늘어나고 있습니다. 이는 물론 디자이너들에게는 CSS라는 복병의 공부거리가 생긴 중대사중에 하나이기도 합니다만, 오히려 웹표준방식에 익숙해지면 작업시간도 훨씬 단축되고 웹사이트 디자인을 관리하기가 한결 수월해짐을 확실히 체감할 수 있습니다. 그러면 도대체 디자인에 있어서 '웹표준'이란 무엇인지 제가 알고 있는 상식선에서 간단히 정보를 공유하고자 합니다...<p><strong><a href="http://itweb.tistory.com/4">글 전체보기</a></strong></p> 웹표준 HTML/CSS 웹접근성 웹표준 소년허클베리핀 http://itweb.tistory.com/4 http://itweb.tistory.com/4#entry4comment Sun, 2 Sep 2007 14:27:42 +0900 http://itweb.tistory.com/3 실무에서 굉장히 자주 마주치는 익스플로러 6 만의 CSS 버그가 있습니다. 쏭군은 익스플로러 7과, 파이어폭스2를 기반으로 디자인 작업을 합니다. (사파리나 오페라는 아주 가끔 열어보고요.. 그래서 사파리에서 약간의 문제가 있긴 하지만..) 그래도 익스7, 파폭2에서 제작하면 익스 6이나 다른 브라우저에서도 그럭저럭 잘 뜨더군요.. 그런데 익스 6은 역시 요주의 녀석이긴 한게... 레이아웃이라던가 객체가 벌어지는 현상이 안 생길래야 안생길수가 없어서..<p><strong><a href="http://itweb.tistory.com/3">글 전체보기</a></strong></p> 웹표준 HTML/CSS CSS CSS핵 IE 6 IE핵 스타일시트 웹표준 익스플로러6 소년허클베리핀 http://itweb.tistory.com/3 http://itweb.tistory.com/3#entry3comment Sat, 28 Jul 2007 16:12:05 +0900 http://itweb.tistory.com/2 웹표준 코딩을 위한 파이어폭스의 다양한 확장기능을 이용해봅시다! 우선 파이어폭스를 다운로드 받습니다. 파이어폭스는 웹디자이너나 코더, 개발자를 위한 실로 다양한 기능을 제공합니다. 파이어폭스를 설치하셨다면 모질라사이트의 Addon 다운로드 페이지로 이동합니다. 파이어버그를 다운로드 받습니다 웹디벨롭퍼를 다운로드 합니다. 위의 두 프로그램을 다운로드 하실때는 파이어폭스에서 하면 편리하게 자동으로 애드온이 설치됩니다. 우선 파이어버그와 웹디벨로퍼를 설치..<p><strong><a href="http://itweb.tistory.com/2">글 전체보기</a></strong></p> 웹표준 HTML/CSS CSS Firefox 스타일시트 웹디벨롭퍼 웹표준 파이어버그 파이어폭스 소년허클베리핀 http://itweb.tistory.com/2 http://itweb.tistory.com/2#entry2comment Fri, 27 Jul 2007 15:17:36 +0900 http://itweb.tistory.com/1 네이버의 실시간 인기검색어 같은 표현방식을 DIV가 아닌 span 으로 처리를 할 수 있다는 사실! 저런씩으로 표현을 하기 위해서 기본적으로 세로로 표시가 되는 div 를 쓸필요없이, 기본적으로 가로로 엘리먼트가 나열되는 span 을 쓰는편이 편리하겠지요^^ 위 처럼 코딩을 하고 출력을 해봤습니다. 아래처럼 브라우저에서 출력이 되는군요~ 인기키워드 부분을 가로 크기를 넓혀서 ↑ 부분과 떨어뜨려보겠습니다. 브라우저로 결과를 확인해 보겠습니다~~~ 오잉..<p><strong><a href="http://itweb.tistory.com/1">글 전체보기</a></strong></p> 웹표준 HTML/CSS CSS span 스타일시트 웹표준 소년허클베리핀 http://itweb.tistory.com/1 http://itweb.tistory.com/1#entry1comment Fri, 27 Jul 2007 12:24:39 +0900