CSS69 CSS 브라우저별 지원여부 사용하는 브라우저를 선택한후에 아래에 가서 테스트 http://www.css3.info/selectors-test/ 2009. 9. 16. CSS IE6 브라우저 버그 - 더블마진,3픽셀,문자중복,피커부 IE6 브라우저 버그들 IE6는 아직 많은 버그를 가진다.아래가 대표적인사례이며 해결방법을 보자 더블마진 플로트(float) 버그 플로트된 엘리먼트에 마진을 줄경우 두배가 나타난다. 아래와같이줄경우 #box{ float:left; margin-left:20px; } 이와같이 할경우 IE6에서는 왼쪽으로 40px의 마진이 나타난다.해결방법으로는 display: inline;을 주면된다 #box{ float:left; margin-left:20px; display: inline;/*IE6더블마진 해결*/ } 텍스트 주변 3픽셀 공간 버그 플로트 지정한 엘리먼트 주변에 텍스트가 있을때 엘리먼트와 접촉부분에 3px의 공간이 생긴다. 해결방법으로는 텍스트에 height:1%;를 주는것이다. #box{ float:.. 2009. 9. 10. CSS 핵(hack)과 필터(filter) CSS 핵(hack)과 필터(filter) 필터(filter)는 브라우저에 따라서 적용되거나 또는 다른게 표현할수 있도록하는 것이다. 예로 익스플로어의 경우는 몇몇 CSS 속성 선택자를 지원하지않으나 다른 브라우저의 경우는 적용된다.이런점으로 브라우저별로 별도의 특성을 부여하는것이다. 핵은 이런 필터와 흔히 같이생각하는데 다르다.핵(hack)의 의미는 브라우저의 관계없이 원하고자 하는 대로 나올수 있도록 사용하는것이 핵이다. 필터에 대한 정보는 아래 사이트에서 자세히 볼수있다. http://centricle.com/ref/css/filters/ 필터 : 익스플로어 조건 주석문 익스플로어 (IE)에는 문제가 많다 앞서 여러개의 css예제를 들면서 IE에서는 적용안된다고 한적있듯이 이때 IE의 경우 별도 지.. 2009. 9. 10. CSS 가로형 내비게이션 float CSS 가로형 내비게이션 가로형 내비게이션을 만드는 방법은 두가지가 있다 하나는 float를 이용하는 것이고 하나는 display:inline;을 이용하는 것이다,float 부터 보자 배경그림을 다음과 같이 할것이다 단 이미지 크기가 크니 작게 자르고 가로로 반복되도록 할것이다. 아래그림은 작게자른 그림 first second third forth fifth ul{ margin:0; padding:0; list-style-type:none; /*여기까지가 초기화*/ width:520px;/*가로길이는 520px로 정해줬다*/ background:url(images/mainbg_re.jpg) repeat-x; /*위같은 그림을 하기위해 일부분을 잘라 작은파일로 하고 가로로 반복해 줬다*/ float:lef.. 2009. 9. 9. CSS 세로형 내비게이션 CSS세로형 내비게이션 앞서 롤오버 효과에 대해 소개했다. 여기참조 http://siana.tistory.com/trackback/54 일단 사용할 이미지는 다음과 같다 이 이미지를 이용해 올렸으때 오른쪽이 나오도록 효과를 적용하고 세로형 내비게이션을 만들어 보자 html은 간편하다 first second third forth fifth css는 각기 설명을 참조 ul{ margin:0; padding:0; list-style-type:none; /*초기화*/ } ul li a{ display:block; width:200px;/*이미지크그에 맞게 가로 세로 정한다*/ height:30px; line-height:30px; color:#000;/*글자색은 검정*/ text-decoration:none; .. 2009. 9. 9. CSS 링크 툴팁(tooltip) CSS를 이용한 툴팁 툴팁은 tittle같이 마우스를 올릴때 나타나는 텍스트상자이다 간단한 예부터 보자 툴팁 위그림과 같이 박스가 나타나는것을 볼 수있다. 그럼 CSS로만 꾸며 보자 CSS 툴팁 이게바로툴팁입니다. a.box{ position:relative;} a.box span{ display:none;/*일단 안보이도록*/} a.box:hover span{ display:block; /*마우스를 올리면 보이도록*/ position:absolute; top:1em; left:2em;/*위치지정*/ /* 박스 꾸며주기*/ border:1px #f99 solid; background:#CCC;} 위와 같이 나타나게된다 1.안보이도록한다 2. 마우스를 올리면보이도록 3. 그리고 위치 4. 나타나는 박스꾸미.. 2009. 9. 6. CSS 링크스타일 롤오버 CSS 롤오버 옛날 부터 잘알려진 롤오버효과 링크에 마우스를 가져갔을떄 변화이다.텍스트와배경색을 이용한 간단한것부터 이미지를 이용하는 것까지 알아보자 텍스트 와 배경색이용 롤오버는 마우스를 올렸을때다 따라서 당연히a:hover이사용된다.먼저 간단한예로 텍스트와 배경이미지 변화를보자 a{ background:#fcc; color:#0f0;} a:hover{background:#0F0; color:#fcc;} 위그림과 같이 마우스에 올렸을떄 변화이다 배경이미지이용 a:link, a:visited{ display:block; width:140px; heigth:30px; /*이미지크기에 맞추기위해 가로세로 지정*/ background: url(image.gif) no- reapeat 0 0;} a:hover{.. 2009. 9. 6. CSS 링크 유형별 스타일 지정(css3) CSS 링크 유형별 스타일 지정 유형별 스타일 지정에 대한 설명은 속성선택자(포스팅참고)가 사용되는 만큼 IE6등 몇몇 브라우저에 적용안된다. 명심하고 보자 유형별로 스타일을 지정해준다 이말은 각각 링크가 나올때마다 변경하기 귀찮으니 유사한 경우 이렇게 해라고 처리해주는것이다.아래예를보자 #example a{ background:url(test.gif) } 이와같은 것을 여러번 변경하기 귀찮다. 클래스로 지정해서 비슷한경우를 처리해줘도 되지만 이것도 일일이 클래스 부여라는 문제가있다. 속성선택자를 이용해보자 a[href^="http:"]{ background:url(test.gif) }/*일반적으로 http:로 시작하는 외부링크일때 배경이미지를 test.gif로 잡아준다.*/ a[href^="http:/.. 2009. 9. 6. CSS 링크 스타일 기초 CSS 링크 스타일 링크 효과(?) 는 홈페이지를 한번이라도 접해본 분이라면 알거라고 본다. 한창 나모나 기타 고전 유틸리티 쓰던시절에 CSS를 쓰지않았더라도 링크만은 거의 들어갔으니까. 일단 간단한 예제부터 보자 a:link{ text-decoration:none; color:#f33;}/*방문하지 않았을때 */ a:visited{text-decoration:none;color:#f33;}/*방문했을떄*/ a:hover{text-decoration:none;color:#c00;}/*마우스가 위로 올라갔을떄*/ a:active{text-decoration:none;color:#c00;}/*링크가 화성화 즉 클릭했을떄*/ 위의 CSS는 한번쯤은 봐왔을 것이다. 정확히 말하면 유사 클래스(:link, :vi.. 2009. 9. 6. CSS 브라우저에 따른 이미지 선택 !important CSS 브라우저에 따른 이미지 선택 익스플로어(IE6)에서는 알파값의 png-24가지원되지않는다 이에 따른 해결 방법으로 일단 적용되는 브라우저는 png파일로 아니면 gif로 하는방법이다. 이떄 사용하는것이 !important 예시는다음과 같다. #test{ background: url(주소/mask.png) !important; background: url(주소/mask.gif); 2009. 9. 5. 이전 1 2 3 4 5 6 7 다음
