2022. 12. 05 TIL html 상단바 안쪽 <a>테그 위치 문제

 

상황: 항해 99 부트 캠프 시작, 토이 프로잭트 진행. 뉴스 크롤링 사이트 만들기

내가 맡은 것 : html 틀, 테크 카테고리 크롤링

 

-문제점:

상단바를 만들기 위해 <div>안쪽에 카테고리를 <a>테그로 넣고 그 카테고리들을 중간지점에 서로 균일한 간격으로 배치하고 싶었는데
중앙에 오게 하기위해서 상단바<div>스타일에 justify-content: center; 를 써줬었는데 그러면 너무가운데로 몰리고 
space-around;로하면 너무 거리가 떨어졌다  (이떄는 상단바<div>의 width가 max인상태)

<div>자체는 width를 max로 하고싶었는데
그렇게하면 안쪽의 a테그들의 간격이 너무 많이 떨어졌다.

 

-해결방법:

상단바<div> width를 적당한 크기로 해주고  (안쪽의 <a>테그들의 간격이 적당하게)

그 상단바<div>를 일단 중앙에 놓은후 그걸 다시<div>로 감싸준다 그리고 그 감싼 <div>의 width를 max로 해준다

그럼 아래와 같은 상단바 완성