Just Make IT

지난 시간에는 반응형 웹에 대해서 미리 알고 있어야 할 것들을 배웠습니다. 반응형 웹이 무엇인지 설명한 후 반응형 웹을 만들기 위해서는 길이를 가변적으로 해야하며, 뷰포트 메타태그와 미디어쿼리가 필요하다고 설명드렸는데 다 기억나시나요? 예제를 같이 만들면서 이미 설명한 부분은 빠르게 넘어가니 기억이 안나시면 꼭 복습해주세요. 반응형 웹 제작하기 1 오늘은 무엇을 만들지 같이 살펴볼까요? 3개를 모아놓고 찍으니 약간 징그럽지만 참아주세요. 넬슨 만델라의 명언을 가지고 간단하게 반응형 웹을 만들어 보았습니다. 브라우저의 크기가 달라져도 컨텐츠는 가운데에 위치하고 데스크톱 사이즈가 되었을 땐 명언의 폰트사이즈가 2배가 되었다는 것을 주목해주시면 됩니다. 같이 만들어 볼까요? 우선 이미지와 파일들을 구성해봅시다..

플렉스를 활용해서 에어비앤비의 네비게이션바를 만들어 봅시다. 1. 준비운동 다시보기 저번 시간에는 만들기 전에 미리 알아두셔야 할 것들을 설명하는 시간을 가졌습니다. 혹시 기억이 안나시면 위의 링크를 클릭해주세요! 이번 시간부터는 플렉스를 통해서 에어비앤비의 네비게이션바를 만들어 보도록 하겠습니다. 네비게이션바는 홈페이지에서 이동이 편리하도록 만들어주는 링크 목록이라고 할 수 있습니다. 에어비앤비 홈페이지에서 확인하기 우선 만들기 전에 몇 가지 분석을 해보겠습니다. 네비게이션바에는 왼쪽에 에어비앤비의 로고가 들어가 있고, 오른쪽에는 호스팅하기, 도움말, 회원가입, 로그인이라는 리스트들이 있습니다. 클릭하고 나서는 자바스크립트가 필요하니 지금은 클릭하기 전의 겉모습만 만들어볼 예정입니다. 마우스를 리스트 ..

플렉스를 이용한 실전예제 만들기 그저 배우기만 하는 것은 재미가 없죠? 플렉스를 이용해서 실전예제를 만들어보면 좀 더 재밌고 더 이해도 가실겁니다. 무엇을 만들지는 다음시간부터 다루기로 하고 이번 포스팅은 본격적으로 만들기 전에 미리 알아두셔야 할 것들을 설명드리겠습니다. flex에 관한 보충설명 아이템에 flex라는 속성은 flex-grow와 flex-shrink, flex-basis의 축약형이라고 이전 시간에 다뤘습니다. 그럼 3개가 다 나오지 않고 1개나 2개의 값이 나온다면 무엇을 나타낼까요? flex: 1;(또는 다른 양수)가 온다면 flex: 1 1 0;과 같습니다. 그리고 flex:1 1;이라고만 적혀있다면 flex: 1 1 0;과 같습니다. flex: 양수;라면 flex: 양수 1 0;이라..

아이템에 넣을 수 있는 속성들을 알아봅시다. 저번 시간엔 콘테이너에 넣을 수 있는 속성들을 배웠습니다. 이번 시간에는 아이템에 넣을 수 있는 속성들을 배워봅시다. 아이템에는 직계 자식 태그만 속한다는 것을 잊지 마세요. 컨테이너 안에 5개의 상자가 있습니다. 보시면 마지막 상자는 이름은 div-4인데 마지막에 위치해 있고, 다른 것들 보다 조금 길게 만들어졌군요. 긴 것은 길이를 다르게 설정했다고 하더라도 순서도 제가 다르게 입력했을까요?아래의 소스코드를 주목해주세요. div-1 div-2 div-3 div-4 div-5 container 역할을 하는 태그 안에 상자들은 1부터 5까지 순서대로 되어있습니다. #four에 order 값이 1인 것을 주목해 주세요. order 속성을 이용하면 아이템들의 순서..

컨테이너에 넣을 수 있는 속성들을 알아봅시다. 앞 시간엔 부모 엘리먼트의 display 값에 flex를 선언한 것까지 했습니다. 컨테이너가 무엇인지 기억나시나요? 부모 엘리먼트를 앞으로 컨테이너라고 지칭하기로 했었습니다. flex를 선언하면 기본적으로는 이런 모습으로 보입니다. flex는 다른 값을 주지 않는다면 일단 한 줄안에 다 넣습니다. 그리고 가로로 아이템들을 정렬합니다. 속성으로 얘기하자면 flex-direction은 row값이 적용되어 있고, flex-wrap은 nowrap인 것이죠. flex-direction이란 무엇일까요? 말 그대로 플렉스의 방향을 정해주는 속성입니다. 플렉스에서는 기본 방향을 주축(main-axis)이라고 합니다. row는 그림처럼 나타날 것이고, column을 주면 어..

css에서 display 속성은 무슨 역할을 할까요? 모든 엘리먼트는 사각형의 형태를 가지고 있다고 이전 시간에 배운 것이 기억나시나요? display속성은 그 사각형이 어떻게 작동될지를 정해주는 속성입니다. 태그와 태그를 비교할 때 태그는 display의 속성값이 block이고, 태그는 inline이라고 설명한 적이 있습니다. 그림을 보면서 복습하기 위의 링크를 누르시고 그때 설명했던 그림을 보시면 block과 inline이 공간을 어떻게 차지하는지 바로 확인할 수 있습니다. 그리고 그때 배우지 못했던 속성값들을 좀 더 살펴보도록 하겠습니다. display이 값에 none이라는 값을 준다면 해당 엘리먼트는 사라집니다. div-1 div-2 div-3 위의 소스코드를 태그 사이에 넣어주세요. 그리고 실행..