마켓컬리 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..
gutter를 사용한 row, col 여백
p-3는 padding, 3의 간격을 의미한다.이렇게 하니 뒤에 background color가 bg-light이라 흰색이 되었다.하지만 나는 좌우 여백을 줄이고 상하 여백을 늘리는걸 원하고, 색깔은 옅은 회색을 원했기에 좌우여백: p-1 (color는 내가 회색으로 만들려고 옆에 추가한 그냥 임의의 class인데 안되서 삭제하였다.)상하여백: row옆에 g-2가 아닌 g-4를 추가하고 (g=gutter)를 넣었다.색깔: p-1을 css시트에서 background-color: lightgrey;로 하니 성공! bg-light의 색깔을 css에서 바꾸어봤는데 안되더라... 아마 !important 부트스트랩 property 때문인 것 같은데 아니었다. 과연 무엇때문일까...? 어쨋뜬 p-1을 바꾸어서 해..
Navbar md 사이즈 화면에서의 expand 없애기
부트스트랩 메뉴얼에 나와있는대로 navbar-expand-md를 넣으니 메뉴 아이템들이 expand되어버린다. 하지만 내가 원하는 방향은 md 사이즈일때 옆에 아무것도 display되지 않는 것이다. 그래서 이걸 어떻게 고칠까 한참을 헤맸더니...정말 쉬웠다. 여기서 .navbar-expand-md 밑의 .navbar-nav 에 display: none; 을 걸어주었다. 결과는 성공인줄 알았는데, 화면을 작게해서 navbar icon을 눌러보니 expand가 되지않는다. 다시 고쳐보자.
Navbar 컨텐츠 테두리치기
navbar에서 컨텐츠를 테두리치려니 각자 아이템의 사면에 border가 적용되서 중간의 선이 진하게 나온다. 어떻게 고쳐야 할까? 일단 전체적인 큰 틀인 태그에 테두리를 넣었다. 그리고 중간에 chicken과 beef 밑에 선을 추가해주려고 생각했다. 그래서 chicken과 beef 는 nav-item under라는 다른 클래스를 더해주고 두개의 item에만 선을 추가해주었다. 결과는 성공! 하지만 item수가 수없이 많으면 어떻게 할까? 좀 더 효율적인 방안이 필요하다. 참 신기한 점은 똑같은 코드인데 안되다가 갑자기 된다. 정말 알수 없는 노릇이다...
