Category Archives: CSS

[링크:영어] 클래스 이름을 시맨틱하게 만든다는 것은?

Posted on by
Reply
CSS가 쉬워 보여도 잘 하는 건 힘들다. 잘 한다는 건 이런 거다. 누구나 국어로 글을 쓸 줄 알지만, 글을 잘 쓰기는 힘들다. 마찬가지로 누구나 CSS 사용법을 알 수는 있지만 그 중 소수만 잘 쓴다. 이 글은 CSS를 잘 쓰기 위해 이름을 어떻게 붙여야 하는가를 설명한 글이다. 다양한 예제가 나와있어서 더 좋다. 영어 실력이 짧아도 예제 중심으로 보면 된다. 시멘틱이라고 써 있는 … ▶전문 보기

[PHP] 윈도우 7과 비스타에서만 기본 글꼴을 맑은 고딕으로 설정하고 XP에서는 안 그러기

Posted on by
Reply
head 안에 다음 코드를 삽입하면 간단하게 해결된다. $_SERVER['HTTP_USER_AGENT']는 브라우저가 서버에 알려 준 자신의 신원이다. Windows NT 6.1은 윈도우 7을 가리키고, Windows NT 6.0은 비스타를 가리킨다. function using_good_font_in_vista_and_7(){ if( strstr($_SERVER['HTTP_USER_AGENT'], 'Windows NT 6.1') or strstr($_SERVER['HTTP_USER_AGENT'], 'Windows NT 6.0') ){ echo '<style type="text/css">body{font-family:"맑은 고딕"}</style>'; } } using_good_font_in_vista_and_7(); 왜 … ▶전문 보기

input type=text 의 높이를 지정해 주고 싶다면 height 보다는 padding을 사용하라

Posted on by
Reply
input 박스의 사이즈가 크면 보기도 좋고 클릭해서 입력하기도 좋다. 미적인 것과 사용성 둘 다를 충족하는 좋은 방법이라고 생각한다. 그런데 css로 height 를 지정하면 난감한 일이 발생하곤 한다. 높이가 높은데 커서가 맨 위에 딱 붙어 있게 되는 것이다. 아래는 모두 height: 25px을 input에 준 경우다.   아래는 padding:5px 이라고 준 경우다. 어떤 브라우저든지 … ▶전문 보기

img와 텍스트 높이 맞추기 : vertical-align 속성을 이미지에 걸어 주기

Posted on by
Reply
텍스트 사이에 이미지를 넣을 때 골치아픈 문제가 있다. 텍스트 높이와 이미지 높이를 같게 해도 이미지가 꼭 위로 튀어 올라가는 문제가 있다. 이 때 과거에 사용했던 태그는 <img align="absmiddle" src="..."> 이었다고 한다. 그러나 align="absmiddle" 태그는 비표준이라고 한다. 따라서 앞으로는 css 속성인 vertical-align 을 사용하자. vertical-align 은 img 에 걸어 줘야 한다. img의 부모에 … ▶전문 보기

[CSS] 사용자 컴터에 없는 글꼴 사용할 수 있게 만들기 @font-face

Posted on by
Reply
IE를 제외한 모든 브라우저가 TTF 파일을 지원하고, IE는 EOT 파일을 지원한다고 한다.(출처는 http://naradesign.net/ouif/css3/#s25와 http://naradesign.net/ouif/css3/#s26 다.)EOT는 TTF를 EOT로 변환해 주는 웹사이트를 통해 간단히 생성할 수 있다.(작동 테스트는 했는데 실제로 EOT가 적용되는지 테스트해 보지는 않았다.) 적용 CSS 코드는 아래와 같다. /* FF, OP, SF, CR */ @font-face { font-family:ng_ttf; src:url(ng_ttf.ttf);} /* … ▶전문 보기

[CSS]텍스트가 넘치면 말줄임표 붙여 주기 – CSS로 된다니!

Posted on by
Reply
http://naradesign.net/css3/presentation.html#s12 파이어폭스를 제외한 브라우저는 다 지원한다. 파폭은 overflow: hidden을 사용할 수밖에 없다. 위의 링크도 파폭으로 들어갈 경우에는 "뭐가?" 이럴 거다. 크롬, 사파리, 오페라, IE로 들어가 보기 바란다. 놀라운 건, IE는 이미 6부터 지원하고 있었다는 것 ㅋ text-overflow:ellipsis; -o-text-overflow:ellipsis; 아래는 스크린샷이다. … ▶전문 보기

[CSS] 박스 쉐도우 box-shadow 그림자 넣기

Posted on by
Reply
정찬명 님의 블로그에 갔더니 9 Useful CSS3 Properties 라는 글이 있었다. 그 중 인상깊은 놈 하나를 퍼왔다. 나머지도 보고 싶다면 직접 글을 보기 바란다.CSS3긴 하지만, 지금도 당장 사용할 수 있다. /* Opera */ box-shadow:10px 10px 10px silver; /* Firefox */ -moz-box-shadow:10px 10px 10px silver; /* Safiri, Chrome */ -webkit-box-shadow:10px 10px 10px silver; /* IE */ filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135, … ▶전문 보기