2 touch zoom, CSS, pinch zoom

찾다보니 까먹을까 포스팅


https://googlechrome.github.io/samples/touch-action/



저작자표시

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

css pinch zoom  (0) 2018.08.28
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
CSS, HTML, select box
셀렉트 박스를 배경이미지로 넣어 커스텀으로 사용하려 했는데,

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

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



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

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

css pinch zoom  (0) 2018.08.28
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
CSS, 스타일시트

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

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

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

고민이네..


display:inline-block VS float:left

의견좀 부탁드립니다.

저작자표시

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

css pinch zoom  (0) 2018.08.28
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
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, div 세로 자동, HTML UI, min-height

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, css줄바꿈, html 줄바꿈, stylesheet, 스타일시트

작업을 하다보면 텍스트가 정해진 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

+ Recent posts