[Front-End] 화면구현 기초 2

흔하게 볼 수 있는 쇼핑몰 (간단.ver) 화면을 구현해보았다 !

이 작업에서도 묶음과 정렬이 제일 중요했다. 

 

대략적으로 이러한 구성으로 묶었다. 

 

Navbar

네비게이션 바의 전체인 파란색 구간을 flex로 묶어준다. 

큰 파란색 묶음 속에 분홍색 구간을 하나의 묶음으로 또 묶어준다. 이는 왼쪽에 있는 'APPAREL SHOP'과 분리해주기 위함이다. 

justify-content: space-between

이렇게 묶어주었다면 space-between으로 APPAREL SHOP과 분홍색 묶음을 위 사진과 같이 분리한다. 

서로 분리해주기 위해서 분홍색 구간 또한 flex를 설정한다.

 

align-items: center

수직 방향을 기준으로 파란색 구간에서 가운데 정렬을 해준다. 

 

 

CSS에서 해당 이미지를 불러온 뒤 각 너비와 높이를 맞춰준다. 

width: 100%로 설정하여 너비를 화면에 채워준다. 

  background-repeat: no-repeat;
  background-size: cover;

해당 이미지를 backgroud 설정한다면 이미지 위에 텍스트나 다른 요소들을 겹쳐서 보여줄 수 있다. 

(해당 이미지가 배경이 되기 때문에)

 

 

파란색 구간을 flex로 설정하여 하나의 큰 틀을 만들어준다. 

.card {
  display: flex;
  align-items: center;
  width: 1280px;
  margin: 0 auto;
}

width:1280px로 파란색 구간의 너비를 정해준다. 

margin을 0 auto로 설정하여 화면에서 이미지와 텍스트 요소를 가운데로 정렬해준다. (가로축 기준)

 

float: left;

해당 이미지와 텍스트를 좌측 정렬로 배치하기 위해 float를 설정한다. 

 

 

 

.more-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
 }

파란색 구간을 flex로 크게 묶어준 후 4가지 이미지와 해당 텍스트를 정렬해준다. 

 

.more-eachcard {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  width: 1280px;
  margin: 0 auto;
  line-height: 2;
}

4가지 각 이미지를 flex로 하나씩 묶어준다. 즉, 이미지와 하단의 텍스트를 하나의 묶음으로 구성한다. 

이미지 하단에 텍스트를 배치하기 위해 flex의 방향을 세로(column)로 설정한다. 

분홍색 구간에서 이미지와 텍스트를 가운데 정렬해주기 위해 margin을 0 auto로 설정한다.