좁은 폼 안으로 input, 특히 type이 date인 input을 넣을 때에는 안에 있는 글씨가 길 경우, 잘리는 현상이 있을 수 있습니다. 잘리는 것 정도는 어쩔 수 없다해도 date안에 든 아이콘의 공백이 너무 길어서 당황스러울 때가 있었는데요.

이럴 때, css로 단순하게 해결할 수 있는 방법이 있습니다.
아래 소스를 참고해주세요.

* 참고: 
https://stackoverflow.com/questions/65409348/html-input-date-how-to-decrease-space-between-date-and-icon

 css를 사용하다보면 디테일하게 속성을 선택해야하는 상황이 있습니다. scss를 쓰는 방법 외에 css 상에서 쓸 수 있는 방법이 있는데 바로 css 속성 다중 선택(하위 문자열 일치 속성 선택)입니다. 

예를 들어 class명이 box로 시작되는 div의 텍스트 색상 값을 바꿔야 하는 작업이 있을 경우,

<div class="box-1">text</div>
<div class="box-2">text</div>
<div class="box-3">text</div>
<div class="box-4">text</div>
<div class="boxs-1">text</div>
<div class="boxs-2">text</div>
<div class="boxs-3">text</div>
<div class="boxs-4">text</div>

css로 div값을 잡고 작업을 해도 되고 class명을 추가하는 방법이 있지만 div가 중복이 되거나 class명을 추가할 수 없는 경우에는 아래 내용으로 작업할 수 있습니다.

div[class*="box-"] {
	color:blue;
}

해당 css를 기입할 경우, class명이 box-로 있는 div들만 선택되게 됩니다.

이와 같은 방법으로 여러가지 응용을 통해 작업할 수 있는데, 기본 구문은 [att*=val]로 보시면 됩니다. 

[att*=val]
[속성*=문자열]

비슷한 속성 값으로는, [att^=val]과 [att$=val] 이 있는데, 각각 사용하는 방법이 다릅니다.

 [att^=val]는 문자열(val)이 시작하는 요소를 선택하게 해주는데, 보통 href 링크 속성값 때 많이 쓰입니다. 대표적인 예로는 아래와 같습니다.

a[href^="http://www.domain.com"], a[href^="http://domain.com"] {
  color: blue;
}

[att$=val]는 [att^=val]와 반대로 문자열(val)이 끝나는 요소를 선택하게 해줍니다. 대표적인 예로는 아래와 같습니다.

a[href$=".pdf"] {
  background: url(../images/pdf.png) no-repeat center right;
  padding-right: 20px;
}

* 참고: 
https://www.impressivewebs.com/css3-attribute-selectors-substring-matching/
https://www.w3.org/TR/selectors/#attribute-substrings

보통 리스트를 만들 때, 많이 쓰는 태그는 뭐니뭐니해도 <ul> 이지만 숫자 리스트를 써야할 때는 간혹 <ol>을 쓰기도 하는데, 

앞단에 숫자만 나열하기에는 아쉬움이 남아 숫자를 이쁘게 꾸며볼 생각으로 이것저것 뒤적여보던 중에 <ol>이 아닌 <ul>로, 앞단에 자동으로 카운터가 붙는 리스트를 오직 css로만 써서 만들 수 있는 팁을 발견했습니다. 

먼저 예시로 아래 내용을 준비해주세요.

* HTML

<ul class="num">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non.</li>	
	<li>Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. </li>	
	<li>Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. </li>	
</ul>

* CSS

ul,li {
	list-style:none;
}
.num {
    counter-reset: list-number;
    margin-bottom: 49px;
}
.num > li {
    counter-increment: list-number;
    padding-bottom: 7px;
    font-size: 20px;
}
.num > li::before {
    content: counter(list-number);
    display: inline-block;
    text-align: center;
    line-height: 1.5;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff;
    margin-right: 10px;
    background: #00CE7A;
    font-size: 16px
}

* 적용화면

부모 요소인 counter-reset는 카운터를 할 환경을 만들어주는 css로 list-number; 또는 list-number 0; 으로 값을 초기화 해줍니다. (여기서 list-number는 임의로 적어둔 변수입니다.)

counter-increment는 증가량으로 counter-reset과 마찬가지로 list-number; 또는 list-number 1; 으로 값을 지정해줍니다.

마지막으로 li::before에 content: counter(list-number);를 적어주면 완성됩니다.


* 참고사이트
- https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
- https://blog.logrocket.com/styling-numbered-lists-with-css-counters/
- https://wellcode.tistory.com/12

[javascript] select box css 디자인

select box를 css로 디자인하는 부분은 생각보다 쉽지 않습니다. select는 어떻게든 디자인한다고 하지만

 option 부분과 select의 화살표까지 디자인을 생각하다보면 까다롭다고 느끼게 되기 마련인데요. 

 오늘은 select box를 보다 이쁘게 디자인할 수 있을 만한 방법을 알아보도록 하겠습니다.

이번 예제에서는 화살표 이미지가 필요합니다. 화살표 이미지를 만드시거나 아래에서 다운받아주세요. 

arrow.zip

</head> 안에 제이쿼리 스크립트를 넣어주신 후, html에  소스를 넣어주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<div class="selectbox">
	<dl class="dropdown">
		<dt><a href="#" style="padding-top:4px;"><span>신상품순</span></a></dt>
		<dd>
			<ul class="dropdown2">
				<li><a href="#">신상품순</a></li>
				<li><a href="#">인기상품순</a></li>
				<li><a href="#">낮은가격순</a></li>
				<li><a href="#">높은가격순</a></li>
			</ul>
		</dd>
	</dl>
</div>

그 다음, css로 디자인을 꾸며줍니다.

.desc { color:#e8e8e8;}
.desc a {color:#515151;}
.dropdown {width:103px;margin:0px;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#3b3b3b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#3b3b3b;}
.dropdown dt a:hover { color:#3b3b3b; border: 1px solid #9e9e9e;}
.dropdown dt a {background:#fff url('화살표이미지') no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #9e9e9e; width:82px;height:33px;}
.dropdown dt a span {cursor:pointer; display:block;line-height:29px;padding-left:10px;}
.dropdown dd ul { background:#fff none repeat scroll 0 0; border:1px solid #9e9e9e; color:#515151; display:none;
left:0px; padding:5px 0px; position:absolute; top:-1px; width:auto; min-width:102px; list-style:none; text-align:left;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;padding-left:11px;}
.dropdown dd ul li a:hover { background-color:#e8e8e8;}
.dropdown img.flag { border:none; vertical-align:middle;padding:11px;}
.flagvisibility { display:none;}

마지막으로 스크립트를 넣어주세요.

$(".dropdown img.flag").addClass("flagvisibility");

$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
	
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
/* $("#result").html("Selected value is: " + getSelectedValue("sample"));*/
});
	
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});

$(".dropdown img.flag").toggleClass("flagvisibility");

참고 : http://jsfiddle.net/c2ezuw24/1/