지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
지난 글은
가입페이지의 상단바의
HTML를 CSS를 활용해
일자로 펼쳐보았습니다.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - 가입페이지 문구 디자인하기 - 1편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 가입페이지를 만들기 위해 HTML을 작성하였습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세
tm-csc.tistory.com
이번 글에서는 이어서
상단바를 디자인
해보겠습니다.
VSC부터 실행해주세요.
일단 지난 글에서
이렇게 하나하나
다 붙어있었기 때문에
각각 요소를 떨어트려야
할 텐데요.
어떤 코드를 사용해야 할까요?
맞습니다.
justify-content를
사용하시면 되고
. status-bar {
display: flex;
justify-content: space-between;
}
이렇게 space-between을
사용하여 각 요소마다
공간을 주도록 설정하면
이렇게 보기 좋게 떨어지게 됩니다.
그런데 지금도 보면
와이파이 아이콘과 SKT
그리고 배터리 아이콘과
퍼센트까지도 조금씩
떨어지면 좋을 것 같은데요.
상단바의 class가
status-bar__column이고
이 중에서 일단 첫 번째
CLASS만 디자인해주려면
어떻게 해야 할까요?
이렇게 first-child를 사용해서
그 안에 SPAN을 선택하여
. status-bar__column:first-childspan {
margin-right: 3px;
}
마진 값을 주어 아이콘과
span사이의 거리를
벌릴 수 있습니다.
확인해보면
이전 값에 비해서
아주 조금이지만 조금 더
자연스럽다는 것을
확인할 수 있습니다.
저는 3px로 잡았지만
보이는 값에 따라 또는
자신이 원하는 디자인으로
변경하기 위해 많은 값을
직접 적어보는 것을
추천드립니다.
그럼 이제 숫자의 폰트를
조금 더 감각적으로
변경하고 싶어 폰트까지
추가해보겠습니다.
해당 글을 복사해도 되고
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
font-faimily를 적은 뒤
-apple-system이라고
시작되는 코드를
선택하셔도 됩니다.
개인적으로 좋아하는 폰트이며
상당히 깔끔하게 보입니다.
그리고 이렇게 변경됩니다.
꼭 이 폰트를 사용하지 않고
다른 폰트를 사용하셔 되며
폰트를 다운로드하여
사용할 수 도 있습니다.
예를 들어 구글 폰트에서
해당 글씨체가 마음에 들 경 우
글씨체를 추가하고
CSS의 해당 링크와
font-family를 복사해서
붙여 넣게 되면
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
body {
font-family: "Fredoka One", cursive;
}
바로 이렇게 말이죠
이렇게 설정하고 확인하면
이렇게 변하기도 합니다.
개인적으로는 마음에 안 들기에
전 상태로 돌리도록 할게요.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
