HTML5와 CSS3를 이용한 간단한 Web페이지 만들기[헤더 폰트변경&꾸미기] -part5-

이번에는 전 시간까지 만든 헤더를 폰트도 변경하고 nav를 수평으로 정렬하는 시간을 가져볼까해요 ㅎㅎ

일단 폰트먼저 바꿔보도록 할게요

http://www.google.com/fonts/

여기 들어가셔서 원하는 폰트를 선택하세요 ㅎㅎ

여기 나와있는 소스를 복사해서 붙여넣기 해주세요

여기다가 붙여넣기!!!

그리고 밑에 보이는 소스를 복사해 주세요

그런 다음에 바꾸고싶은 폰트 위치에다가 아래처럼 붙여넣기 해주세요 ㅎㅎ

저는 타이틀의 폰트를 바꿀거니까 이렇게 해줄게요 ㅎㅎ

그러면 이렇게 보입니다. ㅎㅎ

이제 옆에 navigation영역을 좀 더 이쁘게 바꾸어보도록 할게요 

해석해 보자면

"main_gnb라는 id를 가진 HTML태그의 자손인 ul태그에서 

내용물이 넘쳐나면 숨김표시(hidden)으로 해주고

main_gnb아이디의 자손인 ul에서 또 ul의 자손인 li태그들을 float:left 즉, 태그들을 왼쪽으로 정렬해주겠다~라는 의미"

결과가 이와같이 나와요~

id가 main_lnb인 태그도 똑같이 설정을 해줄게요

여기다가 이제 좀 이쁘게 꾸며볼게요

display에 대해 다시 정리를 해보고 넘어갈게요

display란 무엇인가요

화면에 보일때 display에서 지정해준대로 어떠한 태그의 내용이 어떤식으로 보여질지 결정해주는 속성

display의 키워드들

none -> 태그를 화면에 보이지 않게 만든다.

block -> 태그를 block 형식으로 지정

ex)div태그 -> 블록을 쌓는다.

inline -> 태그를 inline 형식으로 지정

ex)span태그 -> 한줄로 지정

inline-block -> 태그를 inline-block형식으로 지정

★inline 키워드는 width, height, 속성이 지정되지 않고 margin 속성이 div 태그 좌우로만 지정됨

inline-block 키워드는 위 내용들이 전부다 된다.

이 선택자는 반응 선택자를 사용한건데요

간단하게 반응 선택자에 대해 정리를 해볼게요

반응 선택자

마우스를 가져다 데거나(:hover) 클릭하면(:active) 해당 태그를 변화시키는 역활을 하는 선택자

여기서 사용된 건 일반 구조 선택자 입니다.

일반 구조 선택자

:first-child : 첫번째에 위치하는 자손을 선택

:last-child : 마지막 번째에 위치하는 자손을 선택

:nth-child(수열) : 앞에서 수열번재에 있는 자손을 선택

:nth-last-child(수열) : 뒤에서 수열번째에 있는 자손을 선택

※여기서 주의할 점은 block 속성을 li 태그가 아니라 a태그해 해주었다는 점을 유의하시기 바랍니다.

위 내용을 같은 내용이므로 따로 설명 안하겠습니다.

sensibilityit.html