웹 표준으로 개발하면서 CSS를 적용하다 보면 항상 IE가 문제가 됩니다. 구글 크롬, 파이어폭스, 애플 사파리 모두 제대로 보이는데 IE만 이상하게 보이는 경우가 종종 있습니다. IE 8 버전 이후로 웹 표준을 많이 따르기 때문에 좋아졌다고는 하지만 아직도 안 맞는 부분들이 있네요. IE 브라우저의 CSS 구분 이런 경우, CSS Hack이라고 하는 특정 브라우저만 적용할 수 있는 편법들이 나오기도 하지요. 이외에도 일반적으로 사용하는 방법이 브라우저를 파악해서 다른 CSS 파일을 링크하도록 구성하는 겁니다. 다음 소스를 한번 보시죠.. 이렇게 하면 IE에서는 common_ie.css 파일을 사용하게 되구요. 다른 브라우저에서는 common.css 파일을 사용하게 됩니다. 이게 가능한 이유는 IE 브라..
[웹표준 #4]테이블 태그의 활용법
웹 표준으로 넘어가면서 테이블 태그는 구닥다리이고 더 이상 사용하지 않는 것이 좋다는 이야기를 많이합니다. 실제로 테이블로 굳이 사용하지 않아도 되는 것까지 테이블 태그를 쓰는 경우가 많았기 때문이라고 생각합니다. 하지만 테이블 구조를 가지고 있는 경우에는 태그를 쓰는 것보다 태그를 그대로 사용하는 것이 훨씬 바람직합니다. 즉, 달력, 차트, 스케줄, 통계와 같은 형식은 테이블을 쓰는 것이 좋겠지요. 그러나 테이블 태그를 사용할 때는 좀 더 명확하게 하는 것이 필요합니다. 오늘은 태그에 대해서 한번 정리해 보려고 합니다. 태그의 올바른 사용 예제로 요즘 한참 인기몰이중인 프로야구의 팀 순위를 가지고 테이블을 만들어 보도록 하죠. 프로야구 팀 순위 순위 팀 승-패-무 승률 1 SK 27-21-1 0.563..
[웹표준 #3] 문서 제목의 마크업은 Heading을 쓰자.
HTML에서 문서 제목 부분은 어떻게 쓸까? HTML 문서도 일반 문서처럼 제목, 소제목 들을 사용하는 경우가 많이 있습니다. 이때 여러분은 어떤 태그를 많이 사용하는지요? 아마도 대부분은 다음과 같은 형태를 많이 사용할 것 같습니다. 미니의 프로그래밍 이야기 여기에 태그는 사용하지 않는게 좋다고 하니 CSS의 style을 적용해서 폰트 크기를 키우기도 하겠죠.. 미니의 프로그래밍 이야기 원하는 크기대로 나오고 괜찮은 것 같다고 생각합니다. 그러나 이렇게 작성하면 HTML 태그의 기본 속성인 의미 전달이 안됩니다. 즉, 위 부분만 보고서 문서의 제목이라고 판단하기는 쉽지 않기 때문이죠.. (주로 누가 문서만 보고 판단을 할까요? 한번 생각해 보세요 ^^) 그래서 태그를 한번 사용해 봅니다. CSS의 cl..
리스트 태그는 언제 사용할까?제 블로그에 있는 분류 목록을 화면에 출력한다고 생각해 보죠. 가장 간단한 방법은 다음과 같이 태그를 사용하는 것입니다. Beginner XML Developer 프로젝트관리론 컴퓨터공학 프로그래밍 리뷰 미니이야기 원하는대로 리스트 형태로 출력되기는 합니다. 그러나 이런 코딩에서 문제점은 무엇일까요? 이 리스트에 스타일을 변경시킨다면 즉, 색상을 바꾸거나 글꼴이나 크기를 변경할 경우, 현재 상태에서는 각각의 라인에 태그를 적용하는 방법이나 각각 태그를 넣고 CSS의 class로 스타일을 적용하는 방법 뿐으로 보입니다. 이런 경우에 바로 리스트 태그를 사용해야 합니다. 위와 같은 경우는 순서가 중요하지 않기 때문에 태그로 감싼 태그를 사용하면 되겠죠. 그럼 리스트 태그에 대해서..
시작하면서현재 IT 프로그래밍을 보면 정말 배워야 할 것이 너무 많은 것 같습니다. Java 분야만 해도 JSP, Java, Struts, Spring, Hibernate, SiteMesh, iBatis, Google App Engine, Hadoop, NoSQL 등등.. 정말 나열해 보니 끝도 없네요. 아마 요즘 시대에 프로그래밍을 시작했다면 막막했을지도 모르겠습니다. 학교에서 강의를 하면서 항상 기본부터 시작하라고 이야기를 많이 합니다. 그래서 저도 최근 이슈들을 하나씩 정리하려구 하고요. 그 첫번째로 웹 표준부터 시작하려고 합니다. 90년대 후반 처음 웹 프로그래밍을 시작할 때, HTML 태그를 배웠던 기억이 납니다. 태그로 글꼴의 크기나 색상을 이쁘게 하고 으로 구조를 잡기도 하고, 태그 정도 쓰..
CSS의 Margin, Padding, Border 개념을 명확하게 하자
90년대 후반부터 HTML을 시작한 분들은 CSS 보다는 태그와 태그를 활용해서 HTML을 작업하는데 익숙해 있기는 합니다. 그래서인지 CSS에 대해서 명확하게 이해하지 못하고 있는 부분들이 있는 것 같습니다. 특히 Margin과 Padding과 같은 부분에 대해서 가끔 헤깔려 하는 것 같아서 정리해 보려고 합니다. 위 그림을 보면 Margin, Border, Padding에 대해서 잘 나와 있습니다. Border는 경계선으로 실제 콘텐츠를 감싸고 있는 선으로 스타일, 색, 두께를 지정할 수 있습니다. 콘텐츠 부분과 다르게 보이도록 하기 위해서 페이지의 배경색과 다른 색을 사용하기도 합니다. Padding은 Border 안쪽에 위치하는 여백으로 콘텐츠에 대한 공간을 지정하는 것입니다. Padding 공간..