본문 바로가기

JavaScript

 (8)
[입문] HTML Tag 기본 01. 문서 타입 선언 문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며, 대소문자를 구별하지 않는다. 문서별 기술 양식이 있었으나, HTML5이 표준이 되어 HTML5 문서 형식 정의만 사용한다. 02. html Tag html 태그는 모든 HTML 요소의 부모이며, 웹 페이지에 단 하나만 존재한다. 문서 타입 선언 태그 이외의 모든 HTML 태그는 HTML 내부에 작성해야 한다. Global Attribute (전역 속성)을 지원하며, 특히 lang 속성을 HTML 태그에 사용하는 경우가 많다. 03. head Tag head 태그는 메타데이터를 포함하기 위한 요소이며, html 태그와 마찬가..
브라우저의 동작 원리 자바스크립트를 본격적으로 공부하기에 앞서, 브라우저의 동작 원리도 알아두면 좋다. 당신이 자바스크립트를 공부하려는 이유는 무엇인가? 더 나은 웹사이트를 만들기 위해서, 혹은 더 나은 자바스크립트 개발자가 되기 위해서일 거다. 그렇다면 자바스크립트가 주로 쓰이는 브라우저가 어떻게 동작하는지 알아두는 편이 좋다. 자바스크립트는 구글의 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)인 Node.js의 등장으로, 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 범용 개발 언어가 되었다. 하지만 자바스크립트가 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션이다. 대부분의 프로그래밍 언어는 운영체제(..
프로그래밍이란? 자바스크립트 카테고리에서 갑자기 프로그래밍이 나와서 당황했는가? 당황할 필요 없다. 자바스크립트는 프로그래밍 언어 중 하나일 뿐이며, 자바스크립트를 잘 이해하기 위해서는 프로그래밍에 대한 개념과 이론을 알고 공부하는 것이 좋다. 따라서 당신이 자바스크립트를 배우는 첫 걸음을 조금이나마 쉽게 뗄 수 있도록 개념적인 이해를 돕고, 프로그래밍에 필요한 핵심 요소들을 먼저 설명한 뒤 자바스크립트 문법, 예제 등을 소개하고자 한다. 우선 프로그래밍에 대해 알아보도록 하자. 프로그래밍이란, 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이를 위해 먼저 무엇을 실행하기 원하는지에 대한 정의가 필요하다. 다시 말해, 프로그래밍에 앞서 문제(요구사항)를 명확히 이해한 후 적절한 문제 해결 방안의 정의가 필요하다. ..
Javascript, 왜 중요한가? HTML, CSS, Javascript (이하 자바스크립트)는 웹사이트 개발에서 떼려야 뗄 수 없는 존재들이다. HTML이 없으면 사이트의 골격을 만들 수 없고, CSS가 없으면 멋지게 보이는 사이트를 만들 수 없다. 자바스크립트가 없으면 무슨 문제가 있을까. 자바스크립트 없이 웹사이트를 만들게 되면, 그 사이트는 단순한 웹 문서에 지나지 않는다. 그저 눈으로 읽고 보는 수준에 그치게 된다. 이는 웹사이트를 사용하는 사용자들에게 굉장히 지루한 경험이 될 거다. 예전에는 인터넷 속도나 컴퓨터 사양 등의 문제로 애니메이션이나 기능을 최소화했지만, 지금은 그런 부분들이 많이 해소되어 다양한 애니메이션과 기능을 활용해 사용자들에게 흥미롭고 재미있는 경험을 제공하고 있다. - 애니메이션과 기능을 활용해 홍보용 페..
웹 퍼블리셔로 입문하기 위해 도움이 되는 사이트 3선 1. W3Schools : https://www.w3schools.com/ 2015년 10월, [NCS 기반]디지털(UI/UX를 활용한 모바일 웹) 디자인 실무과정 이라는 교육 프로그램을 이수하면서 가장 처음 들었던 사이트다. 오래 전부터 존재했던 사이트고 웹 퍼블리싱을 하는 사람들이라면 모르는 사람이 없을 정도로 유명한 사이트다. 영어로 되어 있어 보기가 어렵다는 단점이 있지만 영어와 함께 공부를 할 수 있으니 일석이조다. 사이트 자체에 내장된 에디터로 예제를 실행할 수 있어 내 마음대로 코드 내용을 바꿔볼 수 있다. 2. PoiemaWeb : https://poiemaweb.com/ 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb...
프론트엔드 개발, 뭐하는 직종이야? "프론트엔드(Front-End) 개발이란, 웹이나 앱을 사용하는 유저가 눈으로 보는 모든 화면의 요소들을 개발한다." 프론트엔드 개발의 사전적 수행 직무는, 백엔드(Back-End) API (Application Programming Interface)에서 가져온 데이터의 출력, 입력을 통한 비지니스 로직 구성과 유저가 사용하는 유저 인터페이스를 개발한다. 실무에서 경험한 수행 직무는, 백엔드 개발자가 건네주는 API 문서 혹은 API 정보를 공유 받아 서버에서 제공해주는 데이터를 가져와서 화면에 나타나게 해주는 것이 기본이며, 서비스를 사용하는 흐름에 따라 데이터를 가공하거나 선별하여 해당 단계에서 필요한 데이터만 유저가 볼 수 있도록 한다. 1. 프론트엔드 개발자가 되려면? 프론트엔드 개발자를 목표로..
[웹 퍼블리셔 성장기 1편] 웹 퍼블리셔, 뭐하는 직종이야? "웹 퍼블리셔(Web Publisher)란, 디자인된 페이지를 웹 화면으로 구현하며,HTML, CSS, JavaScript를 기본 소양으로 가지고 있어야 한다." 웹 퍼블리셔의 사전적 수행 직무는,웹디자이너, 웹프로그래머, 웹기획자 등과 웹사이트의 제작 및 진행방향 등에 대해 협의하고 조언한다. 웹디자이너 또는 HTML 코딩원에 의해 코딩된 작업물을 ¹웹 표준, ²웹 접근성, ³크로스 브라우징, ⁴시멘틱 마크업 원칙에 맞추어 코딩한다. 작업 결과물을 웹프로그래머, 웹기획자 등에게 전달한다. 운영 중인 웹사이트를 점검하여 웹 표준, 웹 접근성 등에 부합하는지 검토하기도 한다. 출처: 고용노동부 한국 고용정보원 워크넷 실무에서 경험한 수행 직무는,기획서를 보고 구현 가능 여부를 판단하고, 디자이너의 디자인을..
자바스크립트는 무엇인가? 1995년에 등장한 자바스크립트는 펄(Perl) 같은 서버 언어에서 담당하던 입력 유효성 검사였다. 자바스크립트가 등장하기 전에는 필수 필드가 비어있거나 입력된 값이 잘못된 형식인지 판단하려면 서버를 거쳐야만 했는데, 당시에는 전화선을 이용한 모뎀을 사용하고 있어 속도가 매우 느렸다. 그래서 넷스케이프 내비게이터는 자바스크립트를 도입하여 이 문제를 해결했다. 이후 자바스크립트는 출시된 주요 웹 브라우저 모두에서 중요한 기능으로 자리 잡게 된다. 자바스크립트는 더 이상 단순한 데이터 유효성 검사에 국한되지 않고 클로저나 익명(람다) 함수, 심지어 메타프로그래밍까지 처리하며 복잡한 계산과 상호작용을 수행하는 완전한 프로그래밍 언어가 되었다. 넷스케이프에서 일하던 브랜든 아이흐(Brandan Eich)가 Mo..

티스토리툴바