📖Today I Learned

┑custom input，select box

✔input custom

.txt-hide {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

イメージ交換テクノロジ

✔ココアの使い方

.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
    /* 들여쓰기로 안보이는 곳으로 위치시키기 */
}

.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
  /* transparent 키워드는 IE9부터 사용 가능
 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent */
}

.screen_out {
      overflow: hidden;
      position: absolute;
      width: 0;
      height: 0;
      line-height: 0;
      text-indent: -9999px;
}

.ir_wa{
	display: block;
	overflow: hidden;
	position: relative;
	z-index: -1;
	width: 100%;
	height: 100%
}

✔NAVERの使い方

.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    /* clip속성으로 요소 잘라내기 */
    width:1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

✔クーボンの使い方

.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

瓇CSS Sprite技術

image sprite generator
https://www.toptal.com/developers/css/sprite-generator/

✔列缇娜显示应对法

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;