혹시 현대카드 앱 써보셨나요? 현대카드 앱의 검색창을 보면 포커스됐을 때 라인이 펼쳐지는 인터랙션을 볼 수 있습니다.
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741233295/23.focus-within/f0abcmc7y62fp6qqwkry.gif" alt="현대카드 검색창 포커스 인터랙션" width={1080*0.4
} height={588*0.4}/>
 
꽤나 쿨한 인터랙션이라고 생각하고 있던 차에 새롭게 진행한 프로젝트에 적용해 보면 좋겠다는 생각이 들었습니다. 이번 포스트에서는 :focus-within 선택자를 사용하여 해당 인터랙션을 구현한 이야기를 해보겠습니다.
<Spacing size="lg" />
## 어떻게 구현할까?
 
간단하게 input이 포커스 됐을 때 after 가상 요소의 scaleX를 조정해 구현하면 될 것 같았습니다. 그러나 안타깝게도 input 태그는 닫힌 태그라 가상 요소를 사용할 수 없었습니다. input 태그가 포커스될 때마다 부모 요소에 class를 붙여주는 식으로 구현해야하나 고민하던 차에 CSS만으로 해당 인터랙션을 구현할 수 있는 방법을 알게 되었습니다.
 
## :focus-within
 
:focus-within 선택자는 포커스된 요소 또는 자손 요소가 포커스 되었을 때 스타일을 적용할 수 있는 선택자입니다. 
이를 사용하여 input이 포커스 되었을 때 부모 div 태그에 스타일을 적용하여 쉽게 인터랙션을 구현할 수 있습니다.
 
## 최종 코드
 
최종 코드는 이렇게 됩니다.
 
```html
<div class="field">
 <input type="text"/>
</div>
```
 
```css
.field {
 position: relative;
 padding: 4px 0;
 border-bottom: 1px solid #c7c3bc; 
}

.field::after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: 0;
 width: 100%;
 height: 1px;
 background-color: #605d56; 
 transform: translateX(-50%) scaleX(0);
 transition: transform 200ms ease-in-out;
}

.field:focus-within::after {
 transform: translateX(-50%) scaleX(100%);
}

```
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741234005/23.focus-within/cjdkbx3uvx8x9uyll6ml.gif" alt="현대카드 검색창 포커스 인터랙션" width={480
} height={180}/>
 
## 포스팅을 마치며
 
:focus-within 선택자를 사용해 쉽게 인터랙션을 구현할 수 있었습니다. form이나 input 관련한 스타일 작업을 하기에 굉장히 유용해서 앞으로 다른 프로젝트에서도 잘 사용할 것 같습니다. 그럼 여기서 글을 마치도록 하겠습니다 👋👋👋
 
## 참고 자료
 
- [MDN :focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)

focus-within 선택자로 폼 필드에 인터랙션 추가하기

프로젝트를 진행하던 중 버튼이 화면 오른쪽 끝에 배치되는 레이아웃을 구현하게 됐습니다.
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741078154/22.margin-auto/o0f5pzvvdmxao65b5fz5.png" width={1264*0.4} height={774*0.4} alt="스타일 적용 전 이미지, 버튼이 왼쪽에 있음" caption="초록색 버튼이 오른쪽 끝으로 가야 함" />
 
버튼을 오른쪽으로 밀기 위해 margin-left : auto를 적용했지만?
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741227468/22.margin-auto/r6m3mr1vuks5hoyujovr.jpg" width={1264*0.4} height={774*0.4} alt="스타일 적용 후 이미지, 버튼이 왼쪽에 있음" />
아무 일도 일어나지 않았습니다!
 
자, 이럴 때는 당황하지 않고 침착하게 구글 창을 켜서 마법의 키워드 **not working**으로 검색해 줍니다.
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741078832/22.margin-auto/eq7kw3xzu8s0y2i6byem.gif" alt="구글 창에 마법의 키워드 not working을 입력해 보세요" width={480} height={180}/>
 
<Spacing size="lg" />

## margin auto 적용 조건
 
제가 찾은 [스택오버플로우](https://stackoverflow.com/questions/9226151/margin-left-auto-and-margin-right-auto-not-working-on-input) 글에 따르면 margin-left auto를 적용하기 위해서는 두 가지 조건이 필요했습니다.
 
1. block 요소일 것
2. 요소의 width 값이 고정되어 있을 것
 
생각해 보면 당연합니다. margin auto는 남는 여백을 자동으로 분배합니다. 따라서 width를 가지지 않는 inline 요소 혹은 width가 지정되지 않아 부모의 너비를 여백 없이 꽉 채운 block 요소에는 margin auto가 적용될 수 없습니다.
 
margin auto가 적용이 안 되는 이유를 알아냈으니 이제 display block과 width 값을 지정해 주면 문제는 쉽게 해결됩니다.
 
## 요소의 콘텐츠에 따라 너비 지정하기
 
그런데 여기서 한 가지 고민이 추가됩니다.
요소의 width를 고정값으로 정하고 싶지 않은 것이죠. 
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741228996/22.margin-auto/iaoa3ybglqiue5iwlxcw.png" alt="버튼에 고정값을 적용한다면?" width={618*0.5} height={214*0.5}/>
 
고정값을 사용하면 콘텐츠 내용이 달라졌을 때 UI가 쉽게 깨지게 됩니다.
고민하던 차에 다행히 요소 안에 포함된 콘텐츠를 기준으로 width를 정할 수 있는 CSS 속성값을 알게 되었습니다.
 
### max-content
 
```css
.button {
 width: max-content;
}
```
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741230782/22.margin-auto/jplbik9w7irghqrgduxz.png" alt="max-content" width={838* 0.5} height={150 * 0.5}/>

 
max-content는 콘텐츠가 가지는 최대 크기를 지정합니다. 이때 부모 요소의 너비를 초과하더라도 줄 바꿈이 되지 않습니다.
 
### min-content
 
```css
.button {
 width: min-content;
}
```
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741230781/22.margin-auto/qj8fp7ofyys4guvrazy9.png" alt="min-content" width={798* 0.5} height={198 * 0.5}/>

 
min-content는 콘텐츠에 포함된 가장 긴 단어를 기준으로 크기를 지정하고 그 크기를 초과하면 줄 바꿈 됩니다.
 
### fit-content
 
```css
.button {
 width: fit-content;
}
```
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741230784/22.margin-auto/ekfw0issf7mhrnacxckv.png" alt="fit-content" width={828* 0.5} height={246 * 0.5}/>

 
fit-content는 max-content와 마찬가지로 콘텐츠가 가지는 최대 크기를 지정하지만 부모 요소의 너비를 초과하게 되면 줄 바꿈 됩니다.
 
## 최종 코드
 
버튼에 margin-left auto를 적용하기 위한 최종 스타일입니다. 저는 콘텐츠가 가지는 최대 크기만큼 너비를 지정하지만 오버플로우가 발생하지 않도록 fit-content 값을 사용했습니다.
 
```css
.button {
 display: block;
 margin-left: auto;
 width: fit-content;
}
```
 
위 코드를 적용하면 버튼이 오른쪽으로 잘 밀리는 것을 볼 수 있습니다.
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741230785/22.margin-auto/gxhzbt3znekqdtxsdged.jpg" alt="최종 화면" width={632*0.7} height={387*0.7}/>
 
## 호환성 이슈
 
다만 Can I Use를 보면 IE에서는 max-content, min-content, fit-content를 지원하지 않는 것을 확인할 수 있습니다.
 
<PostImage src="https://res.cloudinary.com/yun-log/image/upload/v1741231283/22.margin-auto/pacj4yatq3vfzkr5anwr.jpg" alt="can i use" width={685} height={624}/>
 
만약 IE까지 고려해야 한다면 div 태그로 버튼을 한 번 감싸고 flex를 사용해서 오른쪽으로 밀어버리는 방법이 정신 건강에 이로울 것 같습니다 🙄
 
## 포스팅을 마치며
 
사실 디자인이 변경되면서 해당 코드는 제거하게 되었습니다. 그렇지만 앞으로 프론트 작업을 하며 또 이런 상황을 마주칠 것 같아 이번에 알게 된 내용을 정리해 보았습니다. CSS 작업을 할 때 어려운 점은 어떤 부분이 문제라고 에러를 던져주지 않는다는 점인 것 같습니다. 따라서 각 속성의 특성을 정확하게 알아두는 게 중요한 것 같습니다. 그럼 이번 포스트는 여기서 마무리하도록 하겠습니다 👋👋

margin-left : auto 적용하기