링크 꾸미기
이제 링크를 조금 더 꾸며볼까요? social-media라는 CSS 클래스를 아래와 같이 선언해 보겠습니다.
.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 클래스를 아래와 같이 바꾸어 보겠습니다.
.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 강의를 등록해 주세요!