마켓컬리 header 부분 만들기
이렇게 만들려고 하는데 상태가 이렇다... x자를 첫번째 줄에 넣고 중간의 폰트를 center로 오게 해야하는데, 이상하게 적용이 되지 않는다. 무엇이 문제일까? text-align: center를 했음에도 적용이 되지 않는다. x자를 오른쪽으로 넣기위해 text-align:right을 해도 그렇다. 아마 inline이 아닌 태그가 있어서 그런것 같아 inline-block으로 display를 변경해보려고 한다. img태그는 원래 inline이고, p태그 때문이지 않을까? p태그에 inline-block 속성을 넣으니 아예 왼쪽으로 붙어버렸다. 문제는 container에 position: relative;를 설정해주지 않아서 였다. 이것을 설정하게 되면 안의 element들이 전부 static에서 rel..
UX 디자인
2021. 6. 13. 14:48
Navbar 컨텐츠 테두리치기
navbar에서 컨텐츠를 테두리치려니 각자 아이템의 사면에 border가 적용되서 중간의 선이 진하게 나온다. 어떻게 고쳐야 할까? 일단 전체적인 큰 틀인 태그에 테두리를 넣었다. 그리고 중간에 chicken과 beef 밑에 선을 추가해주려고 생각했다. 그래서 chicken과 beef 는 nav-item under라는 다른 클래스를 더해주고 두개의 item에만 선을 추가해주었다. 결과는 성공! 하지만 item수가 수없이 많으면 어떻게 할까? 좀 더 효율적인 방안이 필요하다. 참 신기한 점은 똑같은 코드인데 안되다가 갑자기 된다. 정말 알수 없는 노릇이다...
UX 디자인
2021. 5. 25. 21:20