플렉스를 활용한 네비게이션 바 만들기 3
저번 시간에는 태그를 통해서 html문서와 css문서를 연결해 보았습니다. 혹시 기억이 나지 않으면 아래의 링크들을 클릭해서 복습해주세요. 1. 네비게이션바 만들기 1 - 준비운동2. 네비게이션바 만들기 2 html문서에 내용을 채워봅시다 네비게이션 바는 보통 태그와 태그 그리고 태그로 만들어집니다. 아래의 소스코드를 html문서의 태그 안에 넣어 주세요. 호스팅하기 도움말 회원가입 로그인 파일을 실행시켜 보시면 위의 사진 같은 모양이 되어있을 겁니다. 가장 눈에 띄는 이미지 사진부터 크기를 맞춰보도록 하겠습니다. img{ width: 32px; height: 32px; } css파일에 테스트겸 적어봤던 div{color:blue;}를 지우고 위의 소스코드를 넣어주세요. 그럼 이미지의 크기가 가로 세로 ..
플렉스를 활용한 네비게이션 바 만들기 2
플렉스를 활용해서 에어비앤비의 네비게이션바를 만들어 봅시다. 1. 준비운동 다시보기 저번 시간에는 만들기 전에 미리 알아두셔야 할 것들을 설명하는 시간을 가졌습니다. 혹시 기억이 안나시면 위의 링크를 클릭해주세요! 이번 시간부터는 플렉스를 통해서 에어비앤비의 네비게이션바를 만들어 보도록 하겠습니다. 네비게이션바는 홈페이지에서 이동이 편리하도록 만들어주는 링크 목록이라고 할 수 있습니다. 에어비앤비 홈페이지에서 확인하기 우선 만들기 전에 몇 가지 분석을 해보겠습니다. 네비게이션바에는 왼쪽에 에어비앤비의 로고가 들어가 있고, 오른쪽에는 호스팅하기, 도움말, 회원가입, 로그인이라는 리스트들이 있습니다. 클릭하고 나서는 자바스크립트가 필요하니 지금은 클릭하기 전의 겉모습만 만들어볼 예정입니다. 마우스를 리스트 ..
<div>태그와 <span>태그에 id와 class 속성 주기
태그와 태그를 활용해보고 id와 class도 익혀봅시다. 오늘은 상자를 여러개 그려서 태그와 태그에 대해서 배워봅시다. 예시 사진을 보시면 아시겠지만 네모난 상자들이 여러개 있습니다. 어떤 것들은 겹쳐져 있고, 어떤 것들은 다른 것들과 떨어져 있습니다. 안 쪽의 텍스트를 보시면 태그와 태그의 큰 차이를 알 수 있습니다. 무엇인지 아시겠나요? 맞습니다. 옆 공간을 다 차지하는 것이 태그이고, 옆에 다른 컨텐츠가 올 수 있는 것이태그입니다. 우선 이 정도만 기억해두고 소스코드를 살펴보도록 합시다. id와 class값 주기 - div와 span의 차이 a태그를 이용해서 페이지 내의 특정요소로 이동 div - 1 div - 2 div - 2-1 span - 1 span - 2 div - 3 div - 4 새로운..
파일 확장명을 표시합시다.(윈도우10)
HTML과 CSS 그리고 JavaScript를 배우기 전에 파일 확장명을 표시해 봅시다. 각 파일은 확장명이 다릅니다. HTML파일은 문서명.html / CSS파일은 문서명.css / JavaScript 파일은 문서명.js로 표시됩니다.다른 언어들로 파일이 만들어졌다면 또 다른 확장명을 볼 수 있겠죠 ? 하지만 프론트엔드 수업인 만큼 우선 세가지만 알아두면 충분합니다. HTML => 문서명.html / CSS => 문서명.css / JavaScript => 문서명.js 뒤에 확장명을 보면 어떤 문서인지 알 수 있습니다.우선 파일탐색기를 눌러주세요.(내문서나 다른 문서들을 누르셔도 상관없습니다.) 그리고 보기를 클릭하시고 파일 확장명에 체크 표시를 해주세요. 그러면 파일 확장명이 표시됩니다. 우선은 다른 ..