CSS Position과 Flexbox를 활용한 요소 정렬

CSS 요소 정렬의 여러 가지 방법

1. Position을 이용한 방법

.parent {
  position: relative;
}

.child {
  position: absolute;
  right: 0;
}

• right: 0만으로는 원하는 정렬이 안되는 이유
• 부모 요소에 position: relative 필요

2. Flexbox를 이용한 방법

.container {
  display: flex;
  justify-content: flex-end;
}

• 더 현대적이고 유연한 방식
• 부모-자식 관계가 명확함

3. 그 외 알아두면 좋은 정렬 방법

• text-align: right: 인라인 요소 정렬
• margin-left: auto: 블록 요소 오른쪽 정렬
• Grid 시스템 활용

각 방법의 장단점

Position

장점:

• 정확한 위치 지정 가능
• 다른 요소와 독립적

단점:

• 부모-자식 관계가 복잡해질 수 있음
• 반응형 디자인에 불리

Flexbox

장점:

• 유연한 레이아웃 구성
• 반응형 디자인에 적합
• 직관적인 속성들

단점:

• IE 지원 문제 (현대에는 큰 문제 아님)

결론

상황에 따라 적절한 방법을 선택하는 것이 중요합니다.
특히 React Native에서는 Flexbox를 기본으로 사용하므로, Flexbox를 활용한 레이아웃 구성에 익숙해지는 것이 좋습니다.