컴퓨터정보의 보고 문하우스

번호	제목	글쓴이	날짜	조회 수
공지	스케치북5 게시판스킨 공지사항 슬라이드 테스트 목차에서 제목을 클릭하면 슬라이드로 공지가 나타납니다. 본문보기		2012.02.20	25
38	IE 버젼별로 css 따로 적용하는 방법 웹이 널리 보급된 이유를 개발자 입장에서 찾으라면 html, css와 같은 비교적 간단한 문법과 jsp, php, asp 같은 server-side 언어의 발전을 들 수 있을것이다. 하지만 이 모든것의 배경에는 제작과 사용을 간단하게 만든 플랫폼이 있고, 이것이 바로 웹브라우저이다. 하지만 이런 개방성 만큼 여러 종류의 브라우저가 발전하면서 호환성문제가 대두되었고 이는 다시 개발자로 하여금 양날의 칼로 머리를 쥐어짜게 만들었다. 크게 보면 1. 서로 다른 종류의 브라우저와의 호환성 2. 같은 브라우저의 버전별 호환성 으로 나눌 수 있는데 이 두가지 모두에 있어 최고의 골치는 두말할것 없이 Internet Explorer, IE 다. 특히 10살이나 먹은 IE6은 웹개발자에게는 “악마” 같은 존재이다. 이런 IE에서 버전별로 다르게 보여지는 문제를 해결하기 위한 가장 효율적인 방법은 문제가 있는 부분만 브라우저에 맞게 수정하는 방법이다. 즉, 페이지를 표준에 맞게 작성한 후 브라우저별로 테스트 한 후 특정 브라우저에서 문제가 발생하면 그 브라우저에서만 별도로 제작해둔 css를 읽어 재정의되어 수정하도록 하는 방법이다. 아래는 IE 특정 버전별로 파일을 로딩하는 방법이다. 모든 IE에서만 적용하려면 <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-only.css" /> <![endif]--> IE6 버전에서만 읽어들이도록 <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6-only.css" /> <![endif]--> IE7 버전에서만 읽어들이도록 <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7-only.css" /> <![endif]--> 조금 더 정교하게. IE7 버전보다 낮은 버전에서만 (7버전 제외) <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than.css" /> <![endif]--> IE7 버전보다 낮은 버전에서만 (7버전 포함) <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than-equal.css" /> <![endif]--> IE7 버전보다 높은 버전에서만 (7버전 제외) <!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than.css" /> <![endif]--> IE7 버전보다 높은 버전에서만 (7버전 포함) <!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than-equal.css" /> <![endif]--> 기타 다음과 같은 문구도 가능하다. IE가 아닌 다른 브라우저만 <!--[if !IE]> <link rel="stylesheet" type="text/css" href="not-sucks.css" /> <![endif]--> IE6.5 버전에서만 읽어들이도록 <!--[if IE 6.5000]> <link rel="stylesheet" type="text/css" href="ie6.5-only.css" /> <![endif]--> gt 는 greater than , gte 는 greater than or equal, lt 는 less than, lte 는 less than or equal 의 약자이다. 다음과 같이 스크립트도 삽입할 수 있다. <!--[if IE 6]> <script type="text/javascript"> alert("아직 IE6을 쓰는거야?"); </script> <![endif]--> 이정도면 대충 큼지막한 것들은 해결할 수 있으리라. 출처 http://blog.naver.com/fbwoejr123/50102957276		2011.02.17	920
37	마퀴태그의 기본		2010.02.06	2298
36	이미지 바꾸기 소스 [1]	감로수	2009.06.06	3932
35	익스6에서만 작동되게하는 css구문		2009.02.19	3585
34	CSS 기초 깨우치기 [1]		2008.10.12	4511
33	CSS 사용시 익스플로러 버그 해결하기 보통 CSS를 사용하면 파폭, 사파리, 오페라에서는 잘 보이는데 IE에서는 깨진다거나 IE7까지는 맞출 수 있지만 IE6까지 맞출 방법이 없다거나 그렇다고 IE6에다 맞추면 다른 브라우저에서 전부 깨져보인다던가 하는 난감한 일이 발생합니다. 그런 경우를 위한 팁을 적어보겠습니다. *HTML명령어 if IE 와 COMMENT* if IE와 COMMENT가 무엇인가요? 두 명령어는 익스플로러에서만 지원하는 특수 명령어입니다. 다만 if IE는 웹표준 검사 시에 주석으로 인식 되어 통과가 되지만 comment는 비표준 태그에 해당하기 때문에 얄짤없이 테스트에 탈락하게 되니 웹표준 테스트에 신경을 쓰시는 분이라면 다른 종류의 방법. 이를테면 CSS핵 등을 사용하시길 권해 드립니다. if IE는 HTML코드 사이에 IE에서만 작동하는 코드를 포함시킬 수 있는 명령어입니다. 기본적으로 주석의 형태를 가지고 있기 때문에 다른 브라우저에서는 이 명령어가 포함된 문장은 실행이 되지 않습니다. if IE가 더욱 마음에 드는 점이라면 익스플로러의 버전별로 다 명령어를 설정해 줄 수 있다는 것이지요. COMMENT는 if IE와는 반대 되는 성격을 가진 명령어입니다. if IE가 쓰인 행이 IE에서만 인식이 되고 기타 브라우저에서는 주석으로 인식해서 비활성 처리가 되는 것에 반해 COMMENT는 IE 전용 주석 설정태그로써 이 태그가 사용된 행은 IE에서는 주석으로 인식되지만 기타 브라우저에서는 COMMENT를 비표준 태그로 인식해서 COMMENT 안에 들어간 내용을 전부 실행해 버리지요. 어떻게 사용하나요? if IE 명령어는 이런 식으로 사용합니다. <!--[if IE]> IE 유저에게만 표시할 내용 <![endif]--> IE에서만 실행 할 내용. 버전별로 따로 설정을 할 수도 있습니다. <!--[if IE 6]> IE6 유저에게만 표시할 내용 <![endif]--> 같은 방법으로 <!--[if IE 7]>이라고 하면 IE7 유저에게만 보이겠지요? comment 명령어의 사용법은 더 쉽습니다. <comment> 기타 브라우저 사용자에게만 표시할 내용 </comment> 실제로 사용되는 사례를 가르쳐 주세요. 각 브라우저 별로 전혀 다른 페이지를 보여주는 것도 물론 가능하기는 합니다만 저는 각 브라우저별로 다른 CSS를 사용하는 데에 많이 사용합니다. 이를테면 이런 경우입니다. <style> .test { font-weight:bold; } .test_IE6 { text-decoration:underline; } .test_IE7 { color:#CCCCCC; } </style> <html> <!--[if IE 6]> <div class = "test_IE6"> <![endif]--> <!--[if IE 7]> <div class = "test_IE7"> <![endif]--> <comment> <div class = "test"> </comment> 이 글자가 어떻게 보이십니까? </div> </html> 이 코드를 브라우저 별로 실행시켜 보시면 IE6에선 밑줄이, IE7에서는 글씨가 회색으로, 파이어폭스 등 기타 브라우저에서는 글씨가 굵게 보일겁니다. 이런 식으로 브라우저별로 다른 CSS를 설정해 줄 수가 있는 것이지요. 그 중에서도 버그 상습범인 IE는 이런 식으로 CSS 클래스 자체를 다르게 주어서 격리를 시키는 것이 최고이지요.		2008.07.19	3911
32	CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간 글꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테스트 후 활용하도록 합니다. [ 글꼴의 굵기 지정 ] font-weight: normal (default value); 글꼴 그룹의 어떤 굵기의 글꼴을 사용할 것인지를 설정합니다. 초기값은 normal(400)이며, 굵은 글꼴은 bold(700) 키워드를 사용합니다. 설정값은 하위 요소로 상속됩니다. 다음은 Verdana 글꼴의 굵기 속성입니다. * normal, bold, 100~900 font-weight: normal font-weight: bold font-weight: 100 font-weight: 200 font-weight: 300 font-weight: 400 font-weight: 500 font-weight: 600 font-weight: 700 font-weight: 800 font-weight: 900 위와 같이, 일반적인 글꼴 그룹은 9종류의 굵기가 다른 글꼴이 준비되어 있지 않는 경우가 많습니다. 따라서, 일반적으로 100~900까지의 9단계의 굵기 지정보다는, 굵은 글꼴 표현을 위한, bold를 주로 사용합니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. * lighter, bolder 100~900의 굵기의 범위에서, 현재 굵기(디폴트값 또는 상위 요소에서 상속된 값)보다 각각 한 단계 가는 글꼴, 또는 굵은 글꼴을 지정합니다. [ 글꼴 스타일의 지정 ] font-style: normal (default value); 글꼴 그룹의 표준, 이탤릭, 기울임 글꼴을 지정하는 속성입니다. 설정 값은 하위요소로 상속됩니다. * normal, italic, oblique 글꼴 그룹의 종류에 따라, 이텔릭체 전용, 기울임 전용 글꼴이 디자인되어 있습니다. 해당 글꼴을 사용하도록 지정이 가능합니다. 해당 글꼴이 없는 경우에는 표준 글꼴을 기울인 글꼴이 이용됩니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. 다음은 Verdana 글꼴의 스타일 속성입니다. font-style: normal font-style: italic font-style: oblique [ 작은 대문자 지정 ] font-variant: normal (default value); 영어 알파벳의 표기방식입니다. 알파벳을 대문자료 표기하되, 소문자 크기로 작게한 종류의 글꼴인 small-caps를 지정할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. * normal, small-caps font-variant: normal font-variant: small-caps [ 대소문자 지정 ] text-transform: none (default value); 영어 알파벳의 표기방식입니다. 문장에 있는 단어의 첫글자만을 대문자로 표시하거나, 전체를 대문자 또는 소문자로 표기하게 할 수 있습니다. ID와 같이 대/소문자의 구분입력 단위요소에 사용할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 none이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. * none, capitalize, lowercase, uppercase text-transform: none; Capitalization effects text-transform: capitalize; Capitalization effects text-transform: lowercase; Capitalization effects text-transform: lowercase; Capitalization effects [ 글꼴 장식 ] text-decoration: none (default value); 글꼴 장식에 대한 속성입니다. 아래 예와 같이, 밑줄이나 윗줄, 취소선을 표시하거나 깜박이게 할 수도 있습니다. 이 속성은 상위 요소로부터 상속되지 않습니다. 다만, 블록 레벨 요소에 대하여 지정한 경우에는 해당 박스 안에 포함되는 인라인 요소에 모두 적용됩니다. 또한, 인라인 요소에 대하여 지정한 경우에는 해당 요소가 생성하는 모든 박스에 대하여 적용됩니다. * none, underline, overline, line-through, blink text-decoration: none a tag in li tag text-decoration: underline text-decoration: line-through text-decoration: overline text-decoration: blink 위와 같이, blink옵션값은 IE에서는 적용되지 않습니다. (Firefox 2.0에는 적용됩니다) 또한, 첫번재 줄에 사용된 코드는 다음과 같습니다. 즉, 같은 레벨의 요소에는, text-decoration값이 상속되지 않습니다. <li style="text-decoration: none;">text-decoration: none <a href="#">a tag in li tag</a></li> [ 줄 간격 설정 ] line-height: normal (default value); 정확히는, 인라인 요소의 높이를 설정하는 값입니다. 만약 블록 레벨 요소에 값을 지정한 경우에는, 해당 박스에 포함될 인라인 요소 박스의 최소 높이를 지정하는 것이 됩니다. 설정 값은 하위 요소로 상속됩니다. * 인라인 요소에 대한 높이값 표현의 디폴트 값이 IE7과 Firefox2의 차이가 현격하기 때문에, 상위레벨(body, hemtl)에서 픽셀이나 포인트로 결정해 주는 것이 좋습니다. line-height: normal line-height: normal line-height: 150% line-height: 150% line-height: 15px line-height: 15px line-height: 1.5em line-height: 1.5em 기본값은 normal이며, 브라우저가 적절한 줄간격을 설정합니다. "실수값+단위 형태"로 지정할 수 있습니다. 전각(em)의 경우는, 해당 글꼴의 줄 간격을 1로 간주하고 퍼센티지(%)는 100%로 간주하고 계산되어 집니다. 즉, 상위레벨의 값을 1(em), 100(%)으로 계산하여 표현합니다. 픽셀(px) 및 포인트(pt)등과 같은 값을 지정할 수도 있습니다. 단, 인라인 레벨의 박스 높이인 만큼 음수값을 지정할 수 없습니다. [ 문자 간격 설정 ] letter-spacing: normal (default value); 글자와 글자의 간격을 설정하는 속성입니다. 주의할 점은 설정하는 값이 자간이 나타내는 것이 아니라, 기본 자간에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, letter-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다. * 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다. [ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ] 자간은 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다. [ 단어 간격 설정 ] word-spacing: normal (default value); 공백으로 구분되는 하나의 단어와 단어 사이의 간격을 설정하는 속성입니다. 자간과 마찬가지로 설정하는 값이 단어 간격을 나타내는 것이 아니라, 기본 간격에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, word-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다. * 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다. [ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ] 단어 간격 역시, 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다. [ 글꼴 크기의 보정 ] font-size-adjust: none (default value); 현재, IE7은 지원하지 않고 있으며, Firefox 2.0에서는 적용이 되는 속성으로 용도는 아래와 같습니다. 어떠한 이유로(사용자에게 글꼴이 없거나, 요소 하위에 다른 글꼴이 사용되는 등), 요소에 지정된 글꼴이 표시되지 않는 경우, 글꼴 기본 크기의 차이에 따른 이질감을 조정하기 위한 속성입니다. 해당 글꼴(지정한 글꼴) 크기에 대한 소문자 x의 높이의 비율을 지정해 두면, 다른 글꼴이 사용되더라도 소문자 x의 높이가 일정하게 유지되도록 하여 일관성을 유지하게 됩니다. 설정값은 하위요소로 상속됩니다. 아래는, Firefox 2.0에 font-size-adjust를 적용한 예입니다. <div style="font-family: Verdana; font-size: 14pt; font-size-adjust: 0.54;">Verdana 14pt <font style="font-family: 'Times New Roman';">Times New Roman 14pt</font></div> 그림의 위쪽은 font-size-adjust를 적용하지 않은 경우이며, 아래는 0.54값이 적용된 경우입니다. 주의할 점은, 해당 값에 따라 지정된 글꼴(위의 경우 Verdana)도 크기가 보정될 수 있다는 점입니다. 따라서, 충분한 테스트 및 검증을 해 준 후 사용하도록 합니다. 한가지 재미있는 점은, 영문 글꼴을 대표글꼴로 설정하여 사용하는 경우, 한글의 크기가 브라우저에 따라 같지 않은 문제를, 이 속성을 통해 어느정도 보완할 수가 있다는 점이 있습니다. (적어도, IE에서는 적용되지 않기 때문입니다) 위와 같이, 절절한 font-size-adjust값을 주어, 한글 글꼴을 조정해 줄 수 있습니다. 물론, IE에서는 적용되지 않기 때문에, IE에 맞춘 스타일시트에 Firefox의 한글크기 문제가 있는 경우 사용할 수 있습니다. [ 장평 설정 ] font-stretch: norman (default value); 현재, IE7, Firefox 2.0모두 지원하지 않습니다. 총 9단계의 속성값이 있습니다. ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded이 있으며, 왼쪽에서 오른족으로 갈 수록 폭이 넓어집니다. [출처] CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간\|작성자 거대토끼 [1]		2008.07.19	4914
31	기본적인 태그 (링크걸기)\| [1]		2008.07.12	4364
30	가장 기본적인 태그들		2008.07.12	2842
29	자신의 홈에 프린트버튼을 넣자 [2]		2008.07.12	2729
28	테이블(셀) 깨지지 않는 CSS [1]		2008.07.12	3561
27	날짜 매개변수 [1]		2008.07.12	2785
26	이미지 없이 그라데이션효과 주기		2008.07.12	3504
25	자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을 [1]		2008.07.12	2698
24	뒤로..앞으로..새로고침 버튼 넣기		2008.07.12	3793
23	( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서 img align="속성" align="absmiddle" 에 대해서 몇가지 실험해봤어요 (익스와 파폭) 글자와 이미지의 세로 정렬 문제로.. 이글저글 읽어보다가 눈으로 확인하고 싶은 마음에 실험에 들어갔답니다 서투르신 분들께 도움이 되었으면 하는바램입니다...^^; 간단 명료한 설명을 위해 딱딱한 글로 기제함을 이해해주세요. absmiddle 은.. ( absolute middle )= 절대적으로 가운데로 하란뜻이라고 보면 될듯하다 정렬후에는 세로정렬에 영향을 준다 확인 해야할부분 (로그인버튼) 이미지 테그에 적용방법 img src="ooo.gif" width="40" height="25" border="0" align="absmiddle" 캡쳐이미지1) align="absmiddle" 적용전 (위 이미지) 캡쳐이미지2) align="absmiddle" 적용후 (위 이미지) 이밖에 참고사항 img태그나 기타 태그 속성중에 align="absmiddle" 는 비표준이므로 middle 로 수정해서 쓰라는 글로 인해 테스트겸 middle로 적용후 확인해보았다 align="middle" 로 적용된 확인결과는 아래 캡쳐 참고 캡쳐이미지3) align="middle" 적용후 (위 이미지) 테스트 결과 글자들과의 세로정렬이 absmiddle과의 차이점을 알수있다. 역시나 absmiddle 의 효과를 볼려는 이들에게는 middle의 속성으로는 그효과를 볼수없다 파폭에서도 middle 적용시 위와같은 같은 결과가 나왔다. 즉, 결론은... 이미지와 글자의 높낮이 정렬문제는 align="absmiddle"를 쓰면될듯하다 (익스 파폭 확인결과 캡쳐2이미지로 적용되었음) 속성들의 관련 자료 (참고하세요) 이미지와 텍스트의 위치를 지정하기 위해서는 img 태그의 속성중 align 속성을 사용합니다. img 태그를 쓰고 그 뒤에 문장을 쓰면 속성값 대로 문장과 이미지가 정렬됩니다. 기본 형식은 ' <img sre="파일명" align="속성값"> 문자열 ' 입니다. align 속성을 생략하면 기본값인 top 이 적용됩니다. (align 의 속성값은 아래와 같습니다. ) left 이미지의 왼쪽에 문자열을 정렬합니다. right 이미지의 오른쪽에 문자열을 정렬합니다. center 이미지의 중간에 문자열을 정렬합니다. top 이미지의 제일 상단과 문자의 상단을 맞춥니다. texttop 영문에서 g 보다 f 가 더 위로 튀어나온 것을 볼수 있는데 위로 올리간 문자의 맨위와 이미지의 상단을 맞춥니다. middle 문자열의 밑선을 이미지의 가운데에 맞춥니다. absmiddle 문자열의 가운데를 이미지의 가운데에 맞춥니다. bottom 이미지의 하단과 문자열의 하단을 맞춥니다. baseline bottom과 같은 역할을 합니다. absbottom 영문문자열에서 해당되며, fight 라는 단어를 쓸때 f 보다 g 가 더 밑으로 내려와 있으므로 g 의 밑선과 그림의 하단을 맞춥니다. [출처] ( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서\|작성자 셀레베스 [3]		2008.04.27	5954
22	붙어야 할 이미지가 붙지 않을때. 버턴과 버턴이나, 아님 이미지를 잘라서 웹상에서 붙여야 할때, 문법상으로는 아무 문제가 없는데. 아래이미지와 같이 딱 붙지를 않고 약간의 공백이 생길때 황당합니다. 그럴때는 css파일에서 해당 class를 찾아서 #top_index { position:absolute; top:0px; right:0px; text-align:left;} #top_index img { float:left; display:block;} 이렇게 해주면 붙습니다.		2008.04.19	2801
21	사각박스 코너를 이미지없이 둥글게 만드는법		2008.04.08	3272
20	CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;] [1]		2008.04.04	3306

번호

제목

글쓴이

날짜

조회 수

공지