플렉스를 활용한 네비게이션 바 만들기 3
저번 시간에는 태그를 통해서 html문서와 css문서를 연결해 보았습니다. 혹시 기억이 나지 않으면 아래의 링크들을 클릭해서 복습해주세요. 1. 네비게이션바 만들기 1 - 준비운동2. 네비게이션바 만들기 2 html문서에 내용을 채워봅시다 네비게이션 바는 보통 태그와 태그 그리고 태그로 만들어집니다. 아래의 소스코드를 html문서의 태그 안에 넣어 주세요. 호스팅하기 도움말 회원가입 로그인 파일을 실행시켜 보시면 위의 사진 같은 모양이 되어있을 겁니다. 가장 눈에 띄는 이미지 사진부터 크기를 맞춰보도록 하겠습니다. img{ width: 32px; height: 32px; } css파일에 테스트겸 적어봤던 div{color:blue;}를 지우고 위의 소스코드를 넣어주세요. 그럼 이미지의 크기가 가로 세로 ..
플렉스를 활용한 네비게이션 바 만들기 2
플렉스를 활용해서 에어비앤비의 네비게이션바를 만들어 봅시다. 1. 준비운동 다시보기 저번 시간에는 만들기 전에 미리 알아두셔야 할 것들을 설명하는 시간을 가졌습니다. 혹시 기억이 안나시면 위의 링크를 클릭해주세요! 이번 시간부터는 플렉스를 통해서 에어비앤비의 네비게이션바를 만들어 보도록 하겠습니다. 네비게이션바는 홈페이지에서 이동이 편리하도록 만들어주는 링크 목록이라고 할 수 있습니다. 에어비앤비 홈페이지에서 확인하기 우선 만들기 전에 몇 가지 분석을 해보겠습니다. 네비게이션바에는 왼쪽에 에어비앤비의 로고가 들어가 있고, 오른쪽에는 호스팅하기, 도움말, 회원가입, 로그인이라는 리스트들이 있습니다. 클릭하고 나서는 자바스크립트가 필요하니 지금은 클릭하기 전의 겉모습만 만들어볼 예정입니다. 마우스를 리스트 ..