찾다보니 까먹을까 포스팅


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
셀렉트 박스를 배경이미지로 넣어 커스텀으로 사용하려 했는데,

인터넷 익스플로러에서는 적용이 되지를 않는다. 구글링 해서 찾을 결과 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

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
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}


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

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



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

CSS 로 UI를 작성하다가 BOX Shadow 를 정리합니다. 정리가 필요할듯..

먼저 HTML 문서구조를 이해하는게 정말로 중요하지만.. 어느정도 CSS 와 태그는 외워야 할듯.ㅋㅋㅋ


※ 브라우저별 지원여부


일단 예제 실행결과는 다음과 같습니다.




먼저 Outer 영역 코드입니다.

CSS

.ex-1 {

-moz-box-shadow: -5px -5px #888;

-webkit-box-shadow: -5px -5px #888;

box-shadow: -5px -5px #888;

}

.ex-2 {

-moz-box-shadow: -5px -5px 5px #888;

-webkit-box-shadow: -5px -5px 5px #888;

box-shadow: -5px -5px 5px #888;

}

.ex-3 {

-moz-box-shadow: -5px -5px 0 5px #888;

-webkit-box-shadow: -5px -5px 0 5px #888;

box-shadow: -5px -5px 0 5px #888;

}

.ex-4 {

-moz-box-shadow: -5px -5px 5px 5px #888;

-webkit-box-shadow: -5px -5px 5px 5px #888;

box-shadow: -5px -5px 5px 5px #888;

}

.ex-5 {

-moz-box-shadow: 0 0 5px #888;

-webkit-box-shadow: 0 0 5px #888;

box-shadow: 0 0 5px #888;

}

.ex-6 {

-moz-box-shadow: 0 0 5px 5px #888;

-webkit-box-shadow: 0 0 5px 5px #888;

box-shadow: 0 0 5px 5px #888;

}

HTML

<h2>Outer : 테두리 밖</h2>

<div class="ex-1">JKUN.NET<br/>Example 1</div>

<div class="ex-2">JKUN.NET<br/>Example 2</div>

<div class="ex-3">JKUN.NET<br/>Example 3</div>

<div class="ex-4">JKUN.NET<br/>Example 4</div>

<div class="ex-5">JKUN.NET<br/>Example 5</div>

<div class="ex-6">JKUN.NET<br/>Example 6</div>




Inner 영역 코드 입니다.

CSS

.ex-i-1 {

-moz-box-shadow: inset -5px -5px #888;

-webkit-box-shadow: inset -5px -5px #888;

box-shadow: inset -5px -5px #888;

}

.ex-i-2 {

-moz-box-shadow: inset -5px -5px 5px #888;

-webkit-box-shadow: inset -5px -5px 5px #888;

box-shadow: inset -5px -5px 5px #888;

}

.ex-i-3 {

-moz-box-shadow: inset -5px -5px 0 5px #888;

-webkit-box-shadow: inset -5px -5px 0 5px#888;

box-shadow: inset -5px -5px 0 5px #888;

}

.ex-i-4 {

-moz-box-shadow: inset -5px -5px 5px 5px #888;

-webkit-box-shadow: inset -5px -5px 5px 5px#888;

box-shadow: inset -5px -5px 5px 5px #888;

}

.ex-i-5 {

-moz-box-shadow: inset 0 0 5px #888;

-webkit-box-shadow: inset 0 0 5px#888;

box-shadow: inner 0 0 5px #888;

}

.ex-i-6 {

-moz-box-shadow: inset 0 0 5px 5px #888;

-webkit-box-shadow: inset 0 0 5px 5px#888;

box-shadow: inset 0 0 5px 5px #888;

}

HTML

<h2>Inner : 테두리 안</h2>

<div class="ex-i-1">JKUN.NET<br/>Example 1. Inner</div>

<div class="ex-i-2">JKUN.NET<br/>Example 2. Inner</div>

<div class="ex-i-3">JKUN.NET<br/>Example 3. Inner</div>

<div class="ex-i-4">JKUN.NET<br/>Example 4. Inner</div>

<div class="ex-i-5">JKUN.NET<br/>Example 5. Inner</div>

<div class="ex-i-6">JKUN.NET<br/>Example 6. Inner</div>


Mutiple 영역 코드입니다.

CSS

.ex-m-1 {

-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red,

-40px 30px yellow, -40px -30px 50px blue;

-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px

red, -40px 30px yellow, -40px -30px 50px blue;

box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red,

-40px 30px yellow, -40px -30px 50px blue;

}

HTML

<div class="ex-m-1">JKUN.NET<br/>Example 1. Multi</div>




RGB & RGBA 영역코드 입니다.

CSS

.ex-r-1 {

-moz-box-shadow: 5px 5px rgb(0, 0, 0);

-webkit-box-shadow: 5px 5px rgb(0, 0, 0);

box-shadow: 5px 5px rgb(0, 0, 0);

}


.ex-r-2 {

-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.7);

box-shadow: 5px 5px rgba(0, 0, 0, 0.7);

}


.ex-r-3 {

-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.5);

box-shadow: 5px 5px rgba(0, 0, 0, 0.5);

}


HTML

<div class="ex-r-1">JKUN.NET<br/>Example 1. RGB</div>

<div class="ex-r-2">JKUN.NET<br/>Example 2. RGBA</div>

<div class="ex-r-3">JKUN.NET<br/>Example 3. RGBA</div>



Boarder Radius 영역코드 입니다.

CSS

.ex-rd-1 {

-moz-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 5px 5px black;

-webkit-box-shadow: 5px 5px black;

box-shadow: 5px 5px black;

}


.ex-rd-2 {

-moz-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 5px 5px 5px black;

-webkit-box-shadow: 5px 5px 5px black;

box-shadow: 5px 5px 5px black;

}


HTML

<div class="ex-rd-1">JKUN.NET<br/>Example 1. Radius</div>

<div class="ex-rd-2">JKUN.NET<br/>Example 2. Radius</div> 


첨부파일은 예제파일 입니다.

백문이 불여일타. 뭐든 한번 쳐보는게 쵝오!!!


boxout.html





출처 : 제피's 님의 블로그


웹 폰트를 적용할 경우 다음과 같이 font-weigth 속성을 제외하고 선언할 경우 bold 속성이 적용되지 않는 문제를 확인했습니다.

@font-face{ 
    font-family: '나눔고딕'; 
    src:url('../font/NanumGothic.woff') format('woff'); 
}


따라서 웹 폰트 이용시에는 font-weight를 다음과 같이 적용하여야 합니다.

@font-face{ 
    font-family: '나눔고딕'; 
    font-weight: normal; 
    font-style: normal; 
    src:url('../font/NanumGothic.woff') format('woff'); 
}


style속성중 font-weight:bold; 가 적용됨을 확인할 수 있습니다.

보통 디자인 결과물이 pt, px형태이기 때문에, 그대로 사용하는 것이 편하지만,


해상도와 플랫폼 등에 따라서 접근성을 가지기 위해서는 em, ex, %를 사용하는 것이 좋습니다.

pt, px가 절대적인 단위인 반면에 em, ex, %는 상위 요소에 대한 상대적인 크기를 가지고 있어서 레이아웃을 좀 더 유동적으로 적용시킬 수 있습니다.

예를들어, 최상위 요소가 9pt인 경우 다음과 같습니다.
대부분 브라우저는의 폰트 사이즈는 12pt, 16px, 1em, 100%가 기본입니다.

9pt, 12px, 0.75em, 75%


이를 간단히 표로 정리하면,
 
PointPixelem%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%


자, 위에서 ex를 나열하지 않은 이유는 무엇일까요?

em과 ex의 차이는 다음과 같습니다.

em : 요소의 대문자 M의 가로 너비를 1로 합니다. 
ex : 요소의 폰트의 소문자 엑스'x'의 높이를 1로 합니다.


폰트가 달라지더라도 pt와 px, em, %값은 어느정도 유사함을 갖지만, ex의 경우에는 폰트마다 다른 경우가 많아서 값이 심하게 변하는 경우가 많습니다.

개인적으로는 ex보다는 em을 사용하시기를 권합니다.


이걸 매번 계산하기는 매우 귀찮으므로, 변환해주는 링크를 이용합시다.


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) - 한글


작업을 하다보면 텍스트가 정해진 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 을 참조해 보시는 것이 더 좋을 듯 합니다.

+ Recent posts