티스토리 뷰
플렉스를 활용해서 에어비앤비의 네비게이션바를 만들어 봅시다.
저번 시간에는 만들기 전에 미리 알아두셔야 할 것들을 설명하는 시간을 가졌습니다. 혹시 기억이 안나시면 위의 링크를 클릭해주세요!
이번 시간부터는 플렉스를 통해서 에어비앤비의 네비게이션바를 만들어 보도록 하겠습니다.
네비게이션바는 홈페이지에서 이동이 편리하도록 만들어주는 링크 목록이라고 할 수 있습니다.
우선 만들기 전에 몇 가지 분석을 해보겠습니다. 네비게이션바에는 왼쪽에 에어비앤비의 로고가 들어가 있고, 오른쪽에는 호스팅하기, 도움말, 회원가입, 로그인이라는 리스트들이 있습니다. 클릭하고 나서는 자바스크립트가 필요하니 지금은 클릭하기 전의 겉모습만 만들어볼 예정입니다. 마우스를 리스트 위에 올려놓으면 어떻게 되나요?
위의 사진처럼 마우스를 올려놓으면 밑줄이 생기는 부분까지 같이 만들어 보겠습니다.
만들기 전 준비사항
우선 에어비앤비의 로고가 필요합니다.
위의 링크를 클릭하면 에어비앤비 로고를 다운받을 수 있는 홈페이지로 바로 이동합니다.
html파일과 css파일을 생성해주세요.
앞 시간까지는 <html>파일 안에 <style>태그를 통해서 한 파일 안에서 만들었지만 이번에는 html과 css를 분리해서 만들어보도록 하겠습니다. 원래 html과 css 그리고 javascript까지 각각을 분리해서 만드는게 아주 권장되는 방법입니다.
아톰에디터에 대한 설명도 차차 다룰 예정입니다. 지금 예제는 메모장으로 만드셔도 상관없습니다.
우선 airbnb-navbar라는 폴더를 만들고 그 안에 airbnb-navbar.html 파일과 main.css파일을 만들었습니다. 그리고 seeklogo에서 다운받은 파일을 압축풀고 svg라는 확장자를 가진 로고 파일만 폴더 안에 넣었습니다. svg확장자를 가진 파일을 에디터로 봤을 때 외계어가 많아도 놀라지마세요. 원래 그런겁니다. ^__^
svg확장자에 대해 궁금하시다면 위의 링크를 클릭해주세요. 이렇게 미리 파일까지 다 만들었으면 이제 준비는 다 끝났습니다.
html파일과 css파일 연결하기
만든 html 파일에 내용을 넣고 css파일과 연결이 잘 되었는지 확인해봅시다.
div{ color: blue; }
우선 위의 소스코드를 main.css파일에 복사해서 붙여넣어 주세요.
<!DOCTYPE html> <html> <head> <title>에어비앤비</title> <link rel="stylesheet" type="text/css" href="./main.css"> </head> <body> <div>파란색으로 보이나요</div> </body> </html>
그리고 airbnb-navbar.html파일 안에는 위의 소스코드를 복사해서 붙여넣어 주세요. <style>태그가 아니라 두 문서는 <link>태그로 연결되어 있습니다.
html파일을 실행하면 그림과 같이 <div>태그 안의 컨텐츠가 파란색으로 표시되나요? 그렇다면 잘 진행되고 있는겁니다.
<link>태그는 외부의 css파일 등을 연결시켜주는 태그입니다. href에 css파일의 위치를 적으면 해당 css파일을 연결시켜줍니다. " ./ "은 현재 디렉토리를 뜻합니다. 즉 "./main.css"는 현재 디렉토리 내에 있는 main.css를 불러오라는 뜻입니다.
<link rel="stylesheet" type="text/css" href="파일의 위치">를 통해서 외부에 있는 css파일을 불러올 수 있습니다.
이것 저것 설명하다보니 내용이 길어지고 있습니다. 다음시간에 이어서 만들어보도록 하겠습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| 플렉스를 활용한 네비게이션 바 만들기 4 (4) | 2018.01.12 |
|---|---|
| 플렉스를 활용한 네비게이션 바 만들기 3 (0) | 2018.01.11 |
| 플렉스를 이용한 실전 예제를 만들기 전 준비운동 (0) | 2018.01.09 |
| flex의 아이템 (0) | 2018.01.07 |
| flex의 컨테이너 (0) | 2017.12.31 |