[웹 UI 개발] 표 - 2 / 표와 position
2023. 3. 23. 13:56
테이블은 브라우저마다 렌더링하는 방식이 모두 다르기 때문에 크로스브라우징이 어려운 태그 중 하나이다.
아래의 코드는 table, tr, td 각 요소에 "position: relative;"를 적용할 경우, 셀 안의 "position: absolute;"인 요소가 어디에 위치하게 되는지 확인해본 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표와 position</title>
<link rel="stylesheet" href="css/table_position.css">
</head>
<body>
<div class="wrap">
<table class="td_relative">
<caption>td에 relative</caption>
<tr>
<td class="relative_section">
<div class="absolute_section"></div>
</td>
</tr>
</table>
</div>
<div class="wrap">
<table class="tr_relative">
<caption>tr에 relative</caption>
<tr class="relative_section">
<td>
<div class="absolute_section"></div>
</td>
</tr>
</table>
</div>
<div class="wrap">
<table class="table_relative relative_section">
<caption>table에 relative</caption>
<tr>
<td>
<div class="absolute_section"></div>
</td>
</tr>
</table>
</div>
<div class="wrap div_relative">
<table>
<caption>div에 relative</caption>
<tr>
<td>
<div class="relative_section">
<div class="absolute_section"></div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
table {
border: 1px solid #000;
table-layout: fixed;
width: 100%;
height: 150px;
border-collapse: collapse;
}
.td_relative {
border-color: red;
}
.tr_relative {
border-color: blue;
}
.table_relative {
border-color: green;
}
.wrap {
margin: 50px;
}
.relative_section {
position: relative;
}
.absolute_section {
position: absolute;
width: 30px;
height: 30px;
top: 0;
left: 0;
background-color: #000;
}
.td_relative .absolute_section {
background-color: red;
}
.tr_relative .absolute_section {
background-color: blue;
}
.table_relative .absolute_section {
background-color: green;
}
.div_relative .relative_section {
width: 100%;
height: 100%;
}
이렇게 브라우저마다 "position:relative;"가 적용되는 방식이 다른 것을 확인할 수 있다.
td나 내부 div에 "position:relative;"를 적용시키는게 가장 생각한대로 동작하는데, 아래와 같은 차이가 있다.
- td : 요소의 복잡도(요소가 여러가지 추가)에 따라 예상치 못한 버그가 발생할 수 있음.
- 내부 div : 높이 값과 콘텐츠가 있다면 가장 정상적으로 노출되고, 안전한 방법.
즉, 테이블에 직접 position을 적용시키지 말고(테이블은 각 요소를 배치하는 틀로 보기), 셀 안에 div를 추가하여 그 div에 position이나 꾸밈 요소를 적용시키는 것이 좋다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 표 - 4 / 달력 제작 (0) | 2023.03.24 |
|---|---|
| [웹 UI 개발] 표 - 3 / 표의 border 속성 (0) | 2023.03.23 |
| [웹 UI 개발] 표 - 1 / 표 접근성 (0) | 2023.03.23 |
| [웹 UI 개발] 표 - 0 (0) | 2023.03.23 |
| [웹 UI 개발] 이미지 리스트 - 7 / 이미지 리스트 추가 기능 제작 (0) | 2023.03.23 |
