모듈 연습에서 배운 것

CSS 모듈 과제(flex, float, position, 미디어쿼리)를 풀면서 README에 남긴 메모를 한곳에 모았다.

flex: float 대신 flex

• float는 flex로 대체할 수 있으므로, 먼저 flex로 스타일링해서 가독성을 높여 보자.

flex: 사용자 상태 카드

1. 글자 가운데: text-align: center;로 왼쪽으로 치우친 글자를 가운데로 배치했다.

.profile-detail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 300px;
  align-items: center;
  text-align: center;
}

2. 전체 배치 가운데: flex를 주는 부모에 height 값이 있어야 전체 기준으로 정렬할 수 있다. 100vh로 잡아 화면 정가운데에 배치했다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

float: 카드 목록

1. 아이템 사이 간격은 margin-bottom과 margin-top 중 하나를 골라 일관되게 쓴다.
2. "글자가 왜 오른쪽으로 안 가지?" 하고 보면 스펠링 오류로 클래스가 적용되지 않은 것이었다.

card-contnet {
  float: left;
}

• float를 적용하면 width는 content만큼만 늘어난다.

position: 상품 모듈

1. position: absolute 요소를 transform으로 가운데 정렬한다.

#next {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

2. 이미지 크기 조절

.card-carousel img {
  display: block;
  width: 100%; /* 부모 width를 따름 */
  height: auto; /* 높이는 비율을 따름 */
}

position: 구독 모달

• 모달 가운데 배치

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

미디어쿼리: 반응형 랜딩

1. 반응형 웹은 작은 사이즈(모바일)부터 만들어 간다.
2. 마진 값은 바텀과 탑 중 하나를 골라 일관되게 쓴다.

.landing-title {
  margin-bottom: 20px;
}

3. a 태그의 자식 요소가 글자라고도 할 수 있으므로 display: flex의 정렬값이 먹는다.

<a href="#" class="landing-link"> 민박 둘러보기 </a>

.landing-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 52px;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  border: 2px solid oldlace;
}

4. 미디어쿼리에서는 차이가 나는 값만 바꿔 준다. bottom: auto;는 바텀 값의 효력을 없애기 위한 것이다.