지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
지난 글은
CSS를 리셋하는 방법과
CSS를 분리하는 방법을
알려드렸습니다.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS 리셋, CSS 분리하여 연결하기
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 상단바의 요소중 하나를 가운데에 올 수 있도록 CSS를 수정했습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑
tm-csc.tistory.com
이번 글에서는
상단바 외에 나머지
가입페이지를 디자인
해보도록 하겠습니다.
그럼 VSC와 만들고 있는
웹페이지부터 실행해주세요.
먼저 지난번에 만들었던
웹페이지를 살펴보면
CSS리셋을 하고 나서
상단바가 너무 위에
붙어있는 것을 확인할 수 있습니다.
그래서 위 아래 좌 우에
패딩 값을 주겠습니다.
. status-bar {
padding: 5px 3px;
}
이렇게 패딩 값을
위아래로 5px 좌우로 3px을
추가하고 확인해보면
이렇게 조금 공간이
생기게 되고 자연스럽게
변한 것을 확인할 수 있습니다.
이걸로 상단바는 넘어가고
HEADER부분을 디자인하겠습니다.
그럼 참고할 디자인을
살펴보면 상단바 아래로
빈 공간이 있고 그다음에
로고나 설명이 시작되는 것을
확인할 수 있습니다.
그럼 먼저
status-bar.css에서
styles.css로 변경해주시고
이렇게 적도록 하겠습니다.
바로 설명해드리면
. welcome-header {
margin: 90px 0px;
text-align: center;
}
welcome-header의
마진은 위아래로 90px
좌우로 0px로 설정하고
텍스트는 가운데로 정렬해줘
. welcome-header__title {
margin-bottom: 20px;
font-size: 25px;
}
welcome-header__title의
밑으로 마진을 20px 주고
폰트 사이즈는 25px 설정해줘
이렇게 설정하고 확인하면
대표 단어가 한눈에 들어오도록
공간이 설정되고 가운데 있는걸
확인할 수 있습니다.
당연히 검은 바탕에 흰 글씨로
변경할 수 도 있을 테고
다른 색상으로 변경할 수도
있습니다.
그리고 만약 제목 밑에
어떤 부가적인 설명을
적고 싶다면 HTML도 수정하고
CSS도 수정하여 최대한
마음껏 변경해보시길 바랍니다.
힌트를 드리자면 HTML에서
welcome-header안에
새로운 div나 SPAN을
추가해주시고
CSS에서 display를 flex로
좌우가 아닌 위아래로
방향만 설정해준다면
아마 원하는 모양대로
설정할 수 있을 겁니다.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
