8. Log in 화면 만들기 (css-header)

1) header 글자 정렬하기

정렬하지 않은 모습

header의 글자를 스타일 해보겠음.

 

 

header에 스타일을 함

header 전체에 

margin을 90px 주고

text-align: center;를 하여

글자를 중앙으로 오게 함.

 

 

header의 글자의 위치가 변한 모습

그러자 header의 글자가 상단에서 90px 떨어지고

중앙에 위치한 것을 볼 수 있음.

 

 

 

2) header__title 스타일 하기

title에 스타일을 줌.

header__title에

margin-bottom:40px;을 하여

글자의 밑에 40px의 공간을 주고

글자 크기를 25px로 함.

 

 

글자의 크기가 변함

header__title 부분인 'Welcome to Kokoa Clone'의

글자 크기가 커지고 밑에 공간이 생김.

 

 

 

3) header__text 스타일 하기

화면의 크기에 따라 text의 줄 개수가 바뀜.

화면의 크기에 따라 text의 줄 개수가 바뀜.

이 줄 개수가 화면이 아무리 작아져도 2줄 이상이 되지 않도록 해보자.

 

 

텍스트를 70%로 함

%의 숫자를 조정하여 원하는 위치에 가도록 만듬.

 

 

 

text가 두 줄 이내로 위치하게 됨

text가 두 줄 이내로 위치하게 되었지만,

중앙에 위치하지 않게 됨.

 

 

 

4) text 중앙으로 위치시키기

스타일을 수정함

.welcome-header에

display:flex;를 하여 flex 상태로 만들고

flex-direction: column;를 하여 주축을 수직으로 바꾸고
align-items: center;를 하여 중앙에 위치하도록 함.

 

 

 

text가 중앙에 위치한 모습

text가 다시 중앙에 위치하게 됨.

창의 크기가 달라져도 계속 중앙에 위치함.

 

 

 

5)  text 투명도 조절

스타일을 변경함

.welcome-header__text에

opacity:0.6;을 하여 투명도를 0.6으로 함.

.welcome-header에

margin: 90px 0px;를 하여

위 아래에는 90px를 양옆에는 0px의 공간을 둠.

 

 

 

변경된 모습

text의 글자 색이 연해지고

text 밑에 90px의 공간이 생김.