2023-05-22 마켓컬리 상단바 제작

마켓컬리 상단바1080px  만들어

 

마켓컬리 상단바 형식을 간단하게 만들어보자

우리가 만들 부분은 저 위에 카테고리, 신상품~ 배송안내  저부분을 만들어 볼것이다.  

일단 어떤 부분을 만들것인지  알기 쉽게 홈페이지를 캡쳐해서 그림판으로 붙여넣기 하고 큰 부분부터 빨주초파 순으로 네모를 만들어주자.

그럼 이제 바로 HTML 에서 가장 큰 사각형을 만들어주자 , 클래스 이름은 상단 바에서 가장큰 부분이므로

top-bar-section  이라고 해주자  그리고 보이기 쉽게 하기 위해서 border  를 써주자  앞으로 만들 부분에는 먼저 이렇게 border를 쓸것이다. 

그럼 이렇게 빨간줄이 그어진다.  그다음 안에 박스는 작은 모니터를 가진 사람도 볼수 있게

1080px 너비를 가진 공간을 만들어줄것이다.

클래스 이름은  container 로 앞으로 안에 여러 항목들을 눌거니까 이렇게 지어주자

그리고  중앙에 있을거니까  도형 형태를 가운데 정렬하는 margin left, right auto를 쓰자

그럼 가운데에 주황색 줄이 생겼다!.

자 그럼 바로  그림판에서 만든 초록색 상자 부분을 만들어보자 

상자는 총 3개고  상자하나당 마진 값은 좌우로 총 20씩 가지니까 왼쪽 상자는 250px 가운데는 520px 오른쪽 상자는 250px 를 가지게된다. 250 + 20+ 250+20+ 520 +20 = 1080 

그럼 바로 border 값도 주고 한줄에 다 표현하게 할거니까 display 도  inline-block 으로 바꿔주고 inline-block에 여백을 없애줄 font-size 0 도 상위 요소에 적어주고 (얘는 상속되니까)   border 를 쓰면서 생긴 선 굵기도 박스 자체 크기로 만들어주기 위한 속성인  box-sizing : border-box; 도 각 상자에 써주자. 아그리고 상자도 총 3개니까

div도 3개를 만들고 클래스도 특징에 맞게 left-250-box, center-520-box, right-250-box로 써주자

아그리고  각 상자에 마진 값 10px 주는것도 잊지말자!

그럼 이렇게 나온다.!

 

그럼 이제 텍스트를 채우면 끝이다! !!!!!!!!

각각 누르면 그 특정한 페이지로 이동될테니 a 태그를 쓰고 그안에 텍스트를  쓰자

일단 왼쪽 상자를 먼저 채워보자 

아이콘 넣는 방법은 이글 하단에 써있다.  그리고 링크는 당장은 없으니 # 을 채워놓자 그런데 링크 표시의 기본값인 밑줄과 글씨가 파란색으로 변했다. 보기 별로이니 이걸 기본 색으로 다시 바꿔주자. 

앞으로 모든 a 태그도 변할테니까  css 상단 부분에  모든 a 태그에 적용되게  color : inherit; 
  text-decoration : none; 를 써주자  그럼 글씨가 검은색이 되고 밑줄이 사라진다. 이제 이어서 중간 박스를 채우자

 

중간 박스에도 4가지 부분으로 나눠진다. 다행히 모두 너비는 똑같으니 520 /4 를 해서 130px씩 너비를 주고 4개의 상자를 똑같이 만들면 된다. 이번엔 list  클래스를 써서 다 똑같은 클래스 이름으로 만들어 주자 어차피 다 공통적인 css 를 줄것이기 떄문에 상관없다.   그리고 중간 박스부분이랑 지금 만드는 리스트랑 딱 겹치기 때문에 중간 박스에 있는 border 는 지워주자 아니면  넘쳐서 줄바꿈이 된다. 

자 그럼 이런식으로 나오게된다. 이런 방법으로  나머지 텍스트도 채워주면된다. 

자 이제 거의 다왔다. 오른쪽 상자에  텍스트를 채워주면된다.

 

위해서 했던 방식 그대로 하자, 다른점은 글씨가 오른쪽에 붙여 쓰기가 되어있는 것인데 a 태그 안에 텍스트 형식을 오른쪽 정렬을 시켜줄거니까. text-align : right ;을 상위요소에 쓰면 그만이다. 

 

그럼 이제 마무리로 마켓컬리 상단 바처럼 보이게 지금 까지 했던 border 들을 다 지워주면 끝이다!!!

 

 

 

짠   ㄲ ㅡㅌ !

 

 

 

 

 

 

 

 

아이콘 쓰는 법 

폰트 어썸 사이트의  상단 돋보기 아이콘을 누르고  free 파트에서  원하는 아이콘의 HTML 태그를 복사해서 원하는 곳에 붙여 놓고

 

cdnjs 에서  font -awesome 를 치고  링크 태그를 복사해서 HTML 상단에 붙여넣기 해주자