[CSS] 웹 프로젝트 11일차! (index 부분 css 작업)

지난 시간에는 아래 화면의 html, 즉 뼈대를 완성했다.

이번에는 본격적으로 css를 사용해 아래 화면처럼 이쁘게 보이도록 해 보았다!!

완성된 화면

우선 모든 화면에 적용해야 하는 status-bar부터 시작!

아! 그 전에 우선, 브라우저의 기본 세팅값을 초기화를 위한

reset.css파일을 먼저 추가해 주어야 한다!!

rest.css)

 

status-bar)

우선 위 화면처럼 적당한 간격으로 icon의 위치를 설정해주어야 한다.

이럴 땐 무엇을 쓴다? 

--> 바로 flex!!!

icon의 부모요소인 .status-bar에 flex를 지정해 주었고 justify-content:center;를 적용했다.

그러면 중앙에 아이콘들이 모여있는 것을 볼 수 있는데 이럴 때 사용할 수 있는 스킬이 

바로... width:33%를 .status-bar__column에 지정하는 것!!

이렇게 해서 간격을 띄우고 추가적으로 margin값과 같은 지정값을 추가하여 status-bar를 마무리 했다.

status-bar.css 코드)

 

welcome-header)

이 부분의 text를 중앙에 두기 위해 text-align:center;를 사용했고,

box의 중앙에 두기 위해 뭐???

--> flex!!를 사용해 justify-content, align-items 모두 center로 지정했다.

추가적으로 margin값도 주고, opacity값도 조정해 색도 조금 흐리게 보이게끔 설정했다.

 

login-form)

이번에도 어김업이 flex!!를 사용해서 위치를 이쁘게 조정했고,

border-bottom 값을 줘서 밑에 부분만 경계를 보이게끔 했다.

그 아래 a, 링크를 거는 비밀먼호 찾기 text에도 color를 지정해 이쁘게했고,

추가적으로 cursor:pointer;를 사용해 마우스가 포인터로 바뀌게 했다.

이제 마지막 하이라이트!!

input 태그에 애니메이션을 넣어주었다.

애니메이션은 input을 클릭했을때 0.3초 동안 background-color가 노란색으로 변하게 하기!!

transition을 사용해 애니메이션을 만들었다.

전체 login.css 코드)

 

+) css파일을 여러개 만들었을 때 적용하는 법!!

@import 사용

@import를 사용하면 된다! stlye.css에 import 해줘야 적용되니까.

까먹지 말고 빠트리지 말기!!!