WEB (30) 썸네일형 리스트형 2일차 : 데이터타입 - 문자열과 숫자, 변수와 대입연산자 2일차 : 데이터타입 - 문자열과 숫자, 변수와 대입연산자 오늘 배울 내용은 데이터타입과 변수, 대입 연산자입니다. 우선 자바스크립트라는 언어에는 어떤 형태의 데이터가 있는지 알아보겠습니다. 1. 데이터 타입(자료형) - 문자열과 숫자 자바스크립트의 데이터 타입이라고 검색을 해봅시다. 총 여섯가지 타입과 오브젝트(객체)가 나옵니다. 이번 시간에는 넘버와 스트링(문자열)을 배우면 됩니다. 지난 시간에 자바는 아무곳에서나 검사(inspection) - 콘솔(console)로 바로 실행시킬 수 있다고 했죠? 구글 메인 페이지에서 콘솔을 이용해 먼저 1을 띄워봅시다. alert(1);을 입력하면 알림창으로 1이라는 내용이 나옵니다. 1+1을 넣으면 이를 계산한 2가 나옵니다. 그런데 이렇게 매번 alert를 넣.. 1일차 : 수업소개, HTML과 JavaScript의 만남 1일차 : 수업소개, HTML과 JavaScript의 만남 웹이 세상에 처음 등장했을 때는 HTML만 존재했습니다. HTML은 한 번 화면에 출력되면 언제나 그 모습 그대로 보여줍니다. 사람들은 웹페이지도 사람들과 동적으로 상호작용하기를 바라기 시작합니다. 이를 위해서 탄생한 것이 바로 자바스크립트죠. 예를 들어, 야간모드처럼 사용자가 버튼을 클릭하면 화면의 색이 변경되는 것이 바로 자바를 활용한 것입니다. html과 javascript는 어떻게 함께 사용할 수 있을까요? 크게 3가지 방법이 있습니다. 1. Script 태그 html 안에 자바를 넣겠다는 태그가 바로 script 태그 입니다. 이렇게 자바를 넣어주면 됩니다. 쉬운 예로 글씨를 넣겠다는 document.write('넣을내용');을 사용해 .. 7일차 : CSS 코드의 재사용 7일차 : CSS 코드의 재사용 열심히 배운 CSS를 다른 페이지에서도 활용해 봅시다. 그 전에는 html 파일에 css 코드를 삽입하여 스타일을 바꿔줬는데, 이제 css 파일을 새로 만들어 볼 차례입니다. 지난번에 사용했던 css 부분을 그대로 따와서 sample.css 파일을 만들어보겠습니다. 새로 만들 때 style 태그는 제거해 주세요! 그리고 이렇게 만든 css 파일과 html 파일을 연결해 주면 됩니다. 바로 link 태그를 이용해서요! 요렇게 넣어주면 됩니다. style 부분을 모두 지우고 저렇게 링크 하나만 걸어주면 완성입니다. 매우 간단하죠? css 부분이 너무 많아지면 html에 함께 적어서 적용시키기도 어렵겠죠. 여러 웹 페이지를 같은 디자인으로 만들 때에도 마찬가지구요. 템플릿을 적.. 6일차 : 반응형 디자인 6일차 : 반응형 디자인 ※ 반응형 웹/디자인? - 웹페이지의 크기를 변경했을 때, 요소들을 각 크기에 따라 다르게 보여주는 것 지금 우리는 반응형 디자인에 매우 익숙합니다. 컴퓨터 스마트폰 태블릿과 같은 각각의 기기 뿐 아니라 여러가지 다양한 웹브라우저에서 같은 페이지를 같은 모습으로 확인할 수 있습니다. 그러나 반응형 디자인이 등장하기 전에는 웹페이지의 요소들이 다양한 환경에서 적응할 수 없는 경우가 대부분이었습니다. 만약 각 요소들의 사이즈가 정해져 있다면, 큰 화면에서 보는 내용과 작은 화면에서 보는 내용이 다르겠죠. 그러면 반응형 디자인은 어떻게 구현할 수 있을까요? 바로 미디어 쿼리를 통해서 구현할 수 있습니다. 우선 미디어 쿼리라는 파일을 만들어 봅시다. 간단하게 웹페이지를 하나 만들고, r.. 5일차 : 그리드 5일차 : 그리드 그리드 하니까 서강준이랑 김아중 나오는 드라마가 생각나네요. 저도 유튜브에서 드라마 리뷰로 간단히 본거긴 한데.. 이 드라마 보신 분은 그리드의 뜻을 아실겁니다. 그리드는 greed 가 아니라 grid 이고, 격자무늬라는 뜻입니다. 드라마에서도 태양풍으로부터 지구를 보호하기 위해 이시영이 그리드라는 촘촘한 방어막을 설치하죠. 아무튼! 그래서 그리드는 어디에 사용되는 것일까요? 웹페이지에서 페이지 레이아웃을 쉽게 설정하기 위해 사용하는 방법입니다. 그리드를 어떻게 사용하는지 알아보기 위해 그리드 파일을 새로 만들어 보겠습니다. 1) div 태그로 여러가지 영역 만들기 일단 아무 의미 없는 첫번째 영역와 두번째 영역를 div를 이용해 넣어보겠습니다. ☆ 여기서 잠깐! div란? div는 d.. 4일차 : 박스모델 4일차 : 박스모델 CSS가 무엇인지부터 속성과 선택자까지 배웠으니 이제 디자인을 해봐야겠죠? 디자인을 시작하기 전에, 박스모델이라는 매우 매우 중요한 개념을 먼저 알아야 하는데요. 지난 번에 배운 것처럼 구글에 CSS box model 을 검색해봅시다. 박스 모델은 CSS에서 디자인과 레이아웃에 대해 이야기 할 때 사용됩니다. 보이지 않아서 그렇지, 모든 HTML 요소들은 박스로 둘러 쌓여 있는데 이 박스를 가르키는 것이 바로 박스 모델입니다. 박스모델은 가장 안쪽의 내용과 테두리인 보더, 그리고 그 사이의 여백인 패딩, 테두리와 테두리 사이의 여백인 마진으로 이루어져 있습니다. 디자인을 하려면 위치를 옮기고 예쁘게 만들어야 하는데요. 레이아웃도 마찬가지이구요. 배치를 하려면 구획이 어떻게 나누어져 있.. 이전 1 2 3 4 5 다음
