DrawMap: Button, 부모 요소에 이미지 및 글자 사이즈 맞추기

02 Aug 2023 • TIL • Project

UMC 동아리의 여름방학 프로젝트가 시작되었다. 프로젝트의 이름은 DrawMap이다. 상세한 설명은 나중에 따로 정리하고..
프로젝트를 시작하면서 일단 내가 맡은 부분은 버튼 컴포넌트를 제작하는 것이다.
버튼은 다양한 종류가 존재하는데 나는 크게 두개로 나뉘었다. Button 과 ButtonSelct. Button은 단순 클릭만 하는 버튼이라면 ButtonSelect는 말 그대로 Select, 드롭다운해서 항목을 선택하는 버튼이다. ButtonSelect는 추가 디자인이 필요해서 일단 미뤄두고, 해당 글은 Button 컴포넌트에 관한 글이다.

Button 컴포넌트 설명

Button 컴포넌트의 props는 일단 3가지로 type, img, content이다.
img는 이름 그대로 이미지를 넣는 부분이다.
content는 버튼이 이미지가 아닌 글자를 담고 있는 버튼이거나, 클릭하거나 hover하면 이미지였던 버튼이 글자를 담고 있는 버튼으로 바뀔 때 나타나야 할 버튼 글자를 담는다.
type은 버튼의 종류는 작성하는 부분이다. 버튼의 종류는 default, arrow, text-btn, more, text-more, acting이 있다.

drawmap 버튼 종류1

  • more

    이미지의 가장 상단의 버튼으로, default 버튼보다 사이즈가 작기 때문에 따로 분류하였다.

  • default

    모든 버튼의 기본이 되는 버튼이다. 따로 type을 지정해주지 않아도 될 것 같긴 하지만, 버튼을 사용할 때 확실하기 분류해주기 위해서 default라는 type명을 부여했다.

  • acting

    default 버튼에서 hover나 click시 이미지였던 버튼이 글자로 변경되는 버튼이다. 해당 버튼때문에 따로 span 태그를 추가하여 style로 값이 들어오지 않는다면 display:none을 해줬다.

drawmap 버튼 종류2

  • text-btn

    버튼의 내용이 글자만 존재하는 버튼이다. 이미지는 들어오지 않기 때문에 img 태그의 style에 img가 들어오지 않는다면 display:none으로 변경되도록 해줬다. 이걸 해주지 않는다면 해당 버튼을 사용할 때 이미지 alt가 보이게 된다.

  • ButtonSelect

    Select 버튼인데 추후 따로 컴포넌트를 만들어서 제작할 예정

  • arrow

    이미지가 화살표일 때, 해당 타입의 버튼을 사용해준다. default와 more 버튼과는 이미지 사이즈가 약간 다르기 때문에 따로 정의해줬다.

  • text-more

    해당 버튼은 text-btn과 다르게 사이즈가 굉장히 작기 때문에, 따로 정의해줬다.

auto와 max-content 설명

버튼 사이즈에 맞춰서 사용할 이미지의 사이즈가 자동으로 조절되도록 코드를 짜고 싶었다. 최대한.. 코드를 줄이고 싶었달까…
서칭의 서칭 끝에 다음과 같이 아주 좋은 방법을 찾아냈다.

  • width: auto;

    width 속성을 명시하지 않으면 auto가 기본값으로 사용이 된다.
    100%가 기본값이 아니다..

    auto를 사용하면 브라우저가 해당 요소의 width 속성값을 자동으로 계산해준다. 부모 요소로 부터 주어진 가용 너비에서 좌우 margin 크기를 제외한 너비를 width 값으로 사용한다.

  • width: max-content

    요소의 너비를 최대한 늘이고 싶을 때 사용한다. 최대 너비 역시 해당 요소가 담고 있는 컨텐츠에 의해 변경된다.

부모 요소에 이미지 사이즈 자동 맞추기

css 코드 이미지 2

부모 요소의 width가 존재해도 이미지 width와 height가 있기 때문에 대부분 부모 박스 밖으로 튀어나온다.

그렇기에 해결 방법(?)은 다음과 같다.
부모요소에 width를 주고 img에 width:100%를 주면 부모 요소의 너비의 100%를 차지하게 된다. 그리고 height:auto를 주면 원래 이미지가 가지고 있던 비율에 맞춰서 자동으로 높이가 조절된다!

글자 내용(컨텐츠)에 따라 버튼 사이즈 자동 조절

css 코드 이미지 1

text-btn(이미지에서는, level로 명시)의 경우에는 버튼 안의 내용이 글자이다. 이때, 버튼에 width를 한정시키게 되면 안의 컨텐츠가 버튼을 삐져나가거나 세로로 글자가 배열되거나.. 쨋든 이상하게 변한다.
해당 문제는 width를 max-content로 하면 해결된다. width: max-content로 하면 글자(컨텐츠)의 사이즈에 맞춰 자동으로 width가 조절된다!

마치며

새로운 프로젝트를 시작하게 되었는데, 어김없이 몰랐던 부분이 나타나고 그러다보면 새롭게 알게되는 내용이 많은 것 같다. 이래서 프로젝트는 꼭 해봐야 하는 것 같다.
그리고, 역시 효율적으로 살기 위해서 사람은 노력을 해야 하는 것 같다. 나중에 귀찮아지지 않기 Button 컴포넌트를 수정하지 않기 위해서 최대한 효율적으로 코드를 작성하려고 하는데 생각보다 쉽지 않다. 편히 살려면 그만큼 노력이 필요한게 맞다…

참고
부모 요소(element) 속 이미지 크기 맞추기
CSS의 width 속성과 너비 결정 매커니즘

 TIL  DrawMap  CSS

Comments

Related Posts