css공부05/쇼핑몰 상단 만들기

안녕하세요 핸들링 코드 크루 박준영 입니다.

오늘은 쇼핑몰 페이지 상단을 만들어 보려고 합니다.

제가 만든 쇼핑몰 상단 화면입니다. 오늘은 이부분을 어떻게 만드는지 포스팅해보도록 할게용!

먼저 페이지의 공간을 나누어야 합니다.

일단 위에서부터 3곳의 구역으로 나눕니다.

첫번째는 즐겨찾기, 로그인, 회원가입이있는 부분

두번째는 header와 내정보, 장바구니가 있는 부분

세번째는 카테고리, 메뉴등이 있는 부분으로 나눕시다.

시멘틱하게 만들어 주기위해 <header>태그와 <nav>태그를 사용해볼게요

먼저 첫번째 부분은 간단하게 <div>태그로 구역을나눠서 둘게요

top.html

class="top"으로 전체 틀을 잡습니다.

그다음 "wrapper"라는 클래스로 감쌀건데 "wrapper"클래스는 

임의의 이름으로서 저는 width값을 제한하려고 사용하였습니다.

이렇게 "wrapper"클래스에 css값을 입히는데 

width값을 1024로 정해놓고 마진을 0 auto;로 하면

아래 빨간 선까지의 크기가 고정됩니다.

margin: 0 auto는 왼쪽 오른쪽에 마진을 같게 주어서 가운데 정렬할때 자주사용하는

방법이니 기억해주세요!!!

저는 <ul>태그와 <li>태그를 사용해서 메뉴바처럼 사용했고

즐겨찾기는 float:left;

로그인, 회원가입은 float:right;를 사용하여 양옆으로 이동시켰습니다.

위의 html 코드를 보면 회원가입이 위에 있고 로그인이 그 아래있는데

float:right는 위에있는 값이 더 오른쪽으로 가기때문에 거꾸로 적었습니다.

마우스를 글자에 가까에 대면 글자색이 바뀌는 효과가 있는데 이는 :hover로 만들 수 있습니다.

탑부분 전체 css입니다.

이부분은 딱히 어려운 부분없이 끝났습니다. 오늘은 할일이 있어서

자세한 설명은 못하겠네용

내일 다시할게용!