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

여러 개의 항목 중에서 하나만 선택하게 하는 선택 버튼 형태는  라디오 버튼 (input type="radio")을 쓰는 것이 가장 기본적이긴 하지만, 필요에 따라서는 a 링크를 써야할 때가 있습니다. 

이번에 제가 진행했었던 결제 페이지 만들기가 그런 경우였는데요. 아래 내용을 그대로 따라해봅시다. 

* HTML

<a href="#;" class="Type" id="card">
  <div class="payType on">
    <div class="payType_title">
      간편결제<br /><span>(네이버페이,카카오페이,삼성페이 등)</span>
    </div>
    <div class="chk_img" id="card_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</a>
<a href="#;" class="Type" id="card_ISP">
  <div class="payType">
    <div class="payType_title">
      신용카드 결제<br /><span>(인증서 제출방식, 앱카드)</span>
    </div>
    <div class="chk_img" id="card_ISP_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</a>
<a href="#;" class="Type" id="mobile">
  <div class="payType">
    <div class="payType_title">휴대폰 결제</div>
    <div class="chk_img" id="mobile_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

* css

  .payType {
    display: block;
    border: 1px solid #dadada;
    border-radius: 5px;
    width: 517px;
    padding: 23px;
    margin-bottom: 10px;
  }
  .payType > .payType_title {
    display: inline-block;
    vertical-align: middle;
  }
  .payType_title {
    font-size: 15px;
    font-weight: 700;
    color: #ff273d;
  }
  .payType_title > span {
    font-size: 12px;
    font-weight: 500;
    color: #333;
  }
  .payType.on {
    background: #fff6f6;
    border: 1px solid #ff273d;
  }
  .chk_img {
    float: right;
    display: none;
    vertical-align: middle;
  }
  .payType.on > .chk_img {
    display: inline-block;
  }

* javascript

  $(".Type").click(function (e) {
    e.preventDefault();
    var id = $(this).attr("id");

    $(".Type .payType").removeClass("on");
    $(".chk_img").hide();
    $("#" + id + " .payType").addClass("on");
    $("#" + id + "_arr").show();
  });

이처럼 클릭 시, class를 추가 또는 제거하는 스크립트로 선택된 버튼과 선택되지 않은 버튼을 구분해줍니다.

위 내용으로 a링크가 아닌 라디오 버튼으로 버튼형태를 만들 수 있습니다. 아래 내용을 참고해주세요.

* html

<label class="Type" id="card">
  <div class="payType on">
    <input type="radio" name="value1" />
    <div class="payType_title">
      간편결제<br /><span>(네이버페이,카카오페이,삼성페이 등)</span>
    </div>
    <div class="chk_img" id="card_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</label>

<label class="Type" id="card_ISP">
  <input type="radio" name="value1" />
  <div class="payType">
    <div class="payType_title">
      간편결제<br /><span>(네이버페이,카카오페이,삼성페이 등)</span>
    </div>
    <div class="chk_img" id="card_ISP_arr">
      <img src="http://imivory.me/img/noname/icon_chk.png" />
    </div>
  </div>
</label>

<label class="Type" id="mobile">
  <input type="radio" name="value1" />
  <div class="payType">
    <div class="payType_title">휴대폰 결제</div>
    <div class="chk_img" id="mobile_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</label>

* css

.payType {
    display: block;
    border: 1px solid #dadada;
    border-radius: 5px;
    width: 517px;
    padding: 23px;
    margin-bottom: 10px;
  }
  .payType > .payType_title {
    display: inline-block;
    vertical-align: middle;
  }
  .payType_title {
    font-size: 15px;
    font-weight: 700;
    color: #ff273d;
  }
  .payType_title > span {
    font-size: 12px;
    font-weight: 500;
    color: #333;
  }
  .payType.on {
    background: #fff6f6;
    border: 1px solid #ff273d;
  }
  .chk_img {
    float: right;
    display: none;
    vertical-align: middle;
  }
  .payType.on > .chk_img {
    display: inline-block;
  }

  input[type="radio"] {
    display: none;
  }

* javascript

  $(".Type").click(function (e) {
    e.preventDefault();
    var id = $(this).attr("id");

    $(".Type .payType").removeClass("on");
    $(".chk_img").hide();
    $("#" + id + " .payType").addClass("on");
    $("#" + id + "_arr").show();
  });

금액 부분을 넣을 때, 숫자 3자리마다 콤마가 없으면 가독성이 떨어지기 때문에 되도록 콤마를 넣어주는 것이 좋습니다.

금액에 자동 콤마를 넣는 경우는 여러가지가 있지만 input에 사용자가 입력한 숫자에 자동적으로 넣게 하거나, 스크립트를 통해 나온 숫자에 콤마를 붙여주는 방법을 소개하려 합니다.

새로 만든 html 파일에 아래 내용을 넣어줍니다.

* html

<input type="text" maxlength="10" onkeyup="inputNumberFormat(this);" placeholder="input 숫자만" />

javascript 파일에 해당 내용을 넣어줍니다.
(아래 내용에는 input에 숫자만 넣을 수 있는 스크립트가 포함되어 있습니다.)

* javascript

function comma(str) {
        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    }

    function uncomma(str) {
        str = String(str);
        return str.replace(/[^\d]+/g, '');
    } 
    
    function inputNumberFormat(obj) {
        obj.value = comma(uncomma(obj.value));
    }
    
    function inputOnlyNumberFormat(obj) {
        obj.value = onlynumber(uncomma(obj.value));
    }
    
    function onlynumber(str) {
	    str = String(str);
	    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g,'$1');
	}

 이렇게 하면 input에 콤마를 자동적으로 넣을 수 있게 됩니다. 다음은 영역 안에 있는 숫자에 콤마를 붙여보죠.

* html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<span id="money">60000</span><span>원</span>

* javascript

var money = $('#money').text();
var money2 = money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$('#money').text(money2);

id 안에 들어오는 숫자 데이터는 자동적으로 콤마가 붙여지게 됩니다.

* 참고사이트
https://chobopark.tistory.com/175