JKUN

Welcome To The Jkun.net

블로그 포스트 검색결과

CSS 에 해당되는 글 5개가 검색 되었습니다.

  1. 2015.05.08 IE 10 이상으로 셀렉트박스 아이콘 숨기기
  2. 2013.12.17 inline-block 여백 제거
  3. 2013.07.05 구글폰트 - 나눔고딕등
  4. 2011.02.25 [CSS] min-height, height 핵(hack)없이 사용하기
  5. 2011.01.20 [CSS] 텍스트 줄바꿈 처리 word-break, white-space

Blog

IE 10 이상으로 셀렉트박스 아이콘 숨기기

2015.05.08 17:32 Development/CSS

셀렉트 박스를 배경이미지로 넣어 커스텀으로 사용하려 했는데,

인터넷 익스플로러에서는 적용이 되지를 않는다. 구글링 해서 찾을 결과 10이상으로는 적용이 되는것 같다.

내가 테스트 해본 결과로는 11 이상이었다.



select::-ms-expand { display:none; }
저작자 표시
신고

'Development > CSS' 카테고리의 다른 글

IE 10 이상으로 셀렉트박스 아이콘 숨기기  (0) 2015.05.08
inline-block 여백 제거  (0) 2013.12.17
HTML5 / CSS3 placeholder 폰트 색상 지정  (0) 2013.09.02
구글폰트 - 나눔고딕등  (0) 2013.07.05
Box Shadow - CSS3  (0) 2013.07.05
웹폰트 font-weight:bold; 속성이 적용받지 못하는 상황  (0) 2013.06.12
CSS, HTML, select box
현재 0 개의 댓글이 있습니다.
Comment

Blog

inline-block 여백 제거

2013.12.17 10:01 Development/CSS

inline-block 을 지정하면 여백이 생긴다.ㅡㅡ;

구글링 하다보니까 font-size:0 하면 되긴 되는데.. 그럼 하위 요소들의 폰트사이즈를 지정해주지 않는 요소들은

모두 폰트사이즈가 0이 되어 사라져 버리네;;

고민이네..


display:inline-block VS float:left

의견좀 부탁드립니다.

저작자 표시
신고

'Development > CSS' 카테고리의 다른 글

IE 10 이상으로 셀렉트박스 아이콘 숨기기  (0) 2015.05.08
inline-block 여백 제거  (0) 2013.12.17
HTML5 / CSS3 placeholder 폰트 색상 지정  (0) 2013.09.02
구글폰트 - 나눔고딕등  (0) 2013.07.05
Box Shadow - CSS3  (0) 2013.07.05
웹폰트 font-weight:bold; 속성이 적용받지 못하는 상황  (0) 2013.06.12
CSS, 스타일시트
현재 0 개의 댓글이 있습니다.
Comment

Blog

구글폰트 - 나눔고딕등

2013.07.05 15:27 Development/CSS

나눔고딕이 구글 웹폰트에 있드라구요. 아직 테스트는 해보지 않음. ^^;;

테스트 해보신 분들 있음 댓글좀 부탁드립니다~~



LINK : http://www.google.com/fonts/earlyaccess

저작자 표시
신고

'Development > CSS' 카테고리의 다른 글

inline-block 여백 제거  (0) 2013.12.17
HTML5 / CSS3 placeholder 폰트 색상 지정  (0) 2013.09.02
구글폰트 - 나눔고딕등  (0) 2013.07.05
Box Shadow - CSS3  (0) 2013.07.05
웹폰트 font-weight:bold; 속성이 적용받지 못하는 상황  (0) 2013.06.12
[CSS] 단위 pt, px, em, ex, %  (0) 2013.05.28
CSS, 구글폰트, 나눔고딕, 나눔고딕 웹폰트, 웹폰트
현재 0 개의 댓글이 있습니다.
Comment

Blog

[CSS] min-height, height 핵(hack)없이 사용하기

2011.02.25 20:53 Development/CSS

UI 코드작성은 정말 힘들다..ㅡㅡ;

출처 : http://blog.naver.com/weiss/130100739719


보통 min-height를 쓸땐, ie6에서 작용하지 않으므로, 기존엔 ie에서만 먹는 _height를 사용했다.

하지만 핵을 쓰는 것때문에 Validator에 걸림.

소스는 좀 길어지지만 핵 안쓰고, 모든 브라우저에서 정상적으로 작동하게 할 수 있는 방법

 

div {
  min-height:500px;
  height:auto !important;
  height:500px;
}

 

순서 매우 중요

  1. min-height :  ie7이상 및 표준브라우저에서 작용.
  2. height:auto !important : 표준브라우저에서 아래 height 속성을 무시하고 min-height이상인 컨텐츠가 컨텐츠 영역을 벗어날 때, div가 자동으로 늘어날 수 있도록 함.
  3. height : ie6이하 버젼에서 작용. 셀렉터 안에서 같은 속성을 여러번 작성했을 경우 ie6은 가장 마지막에 선언한 속성을 가져가므로 맨 마지막에 적는다.

 

관련페이지

Min-Height Fast Hack (http://www.dustindiaz.com/min-height-fast-hack/) - 영문

 

참고페이지

Min-Height Fast Hack (http://mkyoon.com/71) - 한글

저작자 표시
신고

'Development > CSS' 카테고리의 다른 글

구글폰트 - 나눔고딕등  (0) 2013.07.05
Box Shadow - CSS3  (0) 2013.07.05
웹폰트 font-weight:bold; 속성이 적용받지 못하는 상황  (0) 2013.06.12
[CSS] 단위 pt, px, em, ex, %  (0) 2013.05.28
[CSS] min-height, height 핵(hack)없이 사용하기  (0) 2011.02.25
[CSS] 텍스트 줄바꿈 처리 word-break, white-space  (0) 2011.01.20
CSS, div 세로 자동, HTML UI, min-height
현재 0 개의 댓글이 있습니다.
Comment

Blog

[CSS] 텍스트 줄바꿈 처리 word-break, white-space

2011.01.20 19:30 Development/CSS


작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다.

word-break


word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다.


.selector {word-break:break-all;}

위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이 그림을 보시면 단번에 이해가 가실 것 입니다.


단어의 중간에서 줄바꿈이 되는 효과입니다. 이 것의 반대 속성은 nowrap, keep-all 등을 주면 된다는데 제가 실험해본 결과 잘 안되는 것 같습니다. 그래서 이번에 같이 소개할 white-space 를 사용하시면 됩니다.

white-space


white-space는 여러가지 값이 있는데, 정리를 해보자면 이렇습니다.

inherit  말그대로 상속 받는 것
normal  일반적인 것, default
nowrap  줄바꿈을 하지 않는다
pre  <pre>태그와 같은 기능, 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다
pre-line  마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다
pre-wrap  pre-line 과 비슷

말로 길게 설명해 무엇합니까? 그렇다면 눈으로 확인해 봅시다.

HTML 마크업은 다음과 같이 했습니다. 줄바꿈은 왼쪽에 보이는 라인넘버에서 알 수 있듯이 2번 하였습니다. 다시말해 단락이 3개라는 뜻 입니다. 스타일은  넓이를 400px 을 주고 사방으로 padding 을 10px 씩 주었습니다.


일반적으로 랜더링하면 단어 단위로 줄바꿈이 된 형태로 나오게 되는데 여기에서 속서을 하나씩 주면 기능을 한 눈에 알 수 있습니다.

우선 inherit 은 상속되는 것이므로 넘어가고 (IE8에는 인식을 못한다고 합니다.) normal 은 기본인데 Original 과 동일하다고 보시면 됩니다. nowrap 속성을 주게되면 줄바꿈이 되지 않습니다.


그리고 pre 속성은 <pre> 태그와 동일한 역할을 합니다. 마크업에서 줄바꿈 (앤터) 해준 것을 적용해주는 것인데요, 여기서는 두번 줄바꿈을 하였기 때문에 3 단락으로 나뉘어져 있습니다. 그리고 width 를 넘어가는 텍스틑는 줄바꿈이 되지 않습니다.


다음으로 pre-line 속성을 주게되면 pre를 준 것과 같이 마크업에서 줄바꿈 한 부분에서도 줄바꿈이 되고, width 값을 넘어가는 부분에 대하여 줄바꿈이 됩니다.


per-wrap 속성을 주면 pre-line 을 적용해준 것과 동일한 결과가 나오는데 구체적인 차이는 잘 모르겠습니다. 자세한 내용은 w3cschool 을 참조해 보시는 것이 더 좋을 듯 합니다.
저작자 표시
신고

'Development > CSS' 카테고리의 다른 글

구글폰트 - 나눔고딕등  (0) 2013.07.05
Box Shadow - CSS3  (0) 2013.07.05
웹폰트 font-weight:bold; 속성이 적용받지 못하는 상황  (0) 2013.06.12
[CSS] 단위 pt, px, em, ex, %  (0) 2013.05.28
[CSS] min-height, height 핵(hack)없이 사용하기  (0) 2011.02.25
[CSS] 텍스트 줄바꿈 처리 word-break, white-space  (0) 2011.01.20
CSS, css줄바꿈, html 줄바꿈, stylesheet, 스타일시트
현재 0 개의 댓글이 있습니다.
Comment

Dev. Jkun

블로그 이미지
노련한 뱃사공은 거친 파도가 만든다

Visitors

Total : 1,684,069
Today : 748
Yesterday : 147

Catetory

Tags

Notice