WEB2 - JavaScript WEB2 - JavaScript - 생활코딩수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상opentutorials.org 생활코딩에서 'WEB2 - JavaScript'강의를 수강했다. HTML과 CSS의 수업을 마친 후 JavaScript 수업을 들었다. 본격적인 프로그래밍언어를 배우면서 마크업랭귀지와 프로그래밍언어의 차이를 알게됐다. 멈춰있던 정적인 페이지들을 움지이는 동적인 페이지로 변경하는 과정들이 신기했다. 강의에는 CSS 기초적인 코드강의가 포함되어 있어서 미리 CSS를 공부했다면 해당 부..
생활코딩
UX(User Experience)제품과 시스템, 서비스 등을 사용자들이 직/간접적으로 경험 하면서 느끼고 생각한 총체적 경험을 의미 UI(User Interface)사용자가 시스템을 제어하기 위해 사용하는 조작장치웹/앱에서는 사용자와 컴퓨터의 상호작용을 하기 위해 개발자가 만들어 둔 버튼, 아이콘 등을 말한다버튼(Click me)을 클릭하면 경고창이 나타난다. 여기서 버튼은 사용자가 시스템을 제어하기 위해 사용하는 조작장치다. 사용자가 조작하는 제어장치를 User Interface라고 부른다. 경고창은 실행되는 타이밍이나 경고문구는 개발자들이 만들었지만, 코드에는 경고창의 기능이나 모양이 설명되어 있지 않다. 경고창은 웹브라우저개발자가 기능을 미리 만들어두었고, alert함수를 사용하면 경고창기능을 실..
소프트웨어를 혼자서 만드는 경우는 없다. 또한 이미 만들어진 것들을 처음부터 다시 만드는건 생산성이 없다. 이미 다른 사람들이 만들어 놓은 것들을 부품으로 내가 만들고자 하는 것을 빠르게 조립해 나가는 것이 기본이다. 다른 사람이 이미 만들어 놓은 것들을 사용하는 방법들을 알아보자. 다른 사람의 도움을 받아 소프트웨어를 만들기 위해 알아야 할 키워드 라이브러리(Library) 응용 프로그램 개발을 위해 필요한 기능을 모아 놓은 소프트웨어. 부품이 되는 소프트웨어를 정리정돈해둬서, 재사용하기 쉽도록 만들어 놓은 소프트웨어의 모음이다. 내가 만들고 있는 프로그램에서 사용 할 부품을 가져오는 느낌이다. 예를 들어 jQuery(JavaScript의 오래된 라이브러리)가 있고 사용하면 생산성이 훨씬 높아진다...
코드 재사용 하기코드 중복 제거 이유웹페이지에 JS코드를 다른 페이지들에도 하나하나 복사하고 수정하려면 오래걸린다.웹페이지마다 중복 된 태그를 지우는게 효율적이다. 파일로 코드 재사용파일정리정돈의 도구들인 함수, 객체 보다 더 큰 정리정돈의 도구서로 연관된 코드들을 파일로 묶어서 그룹핑하는 것사용법'파일명.js' 파일 생성 후 중복된 JS 코드 옮기기JS태그인 주소가 담긴 script 태그를 원하는 html 파일에 head태그 내에 붙여서 사용 파일로 만들어서 JS코드 사용 이유html 코드창의 깔끔해져 가독성이 올라간다.js코드 수정시 한 번만 수정하면 전체페이지에 적용되어 유지보수가 편해진다.새로운 웹페이지에도 이미 만들어 놓은 js코드를 재사용하기 쉽다.html파일안에 js 직접 놓는 것보다 훨씬 ..
기본 연산자프로그래밍에서의 다양한 연산을 위한 기호, 키워드대입 연산자= 오른쪽의 값을 왼쪽에 대입산술 연산자+, - , *, /, %사칙연산에 따라 우선순위 있음 ()사용으로 우선순위 변경 가능복합 대입 연산자+=, -=, *=, /=, %=해당 변수에 산술연산 이후 해당 변수에 대입n1 = n1 + 1; => n1 += 1;증감 연산자++, --전위 연산 : --변수명 전위 연산시 해당 라인에서 바로 적용후위 연산 : 변수명++후위 연산시 다음 라인에서 적용논리 연산자||(or 둘 중 하나가 참일 경우 참), &&(and 둘 다 참일 경우 참), !(not 반전)boolean 값으로 논리 계산단락 평가(Short-circuit Evaluation)첫 번째 피연산자의 값만으로 해당 결과를 확정할 수 있..
WEB2 - CSS WEB2 - CSS - 생활코딩수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 아름답게 디자인opentutorials.org 생활코딩에서 'WEB2 - CSS'강의를 수강했다. HTML강의를 통해 내가 만들고 싶은 웹서비스를 기획하고 웹 페이지를 만들었다. 내가 만든 웹 페이지에 디자인 효과를 추가하기 위한 CSS 수업을 들으면서, 수업을 통해 내가 하고 싶은 것은 크게 두가지였다. 반복된 효과를 사용하는데 같은 코드를 반복적으로 작성하면서 프론트엔드는 막노동 같다는 생각을 했기 때문에 이를 간편하게 적용시키고 싶었다. 다른 웹페이지들에..
CSS코드의 재사용 코드 중복의 제거가 필요한 이유 웹페이지마다 동일한 CSS코드를 하나하나 붙여넣고 수정하려면 오래 걸린다. 웹페이지마다 중복 된 태그를 제거해서 관리하는 것이 효율적이다. CSS 코드 중복 된 부분 제거하는 방법(CSS 링크코드) 1. style.css 파일 만들어서 중복된 스타일 코드 붙여 넣기. 2. html파일에 스타일태그 대신 링크코드 넣기. 3. 링크코드를 추가한 HTML파일마다 css문법이 적용되어있다. 코드를 재사용하는 것이 편한 이유 html 코드창의 깔끔해져 가독성이 올라간다. css코드 수정시 한 번만 수정하면 전체페이지에 적용되어 유지보수가 편해진다. 새로운 웹페이지에도 이미 만들어 놓은 css코드를 재사용하기 쉽다. html파일안에 css 직접 놓는 것보다 훨씬 ..
반응형 디자인(반응형 웹, Responsive Wed) 화면의 크기를 조절하면 그 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화 된 모양으로 바뀌게 하는 것. 수많은 형태의 화면에서 동작해야하는 것이 초기 웹의 숙제였고 현재의 해결책이 반응형 디자인이다. Media query 소개 반응형 웹을 만드는 문법. 화면의 크기, 특성에 따라 어떠한 조건을 만족할 때만 css내용이 동작하도록 하는 것. - 최소너비 min-width:000px (screen width > 000px) - 최대너비 max-width:000px (screen width < 000px) - 현재 화면너비 알아보는 법 : 페이지 우클릭 - 검사(단축키 : Ctrl + Shift + I) - 화면 오른쪽 위에 크기표시 CSS CSS..
Grid 소개 - 레이아웃 시스템 중 하나 - 두 방향(행과 열) 레이아웃 시스템이로 2차원적이다. - Flex는 1차원적인 한 방향 레이아웃 시스템이다. 최근엔 양 방향을 한 번에 조절 가능한 Grid를 점점 많이 쓰는 추세이긴 하지만 세세한 레이아웃 조절로 복합적인 표현이 가능하고 더 많은 웹브라우저에서 지원하는 건 Flex기 때문에 의도에 맞게 사용하면 된다. - 그리드 사용률 알아보기 1. Can I Use 사이트 : 현재 웹브라우저에서 체택하고 있는 프론트엔드(HTML, CSS, JS) 기술들을 검색하는 사이트 2. 궁금한 기술 검색 후 지원 브라우저 및 전세계 사용률 확인하기 왼쪽은 생활코딩 그리드 강의가 올라온 2017년 결과이고 오른쪽은 2020년 현재 그리드를 검색해본 결과이다. 3년동안..
각 태그들의 부피감 CSS 박스모델 모든 HTML 요소는 상자로 간주 할 수 있습니다. CSS에서 박스모델이란 디자인과 레이아웃을 말할 때 사용합니다. CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다. 여백, 테두리, 패딩 및 실제 콘텐츠로 구성됩니다. 태그라는 같은 문법이지만 웹페이지에서 차지하는 자리가 다른 이유 - block level element (화면 전체를 쓴다.) 제목 태그는 다른 콘텐츠와 같은 라인을 사용하지 않고 줄 바꿈이 된다. - inline element (화면 부분을 쓴다.) 링크태그는 본인 콘텐츠의 크기만큼만 자리를 차지하고 다른 콘텐츠와 같은 라인에 존재한다. - 각 태그의 종류에 따라 특성에 맞게 기본값이 설정 돼있다. 하지만 기본 설정은 'displa..
