[CSS] 웹페이지 스타일링 - 부모와 자식관계 7

웹페이지 스타일은 부모태그와 자식태그와의 관계로 만들어지는 경우가 있는데 어떤 경우가 있는지 알려줘 일립시스라던가 플렉스 포지션 렐러티브와 앱솔루트 등 가능한 많은 케이스를 알려줘

 

웹페이지 스타일링에서 부모 태그와 자식 태그의 관계는 매우 중요합니다. 여러 스타일링 기법이 부모-자식 관계를 기반으로 작동합니다. 아래에 주요한 몇 가지 예를 들어 설명하겠습니다.

1. 플렉스(Flexbox)

플렉스 레이아웃을 사용하면 부모 컨테이너가 자식 요소들을 쉽게 배치하고 정렬할 수 있습니다.

부모 (컨테이너) 스타일

.parent {
  display: flex;
  justify-content: center; /* 가로 축에서 중앙 정렬 */
  align-items: center;     /* 세로 축에서 중앙 정렬 */
  height: 100vh;           /* 부모 컨테이너의 높이를 전체 뷰포트 높이로 설정 */
}

 

자식 스타일

.child {
  flex: 1; /* 자식 요소가 동일한 비율로 나눠짐 */
}

 

2. 일립시스(Ellipsis)

텍스트 오버플로를 처리할 때 유용한 기법입니다. 부모 요소의 폭을 넘어서면 말줄임표(...)로 표시합니다.

부모 스타일

.parent {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 

자식 스타일

.child {
  /* 부모와 동일한 규칙 적용 */
}

 

3. 포지션(relative와 absolute)

부모 요소를 기준으로 자식 요소의 위치를 결정할 수 있습니다.

부모 스타일

.parent {
  position: relative; /* 자식 요소의 위치 기준점이 됨 */
}

 

자식 스타일

.child {
  position: absolute;
  top: 50px; /* 부모의 위쪽에서 50px 떨어짐 */
  left: 100px; /* 부모의 왼쪽에서 100px 떨어짐 */
}

 

4. 그리드 레이아웃(Grid Layout)

부모 컨테이너를 그리드로 설정하고 자식 요소들을 그리드 셀에 배치합니다.

부모 스타일

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 그리드, 각 열이 동일한 크기 */
  grid-gap: 10px; /* 그리드 셀 사이의 간격 */
}

 

자식 스타일

.child {
  grid-column: span 2; /* 자식 요소가 두 열을 차지함 */
}

 

5. Overflow와 Scroll

부모 요소의 크기를 넘는 자식 요소의 컨텐츠를 스크롤할 수 있게 합니다.

부모 스타일

.parent {
  width: 300px;
  height: 200px;
  overflow: auto; /* 스크롤 가능 */
}

 

자식 스타일

.child {
  height: 400px; /* 부모 요소보다 큰 높이 */
}

 

6. 상속(Inheritance)

부모 요소에서 설정한 스타일이 자식 요소에 상속되는 경우가 있습니다.

부모 스타일

.parent {
  font-family: Arial, sans-serif; /* 자식 요소들이 이 글꼴을 상속받음 */
  color: blue; /* 자식 요소들이 이 색상을 상속받음 */
}

 

자식 스타일

.child {
  /* 상속된 스타일 적용됨 */
}

 

7. Display: none와 Visibility: hidden

부모 요소가 display: none 또는 visibility: hidden인 경우, 자식 요소도 보이지 않게 됩니다.

부모 스타일

.parent {
  display: none; /* 자식 요소들도 함께 숨겨짐 */
}

 

자식 스타일

.child {
  /* 부모의 display 설정에 따라 영향을 받음 */
}

 

이와 같은 방식으로, 부모와 자식 태그 간의 관계를 활용하여 다양한 스타일링을 할 수 있습니다. 각 기법은 특정 상황에 유용하며, 여러 기법을 조합하여 복잡한 레이아웃과 스타일링을 구현할 수 있습니다.