syleemomo의 IT 블로그

프론트엔드/HTML & CSS 연습과제 해답

8. 표를 만드는 테이블 요소 연습문제 해답

syleemomo 2023. 6. 19. 16:27
728x90

세로중앙 배치문제
status 의 동그라미(.dot)와 글자를 묶고 있는 부모요소에 position: relative 를 적용하고, 그 안의 동그라미와 글자에는 position: absolute, top: 50%, transform: translateY(-50%) 적용해서 세로 중앙에 배치하면 된다. 

display: inline-block 동작 안하는 문제

부모요소의 너비가 좁으면 자식요소에 아무리 display: inline-block 을 적용해도 수평정렬되지 않는다. 부모요소의 width 를 넓히면 된다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
       <div class="container">
        <h1>Users Table UI</h1>
        <br>
        <table>
            <thead>
                <tr>
                    <th scope="col">User</th>
                    <th scope="col">Status</th>
                    <th scope="col">Location</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Contact</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                       <div class="user-info">
                        <div class="user-info-img">
                            <img src="./user-profile.jpg" alt="user-profile">
                        </div>
                        <div class="user-info-text">
                            <h5>Kiran Acharya</h5>
                            <p>@kiranacharyaa</p>
                        </div>
                       </div> 
                    </td>
                    <td>
                        <span class="dot"></span>Active
                    </td>
                    <td>Bangalore</td>
                    <td >+91&nbsp;9876543215</td>
                    <td>
                        <button>Contact</button>
                    </td>
                    <td class="setting">
                        <span class="material-icons-outlined">
                            more_vert
                        </span>
                        <div class="dropdown">
                            <a>Edit</a><br>
                            <a>Delete</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                       <div class="user-info">
                        <div class="user-info-img">
                            <img src="./user-profile.jpg" alt="user-profile">
                        </div>
                        <div class="user-info-text">
                            <h5>Kiran Acharya</h5>
                            <p>@kiranacharyaa</p>
                        </div>
                       </div> 
                    </td>
                    <td>
                        <span class="dot"></span>Active
                    </td>
                    <td>Bangalore</td>
                    <td >+91&nbsp;9876543215</td>
                    <td>
                        <button>Contact</button>
                    </td>
                    <td class="setting">
                        <span class="material-icons-outlined">
                            more_vert
                        </span>
                        <div class="dropdown">
                            <a>Edit</a><br>
                            <a>Delete</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                       <div class="user-info">
                        <div class="user-info-img">
                            <img src="./user-profile.jpg" alt="user-profile">
                        </div>
                        <div class="user-info-text">
                            <h5>Kiran Acharya</h5>
                            <p>@kiranacharyaa</p>
                        </div>
                       </div> 
                    </td>
                    <td>
                        <span class="dot"></span>Active
                    </td>
                    <td>Bangalore</td>
                    <td >+91&nbsp;9876543215</td>
                    <td>
                        <button>Contact</button>
                    </td>
                    <td class="setting">
                        <span class="material-icons-outlined">
                            more_vert
                        </span>
                        <div class="dropdown">
                            <a>Edit</a><br>
                            <a>Delete</a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
       </div> 
    </section>
    <script>
        window.onload = function(){
            const dropdowns = document.querySelectorAll('.material-icons-outlined')
            
            for(let dropdown of dropdowns){
                console.log(this.nextElementSibling)
                dropdown.addEventListener('click', function(e){
                    this.nextElementSibling.classList.toggle('show')
                })
            }
        }
    </script>
</body>
</html>
:root{
  --primary-color: #007bff;
}
html, body{
  margin: 0; padding: 0;
}
section{
  padding-top: 3rem;
}
.container{
  width: 60%; /* margin:atuo 적용이 안되서 해결함 */
  /* width: max-content; */
  padding: 0 15px;
  margin: 0 auto;
}
.container h1{
  margin: 0;
  font-size: 2.5rem;
}
table{
  border-spacing: 0 15px;
  width: 100%;
}
tbody:before { /* thead tbody 여백 */
  content: "-";
  display: block;
  color: transparent;
}
button{
  border: none; outline: none;
  color: white;
  background-color: var(--primary-color);
  padding: 0.25rem 0.5rem;
  font-size: .875rem;
  border-radius: .2rem;
  cursor: pointer;
}
table tbody tr{
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  border-bottom: 30px solid transparent;
}
table thead th, table tbody tr td{
  padding: .5rem;
}
table thead th{
  text-align: left;
}
table tbody tr td{
  background-color: #fff;
  padding: .5rem;
  min-width: 90px;
}
.user-info{
  /* border: 1px solid red; */
  min-width: 250px;
}
.user-info-img, .user-info-text{
  /* border: 1px solid green; */
  display: inline-block;
  vertical-align: middle;
}
.user-info-img img{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: .3rem;
  border: 3px solid #fff;
}
.user-info-text h5, .user-info-text p{
  padding: 0; margin: 0;
}
.user-info-text h5{
  font-size: 1.5rem;
}
.user-info-text p{
  color: #6c757d;
}
.dot{
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: green;
  margin: 0 .2rem;
}
.setting{
  text-align: center;
  cursor: pointer;
  padding: 0;
  color: var(--primary-color);
}
.setting:hover{
  opacity: .8;
}
.material-icons-outlined{
  /* text-align: center; */
}
table thead th:nth-child(6){
  text-align: center;
}
.dropdown{
  display: none;
}
.show{
  display: block;
}

 

제이쿼리 버전 - CSS 는 동일함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
       <div class="container">
        <h1>Users Table UI</h1>
        <br>
        <table>
            <thead>
                <tr>
                    <th scope="col">User</th>
                    <th scope="col">Status</th>
                    <th scope="col">Location</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Contact</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                       <div class="user-info">
                        <div class="user-info-img">
                            <img src="./user-profile.jpg" alt="user-profile">
                        </div>
                        <div class="user-info-text">
                            <h5>Kiran Acharya</h5>
                            <p>@kiranacharyaa</p>
                        </div>
                       </div> 
                    </td>
                    <td>
                        <span class="dot"></span>Active
                    </td>
                    <td>Bangalore</td>
                    <td >+91&nbsp;9876543215</td>
                    <td>
                        <button>Contact</button>
                    </td>
                    <td class="setting">
                        <span class="material-icons-outlined" id="0">
                            more_vert
                        </span>
                        <div class="dropdown">
                            <a>Edit</a><br>
                            <a>Delete</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                       <div class="user-info">
                        <div class="user-info-img">
                            <img src="./user-profile.jpg" alt="user-profile">
                        </div>
                        <div class="user-info-text">
                            <h5>Kiran Acharya</h5>
                            <p>@kiranacharyaa</p>
                        </div>
                       </div> 
                    </td>
                    <td>
                        <span class="dot"></span>Active
                    </td>
                    <td>Bangalore</td>
                    <td >+91&nbsp;9876543215</td>
                    <td>
                        <button>Contact</button>
                    </td>
                    <td class="setting">
                        <span class="material-icons-outlined" id="1">
                            more_vert
                        </span>
                        <div class="dropdown">
                            <a>Edit</a><br>
                            <a>Delete</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                       <div class="user-info">
                        <div class="user-info-img">
                            <img src="./user-profile.jpg" alt="user-profile">
                        </div>
                        <div class="user-info-text">
                            <h5>Kiran Acharya</h5>
                            <p>@kiranacharyaa</p>
                        </div>
                       </div> 
                    </td>
                    <td>
                        <span class="dot"></span>Active
                    </td>
                    <td>Bangalore</td>
                    <td >+91&nbsp;9876543215</td>
                    <td>
                        <button>Contact</button>
                    </td>
                    <td class="setting">
                        <span class="material-icons-outlined" id="2">
                            more_vert
                        </span>
                        <div class="dropdown">
                            <a>Edit</a><br>
                            <a>Delete</a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
       </div> 
    </section>
    <script
    src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
    integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE="
    crossorigin="anonymous"></script>
    <script>
        window.onload = function(){
            $('.material-icons-outlined').click(function(){
                console.log($(event.target).next().toggleClass('show'))
            })
        }
    </script>
</body>
</html>
728x90
저작자표시 비영리 변경금지

'프론트엔드 > HTML & CSS 연습과제 해답' 카테고리의 다른 글

4. 박스모델 연습과제 해답 - 텍스트 애니메이션 효과  (0) 2023.06.22
8. 폼 요소의 종류 연습과제 해답  (0) 2023.06.21
5. HTML5 섹셔닝 (시맨틱 태그) 연습과제 해답  (0) 2023.06.20
블록 및 인라인 레벨 요소 연습과제 해답  (3) 2023.06.16
6. 제목, 문단, 구분선, 정형화된 텍스트 연습과제 해답  (0) 2023.06.15

'프론트엔드/HTML & CSS 연습과제 해답'의 다른글

  • 현재글8. 표를 만드는 테이블 요소 연습문제 해답

관련글

티스토리툴바