마켓컬리 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에서 relative 포지션으로 변경된다. 따라서 1050px인 width안에 항목들이 위치하게 된다.

 

 

요런식으로...

그리고 닫기 버튼인 x자를 position: absolute;로 설정해주면 끝에 붙게된다. x자의 크기가 커서 넓이를 줄이기 위해 a 태그인 .quit에 설정해보았더니 먹히지 않았다. 그래서 그 안의 img에 따로 지정해주어야 한다는 것을 깨달았다.