링크 꾸미기

이제 링크를 조금 더 꾸며볼까요? social-media라는 CSS 클래스를 아래와 같이 선언해 보겠습니다.

social-media 클래스 정의
.social-media {
  width: 40px; /* 링크 가로 길이 40px */
  height: 40px; /* 링크 세로 길이 40px */
  background: khaki; /* 카키색 배경 */
  border-radius: 50%; /* 경계선을 둥글게 */
  border: 1px solid black; /* 경계선 두께를 1px, 검은색 실선 */
}

인스타그램 로고가 노란색 원 안에 들어가 있습니다. 이전에 배운 border-radius: 50%;를 활용했고, 노란색 배경색은 background: yellow;를 사용했습니다.

그런데 인스타그램 로고가 노란색 원 안에 완벽하게 정렬되지 않고, 원 위로 정렬되어 있는 것을 보셨을 것입니다.

인스타그램 로고를 깔끔하게 정렬하려면 어떻게 해야 할까요? social-media CSS 클래스를 아래와 같이 바꾸어 보겠습니다.

display 속성 추가
.social-media {
  width: 40px;
  height: 40px;
  background: khaki;
  border-radius: 50%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

social-media 클래스에 display: flex;, align-items: center;, justify-content: center;를 추가하니 버튼 내 아이콘이 가운데 정렬되었습니다.

이 속성들은 무엇일까요? 다음 강의에서 함께 알아보겠습니다!

다음 내용이 궁금하다면?

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