[css] 게시판처럼 꾸밀때 라인한줄 동시 선택되는 CSS 꾸며보자.

게시판 형태로 자료를 작성할때 마우스를 가져다 대면 한줄이 전체 선택되는 CSS class가 있을까?

이런 의문에서 찾아보고, 실제 구현한 내용을 공유해 봅니다.

결과를 보면 아래와 같이 한줄이 마우스를 갖다 대면 이렇게 나옵니다.

 

보통은 a태그를 이용해서 글씨를 클릭해서 선택하는 것이 많은데, 좀 더 UI가 이쁜 것 같아서 이렇게 하는 것도 좋을 것 같네요. 더 직관적이고...

위의 형태를 하려면 당연히 CSS 내용이 있어야 합니다.

style.css 파일에 아래의 내용이 있어야 저런 동작을 이끌어 낼 수 있는 거죠.

@import url(//devizzer.github.io/fonts/ko/notosanskr/font.css);
body {margin: 0; line-height: 150%; font-family: 'Noto Sans KR',sans-serif;}
h1,h2,h3,h4,h5,h6 {margin: 0;}
ul, ol {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}
.limit {overflow: hidden; width: 1680px;}
.header-logo {padding: 20px 0;}

.btn_state {padding: 3px 8px;border: 1px solid gray;border-radius: 3px;font-weight:bold;font-size:14px}

@keyframes blink-effect { 50% { opacity: 0; } }
.blink {animation: blink-effect 1s step-end infinite;}
.color-red {color:red}
.color-green {color:green}
.color-black {color:black}
.color-blue {color:blue}
.color-purple {color:purple}
.color-brown {color:brown}

.list-header {padding: 20px 0;}
.list-header .list-title > span {font-weight:normal;}
.list-row {display: table; width: 100%;border-bottom: 1px solid #eee; font-size: 13px; color: #666;}
.list-row a:link, .list-row a:visited {color:black}
.list-row--header {padding: 10px 0; background: #f8f8f8; border-top: 2px solid #333;font-weight: bold; color: #222;}
.list-link {display: table; width: 100%; color: #666;}
.list-link:hover {background: #ddd; }
.list-cell {display: table-cell; padding: 10px 5px;text-align: center; vertical-align: middle;}
.list-cell--10 {width: 10px;}
.list-cell--20 {width: 20px;}
.list-cell--30 {width: 30px;}
.list-cell--40 {width: 40px;}
.list-cell--50 {width: 50px;}
.list-cell--60 {width: 60px;}
.list-cell--70 {width: 70px;}
.list-cell--80 {width: 80px;}
.list-cell--90 {width: 90px;}
.list-cell--100 {width: 100px;}
.list-cell--110 {width: 110px;}
.list-cell--120 {width: 120px;}
.list-cell--130 {width: 130px;}
.list-cell--140 {width: 140px;}
.list-cell--150 {width: 150px;}
.list-cell--160 {width: 160px;}
.list-cell--170 {width: 170px;}
.list-cell--180 {width: 180px;}
.list-cell--190 {width: 190px;}
.list-cell--200 {width: 200px;}
.list-cell--210 {width: 210px;}
.list-cell--220 {width: 220px;}
.list-cell--230 {width: 230px;}
.list-cell--240 {width: 240px;}
.list-cell--250 {width: 250px;}
.list-cell--260 {width: 260px;}
.list-cell--270 {width: 270px;}
.list-cell--280 {width: 280px;}
.list-cell--290 {width: 290px;}
.list-cell--300 {width: 300px;}
.list-cell--350 {width: 350px;}
.list-cell--400 {width: 400px;}
.list-cell--500 {width: 500px;}

.list-cell span {display: block;}
.ui-button {text-align: right;}
.ui-button a {display: inline-block; background: #eee; font-size: 12px; color: #aaa; padding: 10px 20px; border-radius: 5px;}
/* index */
.section-index {margin-top: 50px;}
.section-index__title {padding: 5px 0;font-size: 18px;}

/* form */
.form-unit {}
.form-unit--ib {display: inline-block; margin-right: 20px;}
.work-order {margin-top: 20px; padding: 10px; border: 1px solid #000;}
.work-gubun {border-bottom: 1px solid #000;}

.component {padding: 10px;border: 1px solid #eee;}

.nav-group {overflow: hidden;}
.nav-item {float: left; margin-right: 15px;}

.main {}
.main__title {padding: 30px 0;}
.section__title {}
.sort {padding: 20px; border: 1px solid #eee; box-sizing: border-box;}
.sort__item {display: inline-block; margin-right: 20px;}

.pagenation {padding: 30px 0;text-align: center;}
.pagenation__arrow {display: inline-block;}
.pagenation__group {display: inline-block; margin: 0 30px;}
.pagenation__item {display: inline-block; margin: 0 10px;}

.footer {padding: 50px 0;}
@media screen and (max-width: 1279px) {}
@media screen and (min-width: 1280px) {}

가장 중요한 부분은 .list~~~~~~~~~ 이렇게 생긴 것이 결국 화면구성을 도와줍니다.

실제 프로그램은 아래와 같이 구현되는 것입니다.

<link rel="stylesheet" type="text/css" href="../css/style.css">

    <main class="main">
      <div class="limit">
        <div class="list-header">
        <ul class="list-group">
          <li class="list-row list-row--header">
            <div class="list-cell list-cell--40">번호</div>
            <div class="list-cell list-cell--90">출고일자</div>
            <div class="list-cell list-cell--70">접수일</div>
          </li>

          <li class="list-row">
              <div class="list-cell list-cell--40"><?=$start_num ?></div>
              <div class="list-cell list-cell--90"><?=$outdate?></div>
              <div class="list-cell list-cell--70"><?=$item_indate?></div>
          </li>
        </ul>
        </div>
      </div>
    </main>

위의 코드로 만들면 보기 좋은 게시판 라인선택 UI가 될 것입니다.