OK DDODDO LAB

HTML

<div class="button-box">
    <button class="btn">HELLO</button>
    <button class="btn2">slide</button>
    <button class="btn3">hover</button>
</div>

CSS

/* 버튼 */
.button-box {
  /* height: 100vh; */
  /* display: flex;
  justify-content: center;
  align-items: center; */
}
.button-box .btn {
  font-size: 25px;
  padding: 15px 30px;
  color: #000;
  border: 3px solid #000;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 4px;
  transition: all 0.4s;
}
.button-box .btn:focus {
  outline: none;
}
.button-box .btn:hover {
  background-color: #000;
  color: #fff;
}

/* slide button btn2 */
.button-box .btn2 {
  font-size: 25px;
  padding: 15px 30px;
  border: 3px solid gold;
  background-color: #a1a1a1;
  color: gold;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: bold;
  position: relative;
  transition: all 0.4s;
  overflow: hidden;
  z-index: 1;
}
.button-box .btn2:focus {
  outline: none;
}
.button-box .btn2::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: gold;
  top: 100%;
  left: 0;
  transition: all 0.4s;
  z-index: -1;
}
.button-box .btn2:hover::before {
  transform: translateY(-100%);
}
.button-box .btn2:hover {
  color: #0f0f0f;
}

hover line

/* hover line */
.button-box .btn3 {
  font-size: 25px;
  padding: 15px;
  border: 0;
  background-color: transparent;
  letter-spacing: 0;
  -webkit-transition: all 0.28s ease-in-out;
  transition: all 0.28s ease-in-out;
}
.button-box .btn3:focus {
  outline: none;
}
.button-box .btn3:hover,
.button-box .btn3:focus,
.button-box .btn3:active {
  letter-spacing: 5px;
}
.button-box .btn3:after,
.button-box .btn3:before {
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 0.28s ease-in-out;
  transition: all 0.28s ease-in-out;
  width: 0;
}
.button-box .btn3:hover:after,
.button-box .btn3:hover:before {
  border-color: #e00303;
  -webkit-transition: width 350ms ease-in-out;
  transition: width 350ms ease-in-out;
  width: 70%;
}
.button-box .btn3:hover:before {
  bottom: auto;
  top: 0;
}

스크롤 시 특정 지점에서 요소(element)를 고정 하기위해서는 position: sticky 값을 사용하면 되는데,
sticky가 제대로 고정 되지 않을 경우 아래 사항을 확인 하시기 바랍니다. 

1. 고정 요소에 top, left 값이 있는지 확인 (가로 스크롤의 경우 bottom, right)
2. 고정 요소 위 부모 요소에 overflow 값이 hidden, scroll 또는 auto로 설정된 경우

부모 요소가 display: flex일 경우, 세로 정렬 align-items: flex-start 값이 필요합니다.
이유는 flex박스의 align-items은 기본 값으로 stretch로 되어 있어 고정 요소가 컨테이너의 전체 높이를 차지하기 때문에 고정 되지 않습니다.

사용예시

.container {
  display: flex;
  align-items: flex-start;
  height: 1000px;
}

HTML

<!-- checkbox -->
<ul class="list-btn">
  <li>
    <input type="checkbox" id="chk1-1" name="chk1" />
    <label for="chk1-1">chk1</label>
  </li>
  <li>
    <input type="checkbox" id="chk1-2" name="chk1" />
    <label for="chk1-2">chk2</label>
  </li>
  <li>
    <input type="checkbox" id="chk1-3" name="chk1" />
    <label for="chk1-3">chk3</label>
  </li>
  <li>
    <input type="checkbox" id="chk1-4" name="chk1" />
    <label for="chk1-4">chk4</label>
  </li>
</ul>

<!-- radio -->
<ul class="list-btn">
  <li>
    <input type="radio" id="chk1-11" name="radio1" />
    <label for="chk1-11">radio1</label>
  </li>
  <li>
    <input type="radio" id="chk1-22" name="radio1" />
    <label for="chk1-22">radio2</label>
  </li>
  <li>
    <input type="radio" id="chk1-33" name="radio1" />
    <label for="chk1-33">radio3</label>
  </li>
  <li>
    <input type="radio" id="chk1-44" name="radio1" />
    <label for="chk1-44">radio4</label>
  </li>
</ul>

CSS

input[type="checkbox"],
input[type="radio"] {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  outline: none;
}
.list-btn {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: -0.375rem -0.1875rem;
}
.list-btn > li {
  position: relative;
  margin: 0.375rem 0.1875rem;
}
.list-btn > li > input[type="checkbox"],
.list-btn > li > input[type="radio"] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.list-btn > li > input[type="checkbox"] + label,
.list-btn > li > input[type="radio"] + label {
  background: #fff;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  border: 1px solid #e6e6e6;
  /*border-radius: 1.25rem;*/
  color: #202020;
  width: auto;
  text-align: center;
  display: inline-block;
}
.list-btn > li > input[type="checkbox"]:checked + label,
.list-btn > li > input[type="radio"]:checked + label {
  background: #4130df;
  border: 1px solid #4130df;
  color: #fff;
}

코드확인

https://codepen.io/csvhixfk-the-scripter/pen/LYvVdEZ

checkbox / radio CSS style

input[type=checkbox]와  input[type=radio]는 안보이게 하고, label을 이용한 적용 예시 입니다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML</title> 
</head>
<body>
<div class="chk_div">
  <h2>체크박스</h2>
  <div class="item_cont">
    <div class="wrap_chk">
      <input id="inp_chk_kor1" class="inp_chk" name="inp_chk_kor" type="checkbox" value="Y">
      <label for="inp_chk_kor1" class="inp_chk_lab"></label>
    </div>
    <span class="inp_lang">Event</span>
  </div>

  <div class="item_cont">
    <div class="wrap_chk">
      <input id="inp_chk_kor2" class="inp_chk" name="inp_chk_kor" type="checkbox" value="Y">
      <label for="inp_chk_kor2" class="inp_chk_lab"></label>
    </div>
    <span class="inp_lang">Event1</span>
  </div>

  <div class="blank"></div>

  <h2>라디오박스</h2>
  <div class="item_cont list_sort">
    <div class="wrap_chk">
      <input id="inpLevel1" class="inp_chk" name="inp_radio" type="radio" value="Y" />
      <label for="inpLevel1" class="inp_chk_lab"></label>
    </div>
    <span class="inp_lang">1</span>
  </div>
  <div class="item_cont list_sort">
    <div class="wrap_chk">
      <input id="inpLevel1" class="inp_chk" name="inp_radio" type="radio" value="Y" />
      <label for="inpLevel1" class="inp_chk_lab"></label>
    </div>
    <span class="inp_lang">2</span>
  </div>
</div>

<div class="file_div">
  <h2>파일첨부</h2>
  <div class="file_box">
    <input type="text" class="txt_file">
    <div class="btn_box">
      <label class="btn_txt">첨부</label>
      <input type="file" class="btn_file">
    </div>
  </div>
</div>

</body>
</html>

CSS

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }

  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
  body {line-height: 1;}
  ol, ul {list-style: none;}
  blockquote, q {quotes: none;}
  blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
  table {border-collapse: collapse;border-spacing: 0;}
  h2 {font-size: 18px;line-height:20px;font-weight:bold;margin-bottom:10px}
  body {background-color:#f1f1f1;}
  input {margin:0;padding:0;}
  label {margin:0;padding:0;}
  .blank {height:80px;}
  .chk_div {height:200px}
  .item_cont {float:left; padding: 10px 0; width:150px}
  .wrap_chk {position: relative; width:20px; height:20px; margin-right:10px}
  .wrap_chk .inp_chk {position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;margin:0;opacity: 0.01;cursor:pointer}
  .wrap_chk .inp_chk_lab {display:block;overflow:hidden;width:20px;height:20px;border:1px solid #efe6d7;border-radius:2px;background-color:#fff;}
  .wrap_chk .inp_chk_lab {font-weight:normal;font-size:16px;color:#333}
  .wrap_chk .inp_chk_lab::after {display:none;width:7px;height:3px;margin:6px auto 0;border:3px solid #f88379;border-top:none;border-right:none;
    -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);content:""}
  .wrap_chk .inp_chk:hover + label::after {display:block;opacity:0.3}
  .wrap_chk .inp_chk:checked + label::after {display:block}
  .inp_lang {height:20px;font-size:1em;line-height:1.2;float:left;margin-top:-20px;margin-left:30px}

  /*라디오*/
  .item_cont.list_sort .wrap_chk label.inp_chk_lab {border-radius:20px}
  .item_cont.list_sort .wrap_chk label.inp_chk_lab::after {width:10px;height:10px;margin:4px auto 0;border:0 none;border-radius:10px;background-color:#f88379}
  
  /* 파일첨부 */
  .file_div {display:block;margin-top:20px;}
  .file_box {position:relative;width:100%;height:50px}
  .txt_file {overflow:hidden;float:left;width:70%;height:50px;padding:0 10px;box-sizing:border-box;}
  .btn_box {position:relative;float:left;width:30%;height:50px;line-height:50px;text-align:center;background-color:#333;}
  .btn_box .btn_txt {text-align:center;color:#fff;width:100%;height:100%;}
  .btn_box .btn_file {position:absolute;top:0;left:0;width:100%;height:100%;background-color:#eee;opacity:0;cursor:pointer}

코드확인

https://codepen.io/csvhixfk-the-scripter/pen/BaEyXRN

2023년도 IE는 배제하고 작업을 하는 경우가 대부분 이겠지만.

아직까지 IE적용도 요청하는 곳도 있어서 정리해 봅니다.

<!--[if lte IE 8]>

<link href="ie.css" rel="stylesheet">

<!--[if lte IE 8]>

익스플로러에서만 다른 브라우저가 무시하는 조건문을 해석한다.

기존 css링크 아래에 적어준다.

바로 하위호환성에 따른 조건문인데 상세내용은

<!--[if lte IE 8]> <-- 익스플로러 8이하의 모든버전일경우 아래내용을 실행

<link href="ie.css" rel="stylesheet"> ie.css라는 파일을 링크한다

<!--[if lte IE 8]> <--조건문 종료

조건은

lt IE <버전> - 지정한 버전보다 낮은버전

lte IE <버전> - 지정한 버전이하의 낮은버전

IE <버전> - 지정한 버전

gte IE <버전> - 지정한 버전 이상의 버전

gt IE <버전> - 지정한 버전보다 높은 버전

ex)

....

....

<link herf="../css/ie9.css" type="text/css" media="all" rel="stylesheet">

<!--[if lte IE 8]>

<link href="ie8.css" rel="stylesheet">

<!--[if lte IE 8]>

....

....

--->익스플로러 8이하의 경우 ie8.css파일을 적용한다