Display table-cell 여백 - display table-cell yeobaeg

Question

HTML+CSS

목차 Show

HTML 테이블여백,셀간격,Cell Padding,Cell Spacing
첫 번째 문제!
다음 문제!!
해답 들어갑니다!!

HTML 테이블여백,셀간격,Cell Padding,Cell Spacing

HTML

테이블 여백 설정하기 Cell Padding셀패딩

셀 패딩 기능은, 셀 내용과 테두리 사이의 공간을 지정합니다.

padding을 지정하지 않을 경우, 테이블 셀은 패딩없이 표시됩니다.

여백을 설정하려면, CSS 패딩 속성을 사용합니다.

아무런 여백 지정도 하지 않으면 아래와 같습니다.

<!DOCTYPE html><html>

<head>

table {width:300px; }

</head>

Display)

중앙선관위 A-web 해외부정선거연루 충격 클릭!

레알 한국 정상임?

대법원장이 선관위원장이라서 선관위를 혼내켜줄 수 없고ㅠ

모든 셀의 내부에 15필셀의 여백을 설정하면아래와 같습니다.

Markup)
<!DOCTYPE html><html><head><style>th,td {padding:15px;}</style></head><body><table width=300" border="1"><tr><th>cell</th><th>cell</th></tr><tr><td>cell</td><td>cell</td></tr><tr><td>cell</td><td>cell</td></tr></table></body></html>

Display)

셀들의 내부가 부풀어 오른 것처럼 팽창 되어 있는 모습입니다.이렇게 셀의 내부에 여백 공간이 생기는 것이 바로 패딩(padding)기능 입니다.

Cell Spacing 셀과 셀사이 간격

셀 간격은 셀 사이의 공간을 지정할 수 있습니다.테이블의 셀 간격을 설정하려면, CSS에서 border-spacing 속성을 사용합니다 .

Example

<!DOCTYPE html>

<html>

<head>

<style>

th,td {padding:15px;}

table{border-spacing:10px;}

</style>

</head>

<body>

</table>

</body>

</html>

나는 table-cell 초보다.
아주 간단한 정보를 메모해 두려고 한다.

첫 번째 문제!

이미지를 보면, display: table-cell을 설정해둔 div 에 margin이 안 먹히는 걸 알 수 있다.
검색해보니, display:table-cell은 원래 margin이 먹히지 않는다고 한다.
그럼 대체 어떻게 서로를 띄워줄 수 있단 말이지…?

margin 을 padding으로 바꿨더니 된다.(ㅎ 허탈)
간단하죠?

다음 문제!!

일단 위 사진을 한 번 보자.

현재, 예약한 숙소 사진이 들어갈 자리(연청록색 박스)div와 그 숙소의 information이 들어갈 자리(우측) div가 한 div로 묶여 있다. 두 div는 현재 둘 다 display:table-cell이 적용되어 있다!!!

<div className="myPageGuestOne"> ===> 숙소 예약 한개 단위
  <div className="bnbImg" /> ===> 숙소 이미지
  <div className="guestOneInfoDiv" /> ===> 숙소 설명
</div>

이 상황에서 guestOneInfoDiv 가
★★★bnbImg를 제외하고 myPageGuestOne의 나머지 공간★★★을 모두 사용했으면 한다.
왜냐하면 내가 집어넣은 회색 라인이 div의 끝까지 길게 채워지길 바라기 때문이다!!!
지금 guestOneInfoDiv의 폭은 다음과 같다. 짧다. 싫다.

해답 들어갑니다!!

현재 bnbImg와 guestOneInfoDiv 둘 다에 display: table-cell이 적용되어 있다고 말했었다.
근데 이 display: table-cell은 기준점으로 삼고자 하는 부모에 display: table을 적용시켜 줘야만이, 정말 table-cell을 제대로 사용할 기반을 마련한 거라고 할 수 있다!!!

현재 이렇게 내부 div에 display: table-cell이 적용되어 있는데,

이렇게 부모 되는 div에 display: table을 적용시켜 주는 것이다. 하긴 생각해보면, 정작 표는 없는데 표의 구성요소인 셀(cell)만 주구장창 사용하고 있던 상황이다.

전체 table 의 크기가 어떻게 되는지, table-cell이 기준점으로 삼아야 하는 부모 table이 무엇인지를 정해주었을 뿐이다.
그러자 table-cell의 크기는 알아서 부모인 table내부를 꽉 채우도록 변경이 되었다!