How To – 목록 그리드 보기

w3.css

목록 그리드 보기

CSS와 JavaScript를 사용하여 목록 보기와 그리드 보기를 만드는 방법을 알아보자.

목록 보기나 그리드 보기를 버튼을 클릭하여 확인해보자.

목록 그리드 보기

1단계) HTML 추가

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="btnContainer">

  <button class="btn" onclick="listView()"><i class="fa fa-bars"></i> List</button>

  <button class="btn active" onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>

</div>

<div class="row">

  <div class="column" style="background-color:#aaa;">

    <h2>Column 1</h2>

    <p>Some text..</p>

  </div>

  <div class="column" style="background-color:#bbb;">

    <h2>Column 2</h2>

    <p>Some text..</p>

  </div>

</div>

<div class="row">

  <div class="column" style="background-color:#ccc;">

    <h2>Column 3</h2>

    <p>Some text..</p>

  </div>

  <div class="column" style="background-color:#ddd;">

    <h2>Column 4</h2>

    <p>Some text..</p>

  </div>

</div>

2단계) CSS 추가

.column {

  float: left;

  width: 50%;

  padding: 10px;

}

.row:after {

  content: "";

  display: table;

  clear: both;

}

.btn {

  border: none;

  outline: none;

  padding: 12px 16px;

  background-color: #f1f1f1;

  cursor: pointer;

}

.btn:hover {

  background-color: #ddd;

}

.btn.active {

  background-color: #666;

  color: white;

}

3단계) ​​JavaScript 추가

var elements = document.getElementsByClassName("column");
var i;
function listView() {
for (i = 0; i < elements.length; i++) { elements[i].style.width = "100%"; } } function gridView() { for (i = 0; i < elements.length; i++) { elements[i].style.width = "50%"; } } var container = document.getElementById("btnContainer"); var btns = container.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); }[/code] [ex]예제 보기[/ex]