내비게이션 바 로고 실습

html

로고와 .info를 도면대로 세로정렬 하면 된다

vertical-align:middle

을 해주면

오히려 위로 좀더 올라간다

vertical-align:middle을 하면 img태그의 부모인 x에 중앙에 맞춰지게 된다

따라서 x가 #navbar에 세로 정중앙 위치 시켜야 한다

높이는 60px

#navbar의 높이가 60px이기 때문에 #logo

line-height:60px

해주면

가운데 정렬이 된다

필요없는 x와 배경색 오렌지를 지워주면

깔끔하게 된다

이제 .info를 세로정렬 시켜보자

 

info를 세로 정렬 시켜야 하기 때문에 일단 inline-block

(inline처럼 같은줄에 있을수 있음 block처럼 가로세로 길이가짐)으로 만들어준다

그럼 이렇게 됨

줄을 맞추기 위해 info앞에 x를 써준다

그 후 

vertical-align:middle

vertical-align:middle을 써준다

그럼 x가 inline-block요소인 .info의 중간에 맞춰진다 이제 

line-height:670px

부모의 height는 670px 따라서 line-height 도 670px로 지정 해줍니다

그럼 이렇게 되는데 이게 line-height는 상속이 되는 속성이여서 자식들에게 전부 상속된다

따라서

line-height:normal;

자식에게는 상속이 안되게끔 line-height:normal; 해준다

완성 이제 필요없는 배경색과 x를 빼주면?

완성했습니다!!