생활코딩/WEBn
-
[JS] 나머지 개념들 - library, framework, UI, API생활코딩/WEBn 2020. 8. 29. 19:41
[강의 출처] opentutorials.org/course/3085/18886 라이브러리와 프래임워크 - 생활코딩 라이브러리와 프래임워크 2017-12-02 16:24:54 opentutorials.org Library & FrameWork 다른 이들이 작성해둔 코드들의 도서관 같은 곳 library가 각각의 부품이나 도구들의 전시장이라면 framework는 뼈대나 골격이 이미 잡힌 반제품들을 완성시키는 느낌 전체적인 흐름을 누가 결정하느냐에 따라 구분된다고 생각하면 됨 [참고] 라이브러리와 프레임워크의 사용법과 효용 js 라이브러리인 jQuery를 사용한다고 할 때, 똑같이 html문서에서 js로는 길게 작성해야되는 코드들에 대해서 간단하게 처리 가능한 이점이 있음 아래처럼 'a'태그의 글자색을 빨간색..
-
[JavaScript] 개요생활코딩/WEBn 2020. 8. 28. 22:17
[강의 출처] opentutorials.org/course/3085 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상� opentutorials.org JavaScript란? 사용자와 동적으로 상호작용(사용자의 조작에 반응해서 움직이는)하는 웹페이지를 구현하는 기술 주로 HTML을 제어하는 용도로 쓰이며, HTML 위에서 동작하도록 고안된 프로그래밍 언어 웹페이지에서 일어나는 일련의 사건들(event) 중 특별한 경우들(onclick, onchange, ...)을 통해 상호작용 가능 HTML..
-
[HTTP] 개요생활코딩/WEBn 2020. 8. 27. 11:54
[강의 출처] opentutorials.org/course/3385 WEB2 - HTTP - 생활코딩 2018년 8월 1일부터 14일까지 10일동안 코딩야학 4기가 시작됩니다. 혼자 공부하지 마시고, 함께 공부해보세요. 현업의 엔지니어들이 기술지원과 상담을 해드리고, 완주하신 분들께는 수료증도 드 opentutorials.org HTTP HyperText Transfer Protocol 웹브라우저와 웹서버가 컨텐츠(html, 이미지, 오디오, css, js, ...)를 주고 받기 위해 사용하는 통신규칙 웹브라우저의 요청(Request)과 웹서버의 응답(Response)을 위한 메시지로 구성되어 있다 웹브라우저의 개발자도구 - 네트워크에서 통신 내용을 확인할 수 있음 HTTP를 이용한 통신방식 요약 사용자..
-
[CSS] 반응형 디자인(Responsive Design), Media Query생활코딩/WEBn 2020. 8. 26. 17:16
[강의 출처] opentutorials.org/course/3086/18323 반응형 디자인 - 생활코딩 반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항 opentutorials.org 반응형 디자인(Responsive Design) 웹 특성상 PC, mobile, 여러 운영체제 등 다양한 환경에서 적절하게 동작해야할 필요성 대두 화면의 크기에 따라, 웹페이지의 각 요소들이 반응하여 그 화면에 최적화된 형태로 동작하는 디자인 미디어 쿼리(Media Query) 반응형 디자인을 구성하는 핵심적인 기술 태그 내에 @media(조건문) { 실행 } 형식으로 작성 스마트폰의 가로모드, 세로모드를 비롯한 다양한 크기의 화면에 대응할 수..
-
[CSS] 레이아웃: Box Model, Grid생활코딩/WEBn 2020. 8. 25. 17:31
[강의 출처] opentutorials.org/course/3086/18319 박스모델 - 생활코딩 CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항 opentutorials.org Box Model tag를 감싸는 Box형 부분들(padding, border, margin, width 등)에 효과를 줌으로써 디자인함 width: 텍스트의 너비 display: 글자의 부피 지정, block(그 줄 전체), inline(텍스트만큼의 부피), none(사라짐), grid, ... Grid 가로/세로 2차원 레이아웃을 나누기 위해 사용 의 해당 태그에서 display: (inline-)grid 로 정의하여 사용 가능 div(block), span(inline) 태..
-
[CSS] Selector: class, id생활코딩/WEBn 2020. 8. 24. 20:57
[강의 출처] opentutorials.org/course/3086/18329 CSS 선택자를 스스로 알아내는 방법 - 생활코딩 강의 내용이 많고 복잡합니다. 시간을 충분히 확보하고 시작하세요. 소스코드 변경사항 opentutorials.org Cascading: 선택자(Selector) 우선순위 id > class > tag(element) class (코드 작성자가) 텍스트들을 어떤 의도에 따라서 그룹화할 때 쓰는 선택자(Selector) 다른 태그에 class="class이름" 형태로 삽입 한 태그에 여러 class 중첩이 가능하며, 띄어쓰기로 구분 여러 class가 중첩된 경우, HTML CSS JS 2. 같은 계열 Property의 Value라면 아래처럼 표현 가능, Value의 순서는 중요하지..
-
[CSS] 정의, Selector, Declaration, Property, Value생활코딩/WEBn 2020. 8. 24. 19:37
[강의 출처] opentutorials.org/course/3086 WEB2 - CSS - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 아름답게 디자인�� opentutorials.org CSS란? HTML의 후배(?)격인 디자인 최적화 언어 HTML 덕분에 웹페이지 형태의 정보 공유가 가능해진 이후, '아름다움'에 대한 추가적인 요청이 생김 처음에는 HTML의 디자인 관련 태그를 이용했으나, 점차 이에 최적화된 새로운 도구 CSS가 필요 '정보'와 '디자인'을 제공하는 코드가 섞이면서 정보로서의 가치가 희석될 뿐 아니라, 변화(전체 텍스트의 색..
-
[Internet] Mac 내장 Apache로 웹서버 운영하기생활코딩/WEBn 2020. 8. 21. 21:02
[강의 출처] opentutorials.org/course/3084/18894 웹서버 운영하기 : 맥 - 생활코딩 자신의 운영체제에 맞는 수업을 찾아서 학습해주세요. 맥에 웹서버 설치하기 웹서버와 http 웹브라우저와 웹서버의 통신 --- 맥에 웹서버 설치 이번 시간에는 아파치 웹서버를 맥 컴퓨터에 설치 opentutorials.org 기타 참고페이지들은 본문에 적어두었다. 생활코딩 Web1 Internet편에 직접 웹서버를 운영해보는 단계가 있다. 생활코딩에서는 bitnami라는 프로그램을 통해 실습을 하는데, 아래와 같은 문구가 있는 게 아닌가. "맥에는 아파치가 기본적으로 깔려있습니다. 그래서 실습을 하기가 무척 쉽습니다." 그래서 직접 해보기로 했다. 맥에 기본적으로 깔려 있는 아파치로 웹서버를 ..