Flex 레이아웃 적용

이제 지난 시간에 .social-media 클래스에 사용했던 flex 속성을 살펴볼까요?

HTML
<a
  href="https://www.instagram.com/geekhaus.club/"
  class="social-media"
  target="_blank"
>
  <svg>...</svg>
</a>

CSS
.social-media {
  width: 40px;
  height: 40px;
  background: yellow;
  border-radius: 50%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

social-media 클래스의 display: flex로 인해 a 태그는 flex 컨테이너가 되었습니다.

이와 함께 a 태그 안의 svg 요소는 flex 컨테이너 내 아이템이 되었습니다.

flex 컨테이너는 기본적으로 가로 방향(row)으로 아이템을 정렬합니다.

여기에 justify-content: center;를 사용해 요소를 메인축(가로축) 방향으로 중앙 정렬하고, align-items: center;로 요소를 수직축(세로축) 방향으로 중앙 정렬했습니다.

정리하면,

CSS
.social-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

display: flex;로 a 태그를 flex 컨테이너로 만들고,

justify-content: center;를 통해 flex 컨테이너 내 아이템, 인스타그램 SVG 로고를 가로축으로 정렬,

align-items: center;를 통해 svg 로고를 세로축으로 중앙 정렬했습니다.

다음 강의에서는 지금까지 배운 flex를 활용해, 웹페이지 내 자기소개 섹션을 조금 더 구체화하겠습니다 :)

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!