[FE] 👀 아이콘 연습하다 너무 귀여워서 헤더를 만들어보았다
수업 복습하면서 아이콘을 하나씩 만드는데 어떻게 해야 효율적으로 쓸 수 있을지 고민하다가 갑자기 얘네가 넘 귀여워서 뭐라도 써먹어보고싶었다.
생각_1
일단 선생님이 알려주신대로 겉박스를 만들어둔걸 어떻게든 재활용하고싶었는데 속박스 사이즈와 다르니까 아이콘이 자꾸 잘리더라고..? 그래서 겉박스도 사이즈 버전대로 만들어야겠다는 생각을 했다. (맞는 해법인지는 모르겠다)
가만 보니 겉박스가 필요한건 overflow로 글씨를 없애버리기 위함인데, 그럼 그냥 태그에서 문자를 쓰지 않고 태그만 붙여서 하면 안되나? 이런식으로 말이다.....🤔
<a class="icon"></a>
생각_2
<!--아이콘을 만들어두니까 html에 적용할것도 너무 간단명료해져서 좀 충격적...-->
<body>
<h1>헤더만들기</h1>
<div class="header">
<div class="icon40 icon-menu">메뉴아이콘</div>
<div><span>피드</span></div>
<div class="icon30 icon-alarm">알림아이콘</div>
</div>
</body>
(*반응형을 고려한 @media는 아직 넣지 않았다)
아직도 마진과 패딩 조절이 어렵다 흑흑
일단 폭을 지정해두고 justify-content: space-between;을 적용한건 기발하고 완벽하고 멋졌는데! 😎
아이콘들이 안쪽으로 조금씩 들어와야하다보니 피그마에서 x축 보고 치수를 계산한것도 좋았는데!
메뉴 속박스(슈도코드로 이미지가 뜨는 박스) 에다가 marin-left를 적용해도 잘 됐건만, 오른쪽 알람아이콘은 margin-right를 적용하니까 회색 선보다 더 바깥쪽으로 마진이 튀어나가버렸다. 나는 폭이 지정되어있으니까 당연히 안쪽으로 들어올거라 생각했는데.
padding을 지정하면 이미지가 밀려버려서 그것때문에 겉박스를 크게 만들기엔 이상한것같고... 결국 겉박스에다가 margin-right를 줘서 움직이게 했는데 이게 맞는지 모르겠다. 그렇다면 메뉴도 겉박스에다가 margin을 적용해야 맞을텐데!?...라고 생각하며 지금 다시 해봤더니 속박스에 마진을 줬을때 아이콘이 잘려나간게 맞았다.
아까 너무 신이 나서 몰랐나보다. 어쩐지 알림아이콘보다 10px이나 크면서 왜이렇게 작지??싶었다.
이제 아이콘도 다룰줄 알겠다, 피드 하단바도 만들어봐야겠다 😁