기초코딩 - 가입페이지 문구 디자인하기 - 1편

지난 글에 이어 CSS에 대해

알려드리도록 하겠습니다.

 

지난 글은

가입페이지를 만들기 위해

HTML을 작성하였습니다.

 

만약 기억이 잘 나지 않으시거나

혹시 모르시는 분들은 

밑에 글을 참고해주세요.

tm-csc.tistory.com/1231

기초코딩 - 가입페이지 문구 설정하기 - 1편

 

이번 글에서는

저번 글에서 만들었던

HTML을 CSS를 활용해 

디자인해보겠습니다.

 

우선 VSC를 실행해주세요.

 

 

지난 글에서 

이렇게 HTML을 작성하였고

확정적이지는 않지만

대략 넣어야 할 문구와

이메일 패스워드를 

입력할 공간까지 만들었습니다.

 

확인을 먼저 해보면

 

이런 상태인 거죠.

 

무언가 아직 디자인은

되어있지 않았지만 

형태가 나오기 시작했습니다.

 

그럼 CSS를 통해 

디자인을 해보겠습니다.

 

우선 VSC에서 

마우스 오른쪽 버튼을 클릭하여

CSS라는 이름의 

새로운 폴더를 하나 만들어주세요.

 

그리고 CSS폴더 안에

STYLES.CSS라는 파일을

하나 만들어주세요.

 

 

그리고 HTML과 CSS를

연결시켜주기 위해 

HTML에 head부분에

LINK:CSS라고 타이핑한 후

엔터를 눌러주세요.

 

 

그럼 이런 형태가

바로 나오게 되고 

 

 

경로에 만들 놓았던

CSS폴더를 앞에 적어줘서

CSS파일의 위치를 

적어주면 HTML과 

CSS과 연결됩니다.

 

그럼 제대로 연결됐는지

한번 확인해볼까요

 

CSS파일에 간단히 

 

body {

  background-color: green;

}
BODY의 배경색은

초록색이야 

 

라고 지정하고 확인해보면

 

 

이렇게 초록색으로 

배경이 변한 것을

확인할 수 있습니다.

 

제대로 CSS과 HTML이

연결이 되고 있다는 것이죠.

 

 

그럼 먼저 CSS파일을 

마우스로 끌어다가 

왼쪽이나 오른쪽 또는

위 또는 아래 원하는

방향에 두어 화면을 

반으로 나누어주는 것을

추천드립니다.

 

그래야만 CSS에서 

ID 또는 CLASS를 작성할 때

바로바로 확인이 가능합니다.

 

 

그럼 일단 배경색을 지우고

상태 표시 바부터 변경하겠습니다.

 

일단은 아이콘들을

한 줄로 나열시켜야겠죠?

 

 

바로 이렇게

 

. status-bar {

  display: flex;

}

 

라고 적어주면

한 줄로 나열될 거라는 것을

기억해주셨으면 좋겠습니다.

 

 

상태를 확인해보면

이렇게 한 줄로 나열되어있죠.

 

그런데 이 상태는

무언가 원하는 형태가 아니며

서로 떨어졌으면 생각하실 텐데요.

 

그때 어떤 걸 써야 할지 

한번 생각해보세요.

 

그건 다음 글에서 이어서

알려드리겠습니다.

 

그럼 여기까지 궁금하신 점은

댓글에 남겨주시고

공감과 구독도 부탁드립니다.