저번 시간까지 변수에 대해서 배웠습니다. 오늘부터는 변수에 어떤 값들이 들어갈 수 있는 지에 대해서 알아볼 시간입니다. 자바스크립트에서 값으로 들어갈 수 있는 데이터 타입은 두개로 나뉘어 집니다. 바로 원시 타입과 객체(참조 타입)입니다. 원시 타입 이란? 원시 타입이란 말이 어려울 수도 있습니다만 기본 타입이라고 간단하게 생각하면 됩니다. 원시 타입의 특징 중의 하나는 불변성(immutable)입니다. 이 부분에 대해서 의문이 있을수도 있을 것이라고 생각합니다. 저번시간에 배운 const라면 값을 수정하는데 에러가 떳지만 let이나 var의 경우엔 undefined에서 문자를 갖게 되기고 했고, 숫자가 되기도 했으니까요. 하지만 이런 수정은 변수에 다른 값을 대입하는 것이었을 뿐 기존의 값을 변경하는 ..
지난 포스팅에서 변수를 배웠습니다. var라고 하고 식별자를 쓰고 등호를 통해 값을 할당했습니다. 오늘은 에크마스크립트6(es6)를 통해 새롭게 추가된 let과 const를 다룰 예정입니다. 난이도가 좀 있으니 이해가 안되시면 그냥 넘어가시면 됩니다. 변수에 대한 전반적인 설명을 보시려면 아래 링크를 클릭해주세요. 자바스크립트의 변수var를 대체할 let과 const에 대해 알아보기 우선 let은 변수를, const는 상수를 의미한다는 것을 알아두셔야 합니다. var와 let, const는 각각 어느 차이가 있는지 지금부터 하나씩 알아보도록 하겠습니다. 실습은 콘솔창에서 진행하시면 됩니다. var x = 3; console.log(x + " : " + y); var y = 7; 위의 소스코드를 콘솔창에서..
프로그래밍의 문법은 바뀌기 마련입니다. 없던 것들이 생기고, 있던 것들이 없어집니다. 자바스크립트를 배우려는 분들에게도, 이미 알고 있는 분들에게도 지금 제일 중요한건 바뀐다고 확실시 된 새로운 자바스크립트 문법(es6)일 것이라고 생각합니다. 제가 작성할 자바스크립트 강의들은 "~~을 사용해왔지만 새롭게 추가된 ~~도 있습니다."라는 형태로 진행될 것 같습니다. 자바스크립트도 얼른 끝내고 빨리 또 여러가지를 같이 만들어보겠습니다 !변수란 무엇일까요? 변수라는 것은 값을 담고 있는 상자입니다. 그리고 이름에서도 알 수 있듯이 변할 수 있는 값을 나타냅니다. 크롬에서 새 창을 연 다음 주소창에 about:blank를 입력해주세요. 그러면 안에 내용이 없는 창으로 이동합니다. 그리고 f12번을 누르고 크롬개..
HTML과 CSS를 배웠다면 이제 배워야 할 것은 자바스크립트겠죠? 오늘부터는 자바스크립트에 대해서 계속 다뤄보도록 하겠습니다. 자바스크립트 첫 강의 주제는 주석입니다. 주석은 무엇일까요 위키백과에는 주석은 프로그래밍에 있어서 내용을 메모하는 목적으로 쓰이며 소스코드를 더 쉽게 이해할 수 있게 만드는 것이 주 목적이며, 컴파일러와 인터프리터에 의해 일반적으로 무시되어 프로그램에 영향을 주지 않는다고 정의되어 있습니다. 즉 컴퓨터는 읽지 않고 사람들이 코드를 이해하는데 도움을 주는 것이 주석이라는 것입니다. 소스코드를 통해 자바스크립트 주석부터 알아보도록 하겠습니다. html과 css 주석 html과 css 수업을 하면서 주석에 대한 설명을 드리지 않았으니 지금 같이 설명하도록 하겠습니다. html 주석은..
반응형 웹을 이어서 만들어보도록 하겠습니다. 저번 포스팅에는 index.html을 채웠습니다. 오늘은 main.css를 작업해 보겠습니다. 반응형 웹 제작하기 2 복습하기main.css 작업하기 다른 작업을 하기 전에 우선 해야할 것은 css를 리셋하는 겁니다. 왜 css를 리셋해야 할까요? 같은 태그를 사용하더라도 그에 따른 기본값은 브라우저마다 다릅니다. 그래서 똑같이 보여주기 위해 css 리셋을 해주는 것이죠. 보통 구글에서 css reset 등의 단어를 치면 소스코드가 나오는데 그걸 복사해서 사용하시면 됩니다. css reset 링크 바로가기 저는 위의 사이트에서 소스코드를 갖고왔습니다. 리셋을 한 후 해야할 건 css도 기본적으로 구조를 잡는 것입니다. 모바일 환경 부터 시작해서 태블릿과 데스크..
한 페이지로 구성된 반응형 웹을 같이 만들어 보겠습니다. html과 css시간에 배웠던 것만으로도 충분히 만들 수 있으니 너무 걱정하지 마시고 도전해보세요! 같이 만들 반응형 웹 페이지 보러가기 PC에서 링크를 클릭해서 들어가셨다면 화면의 너비를 줄였다가 늘여보세요. 화면 크기에 따라 조금씩 바뀌는 것이 느껴지나요? 지금부터 하나씩 만들어보도록 하겠습니다. 필요한 부분마다 이전에 포스팅했던 글의 링크들을 같이 적을 예정입니다. 혹시 기억이 나지 않으면 링크를 클릭해서 글을 보고 다시 돌아와서 진행하시면 될 것 같습니다. 기본파일 구성 및 내용 넣기 우선 파일을 구성해보겠습니다. 우선 폴더를 하나 만들고 그 안에 index.html, css폴더와 css폴더 안에는 main.css 그리고 image 폴더와 ..
지난 시간에는 반응형 웹에 대해서 미리 알고 있어야 할 것들을 배웠습니다. 반응형 웹이 무엇인지 설명한 후 반응형 웹을 만들기 위해서는 길이를 가변적으로 해야하며, 뷰포트 메타태그와 미디어쿼리가 필요하다고 설명드렸는데 다 기억나시나요? 예제를 같이 만들면서 이미 설명한 부분은 빠르게 넘어가니 기억이 안나시면 꼭 복습해주세요. 반응형 웹 제작하기 1 오늘은 무엇을 만들지 같이 살펴볼까요? 3개를 모아놓고 찍으니 약간 징그럽지만 참아주세요. 넬슨 만델라의 명언을 가지고 간단하게 반응형 웹을 만들어 보았습니다. 브라우저의 크기가 달라져도 컨텐츠는 가운데에 위치하고 데스크톱 사이즈가 되었을 땐 명언의 폰트사이즈가 2배가 되었다는 것을 주목해주시면 됩니다. 같이 만들어 볼까요? 우선 이미지와 파일들을 구성해봅시다..
반응형 웹이란 무엇일까요? 화면에 맞게 웹페이지를 보여주는 것을 "반응형 웹"이라고 합니다. 미래의 일을 예상하기엔 힘들지만 확실한건 아주 다양한 화면을 가진 기기들이 나올 것이고, 지금보다도 더 많은 사물에서 인터넷으로 접속하는 것이 가능해질 겁니다. 그때마다 그 기계에 맞는 페이지를 따로 구성해야할까요? 그러기엔 돈도 시간도 너무 많이 들어가겠죠. 하나의 코드로 여러 기기마다 최적화되서 보여줄 수 있다는 건 정말 매력적인 일입니다. 모바일이 조금 더 많습니다. 휴대폰 없이 사는 건 정말 상상하기도 싫은 세상. 반응형 웹의 중요성은 말 안해도 아시겠죠? 이제부터 같이 만들어 봅시다.가장 먼저 배워야 할 것들은 무엇일까요? 예제를 보면서 따라 만들어보기 전에 우선 알아두어야 할 개념이 3개 있습니다. 이..
css의 position 속성 배우기 홈페이지를 만들기 전에 우선은 css속성 중에 하나인 position에 대해서 알아야 합니다. 반응형 웹을 만들기 전에 우선 position 속성을 배워봅시다. position 속성은 사용되는 엘리먼트들의 위치를 지정할 때 사용하는 속성입니다. 각 엘리먼트들은 위치를 옮길 수 있습니다. left, right, top, bottom이라는 속성들로 말이죠. 이렇게 위치를 옮기는 것을 오프셋을 조정한다고 합니다. left, right, top, bottom 등 오프셋을 조정할 수 있는 속성에는 길이 단위(px, em 등)와 %(퍼센트)를 줄 수 있습니다. 그저 오프셋을 지정한다고 엘리먼트들이 움직이는 것은 아닙니다. 포지션 속성을 설정해줘야 지정한 오프셋에 따라 엘리먼트들..
플렉스를 활용해서 에어비앤비 네비게이션 바를 만드는 작업은 오늘로 마무리 되겠네요. 어서 마무리하고 다음 시간엔 더 재밌는 것을 만들어보겠습니다. 네비게이션 바 만들기 1 - 준비운동네비게이션 바 만들기 2네비게이션 바 만들기 3 지난 시간에 설명했던 것들은 알고 있으신 것으로 생각하고 빠르게 넘어갑니다. 혹시 기억이 나지 않으시면 위의 링크를 클릭해서 복습해주세요 ! margin에 auto 값 주기 우선 에어비앤비에서는 로고는 왼쪽 끝에 위치하고, 나머지 글들은 오른쪽 끝에 위치했습니다. 로고를 제외한 나머지 리스트들을 오른쪽 끝으로 이동시켜 보겠습니다. 어떻게 해야할까요? 첫번째 리스트(로고)의 오른쪽에 마진값을 auto로 지정하면 어떻게 될까요? 컨테이너 안에 있던 여유공간이 지정한 곳으로 이동하게..