저번 시간에는 태그를 통해서 html문서와 css문서를 연결해 보았습니다. 혹시 기억이 나지 않으면 아래의 링크들을 클릭해서 복습해주세요. 1. 네비게이션바 만들기 1 - 준비운동2. 네비게이션바 만들기 2 html문서에 내용을 채워봅시다 네비게이션 바는 보통 태그와 태그 그리고 태그로 만들어집니다. 아래의 소스코드를 html문서의 태그 안에 넣어 주세요. 호스팅하기 도움말 회원가입 로그인 파일을 실행시켜 보시면 위의 사진 같은 모양이 되어있을 겁니다. 가장 눈에 띄는 이미지 사진부터 크기를 맞춰보도록 하겠습니다. img{ width: 32px; height: 32px; } css파일에 테스트겸 적어봤던 div{color:blue;}를 지우고 위의 소스코드를 넣어주세요. 그럼 이미지의 크기가 가로 세로 ..
플렉스를 활용해서 에어비앤비의 네비게이션바를 만들어 봅시다. 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 위의 소스코드를 태그 사이에 넣어주세요. 그리고 실행..
오늘 배울 것은 마진과 보더 그리고 패딩입니다. 테두리는 직관적으로 쉽게 이해가 가실테지만 마진과 패딩에 대해서는 헷갈리는 분들이 많으실 겁니다. 우선 마진은 엘리먼트와 엘리먼트의 사이 여백을 뜻합니다. 마진에 값을 주면 그 만큼의 거리만큼 다른 엘리먼트와의 거리가 멀어지는 것입니다. 그리고 테두리는 말 그대로 엘리먼트의 경계선을 나타냅니다. 컨텐츠는 우리가 실제로 태그 사이의 쓴 글 등이 나타나는 부분입니다. 그리고 패딩은 테두리와 컨텐츠 사이에 있는 여백을 나타내는 말입니다. 한 개의 엘리먼트가 있어도 바깥쪽부터 안쪽까지 마진-보더-패딩-컨텐츠라는 네 부분으로 구성됩니다. 코드를 작성하면서 어느 공간을 넓히거나 좁힐 때 그 부분이 정확히 어느 부분인지 파악하는 것이 중요합니다. 다른 엘리먼트와의 거리..
어떤 CSS속성들을 배워야 할까요? 모든 속성을 다 배울 필요는 없습니다. 자주 쓰이는 것들은 알아두고 혹시 필요한 기능이 있으면 그때 그때 배워나가면 됩니다. 어떤 속성들을 자주 쓰는 지 알아볼까요? 자주 사용하는 CSS 속성 확인하기 위의 링크로 들어가면 MS에서 자주 사용하는 CSS 속성들을 조사한 그래프를 볼 수 있습니다. 일단은 여기서 나오는 상위의 속성들을 우선 알아두시면 충분합니다. 오늘의 수업도 여기에 기반해 시작하도록 하겠습니다. font-size는 글씨의 크기를 조절하는 속성이고, text-align은 글씨를 정렬할 때 사용하는 속성입니다. font 16 font 32 위의 소스코드를 복사해서 실행해 주세요. 두 개의 태그가 있고, 각각에 one과 two라는 아이디를 주었습니다. #on..
선택자를 배웠으니 css를 사용하는 방법을 배워보도록 하겠습니다. css셀렉터를 적고 괄호 안에 속성과 값을 적으면 css가 적용됩니다. 속성과 값은 콜론으로 구분하고, 한 가지 효과가 끝나면 세미콜론으로 마무리합니다. 지금의 그림은 태그 전부에 배경색을 검은색으로 바꾸고, 글자색은 흰색으로 바꾼 것입니다. 정리하자면, css셀렉터 { css속성 : 값 ; } 이라는 형태가 됩니다. 그럼 css효과를 가진 문서는 어떤 형태를 가지게 될까요 ? p{ color : blue; } #first { color : red; } .second { color : green; } div span{ background-color: black; } css 문서는 위와 같은 형태가 됩니다. 한 페이지를 꾸민다는 것은 많은 ..
CSS란 무엇일까요? 이전 시간까지는 HTML에 대해서 배웠습니다. 오늘부터는 CSS에 대해서 배워보겠습니다. CSS란 도대체 무엇일까요? CSS는 HTML 문서가 어떻게 배치되고 어떤 식으로 보여질 지와 같은 스타일을 표현하는 언어입니다. HTML만으로 구성된 문서들은 아주 투박했습니다. 우리가 자주 접하는 웹사이트들도 CSS가 없다면 상상 이상으로 아주 투박했을 겁니다. 그렇게 깔끔한 네이버의 메인도 CSS가 없으니 같이 만들던 예시만큼 투박해 보이죠? 보기 좋은 떡이 먹기도 좋다는 말이 있습니다. 아무리 아주 유익한 사이트라고 해도 보기 좋게 꾸미지 않으면 사람들이 찾지 않게 되겠죠.얼른 CSS도 배워서 실전 같은 예제들을 만들어봅시다. 우선 CSS선택자를 배워봅시다. CSS 선택자란 무엇일까요 ?..