티스토리 뷰
저번 시간에는 <link>태그를 통해서 html문서와 css문서를 연결해 보았습니다. 혹시 기억이 나지 않으면 아래의 링크들을 클릭해서 복습해주세요.
html문서에 내용을 채워봅시다
네비게이션 바는 보통 <ul>태그와 <li> 태그 그리고 <a>태그로 만들어집니다. 아래의 소스코드를 html문서의 <body>태그 안에 넣어 주세요.
<ul> <li><a href="#"><img src="./airbnb-seeklogo.com.svg"></a></li> <li><a href="#">호스팅하기</a></li> <li><a href="#">도움말</a></li> <li><a href="#">회원가입</a></li> <li><a href="#">로그인</a></li> </ul>
파일을 실행시켜 보시면 위의 사진 같은 모양이 되어있을 겁니다. 가장 눈에 띄는 이미지 사진부터 크기를 맞춰보도록 하겠습니다.
img{ width: 32px; height: 32px; }
css파일에 테스트겸 적어봤던 div{color:blue;}를 지우고 위의 소스코드를 넣어주세요. 그럼 이미지의 크기가 가로 세로 32px 크기가 됩니다.
이제는 컨테이너에 플렉스를 설정해서 리스트들을 한 줄로 세워봅시다.
ul{ display: flex; }
위에 있는 소스코드까지 추가하고 나면 다소 징그럽지만 어느 정도 네비게이션 바의 형태를 가지게 됩니다.
글이나 이미지 앞에 점이 찍혀 있는 것은 <ul>태그가 순서가 필요없는 태그라서 그렇습니다. <ol>이었다면 숫자나 알파벳들이 있었겠죠. 점들을 없애려면 <ul>태그를 선택해서 list-style-type속성에 none을 지정해주면 됩니다. 동그란 점들이 없어졌나요? 이제 작업하셔야 할 것은 <a>태그들입니다. <a>태그는 클릭하기 전엔 파란색에 밑줄이 그어져 있는 상태가 기본 상태이며 클릭하고 나서는 빨간색 등 다른색으로 변합니다. 하지만 에어비앤비의 네비게이션바는 줄은 없고 검은색 이었죠? 우선은 줄을 없애보도록 하겠습니다.
li a{ text-decoration: none; }
위의 코드를 추가하면 텍스트에 있던 줄이 사라집니다. 그리고 <a>링크는 위에서 설명한 것처럼 여러 상태를 설명할 수 있어야 합니다. 아직 클릭하지 않았는지 아니면 클릭했었던 태그인지 등등의 상태를 나타내기 위해 수도 클래스(Pseudo-class)를 사용합니다.
수도클래스란 엘리먼트가 특별한 상태에 있다는 것을 정의할 때 사용합니다. 특별한 상태란 마우스가 특정 엘리먼트의 위에 있는 것이라든지 아니면 방문하거나 방문하지 않은 링크를 구분할 때 등을 뜻합니다.
/* 방문하지 않은 링크 */ li a:link{ color: black; } /* 방문한 링크 */ li a:visited{ color: black; } /* 링크를 활성화 할 때 */ li a:active{ color: black; }
위의 소스코드처럼 지금 사용할 수도클래스는 link와 visited 그리고 active입니다. 방문하지 않은 링크와 방문한 링크는 바로 이해가 가시겠지만 "링크를 활성화 할 때"라는 말은 잘 이해가 안가시죠? <a>태그를 클릭했을 때 다른 부분으로 넘어가기 전까지의 순간을 뜻합니다. 저희는 방문하지 않은 링크도, 방문한 링크도 그리고 활성화하는 순간에도 검은색이라서 티는 안나지만요...
그리고 <li>태그를 선택해서 패딩값을 16px로 지정해주세요.
다음 시간에 이어서 진행하겠습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| css의 position 속성을 알아봅시다. (0) | 2018.01.16 |
|---|---|
| 플렉스를 활용한 네비게이션 바 만들기 4 (4) | 2018.01.12 |
| 플렉스를 활용한 네비게이션 바 만들기 2 (1) | 2018.01.10 |
| 플렉스를 이용한 실전 예제를 만들기 전 준비운동 (0) | 2018.01.09 |
| flex의 아이템 (0) | 2018.01.07 |