See the Pen CSS - Position bottom center by zinee (@zineeworld) on CodePen. 한글로 적으니까 진짜 이상한데... 상황을 설명하자면, 1. position: abolute로 특정 위치가 정해진 상태 2. 워딩에 따라 width는 유동적 3. 항상 중앙에 위치 보통 저런 경우에는 display: inline-block; width: auto; 해놓고 부모 요소에 text-align: center; 를 많이 하지만, position: absolute 상태여서 적용할 수 없었다. 다국어 지원을 하게 되면서 dynamic width로 인한 이슈가 늘 있다. 잠깐 헤맸지만 금방 해결책을 찾았다! transform: translate(-50%); !!

See the Pen CSS Drawing - 11. Jay-g (Kakao Friends) by zinee (@zineeworld) on CodePen. 아... 아주머니?바빴어요 ㅠ_ㅠ 완성도는 주말에 다듬어야지.. 포인트머리 모양

See the Pen CSS Drawing - 10. Apeach (Kakao Friends) by zinee (@zineeworld) on CodePen. 뭐 좀... 덜 비슷한 날도 있고 그런 거 아니겠습니까? 하하핳 만두 아니고 어피치 맞습니다 >.

See the Pen Country Dropdown with flag by zinee (@zineeworld) on CodePen. 구글 계정 생성 폼을 보면 국가코드 드롭다운에 아래처럼 국기가 같이 있다. 그래서 마이뮤직테이스트 모바일 인증 폼에도 적용했었다. 지금은 디자인이 바뀌어서 걷어내게 되었지만 아까워서 코드펜으로 저장해 보았다.

See the Pen [CSS Drawing] BE THE ROCKET ! by zinee (@zineeworld) on CodePen. 비더로켓 이벤트 참가작!

기본 개념 기본 개념은 width 비율 만큼 padding-bottom 값을 동일하게 주면 된다. 100%를 주면 1:1 비율이 되는 것이고, 75% 값을 패딩으로 주면 4:3 비율이 되는 것이다. See the Pen Height equal to dynamic width by zinee (@zineeworld) on CodePen. 응용 사례 See the Pen responsive youtube player by zinee (@zineeworld) on CodePen. 응용하여 쓴 사례로는 모바일 웹에서 유투브 임베디드 플레이어를 가로 폭에 맞춰 높이를 늘려줄 때 사용했다. 유튜브 플레이어 비율은 16:9 이기 때문에 padding-bottom: 56.25% 을 주면 된다. 비율을 빠르게 계산하기 위..

See the Pen CSS Drawing - 08. Ryan (Kakao Friends) by zinee (@zineeworld) on CodePen. 기초강좌 제작 중입니다!coming soon!

See the Pen CSS Drawing - 07. Frodo (Line Friends) by Hyejin Oh (@mmt-zinee) on CodePen. 멋지구만!

See the Pen CSS Drawing - 06. Muzi (Kakao Friends) by Hyejin Oh (@mmt-zinee) on CodePen. 뭐 이렇게 희번득하지.............오늘은 피곤해서 이 정도로 마무리 ^^;;;;;;