수업의 목적 - 생활코딩 수업의 목적 2017-12-01 03:17:47 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. JavaScript CSS로 아름다운 웹 페이지에 대한 욕구가 충족되기 시작했다. 그러자 사용자들이 동적으로 상호작용할 수 있는 웹 페이지를 원하기 시작했다. 그래서 자바스크립트라는 기술이 태어났다. 기존의 웹 페이지는 화면에 출력되면 자기 자신을 변화시킬 수 없었다. 하지만 자바스크립트는 HTML을 제어하여 사용자와 상호작용할 수 있다. 그런 면에서 자바스크립트는 웹 페이지의 동적인 요소를 담당한다고 할 수 있다. HTml 과 JS HTML에 JavaScript를 추가하는 2가지 방법에 대하여 알아보자. script 태그 는 자바스크립..

반응형 디자인 - 생활코딩 반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 반응형 웹 PC든 스마트폰이든 태블릿이든 웹에 접속할 수 있는 하드웨어가 다양해졌다. 그렇기에 웹은 다양한 사이즈와 비율을 가진 하드웨어에 대응하는 웹 페이지를 만들어야 했다. 그런 맥락에서 탄생한 것이 바로 반응형 웹 디자인이다. 반응형 웹 디자인(responsive web)이란 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 뜻한다. 미디어 쿼리 미디어 쿼리는 반응형 디자인을 CSS로 구현하는 역할을 맡는다. 미디어 쿼리..

인터넷에서 웹이 동작하는 기본적인 원리 인터넷이 동작하려면 최소 2대의 컴퓨터가 필요하다. 역할에 따라서 서버와 클라이언트로 부른다. 따라서 웹이 인터넷에서 동작하려면 웹 클라이언트와 웹 서버가 필요하다. 인터넷에서 웹이 동작하는 과정을 살펴보자. 웹 브라우저를 설치한 클라이언트에서 인터넷을 통해 웹 서버에 접속한다. 클라이언트가 서버에 index.html 파일을 요청(request)한다. 웹 서버는 저장장치에서 index.html이라는 파일을 찾아서 클라이언트로 전송한다. 클라이언트의 웹 브라우저는 수신한 index.html이라는 파일의 코드를 읽고 해석한다. 웹 브라우저의 화면에 보여준다. 이미지 출처 : https://youtu.be/yBPyzaccbkc 웹 서버를 운영하는 하는 방법은 크게 2가지..

https://opentutorials.org/course/3084/18418 HTML 태그의 제왕 - 생활코딩 우리는 지금까지 문서를 만드는 방법을 충분히 자세히 살펴봤습니다. 태그를 결합하는 방법을 완전히 마스터했고, 빈도수가 절대적으로 높은 태그들을 살펴봤습니다. 앞으로 배울 것 보다, 지 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. a tag 지금의 웹을 만든 중요한 태그가 있다. 웹과 웹이 서로 연결하는 태그가 그것이다. text href : Hypertext + reference 자주 쓰는 형식은…. text target=”_blank” : 새 탭으로 열기 title=”…” : 커서가 위에 있을 때 표시되는 정보 출처를 표시하기 위해서 나무위..

https://opentutorials.org/course/3084/18488 HTML이 중요한 이유 - 생활코딩 --- 누구나 기초가 중요하다고 말합니다. 하지만 기초가 중요하다는 말을 잘 들어보면 응용으로 가는 과정으로서 기초가 중요하다는 뜻인 경우도 많더라구요. 그런데 사실 기초는 기초만으로도 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. HTML을 의미에 맞게 사용한다는 것 중요하다. 검색 엔진은 웹 페이지에 담긴 html 코드를 분석한다. 태그에 근거해서 정리 정돈한다. 현대 사회에서 검색 엔진의 위상을 고려해 볼 html의 의미에 맞게 사용한다는 것은 비즈니스 측면에서 중요하다. 또 신체적 장애가 있는 분들이 사용하는 청각화 장비도 html을 ..