Workspace

데이터 아트 작업 중에서 관객이 직접 그 데이터에 관여하는 작업을 만들고 싶어졌다. 그 과정에서 웹/데이터베이스/서버... 등의 공부의 필요성을 느껴 당분간은 개발 공부만 해야할 것 같다. T-T (아이좋아) 프론트엔드 공부는 html, css만 따로 배웠을 뿐.. 아예 동작 원리에 감이 안잡혀서 클래스101 강좌들을 뒤적이며 어떻게 시작해야할지, 고민이 많았다. 그러던 중, 크리에이터 개발자 사관학교 강사님이 올려주신이 수업들이 전부 내가 찾던 내용과 딱 맞아 떨어졌고, 이 강좌를 쭉 들으며 프론트엔드 - 백엔드 - 배포까지! 한방에 쭉 달려볼 예정이다. 클래스 101 [유료강좌] 개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무! https://class1..

이어서 p5.js 튜토리얼 영상을 보며 공부한 내용을 정리해본다. 유튜브 채널 생활코딩에서 올려주신 모션그래픽을 위한 p5.js 강좌를 보며 공부중이다! https://youtu.be/nxG4hzciL7Q 7강 코딩으로 그림을 그릴 때 가장 큰 장점이라고 할 수 있는 애니메이션을 진행해봤다. console.log 라는 함수를 호출하면 console창에 값을 띄울 수 있다. (원하는 값은 파라미터에 넣어준다.) 그외 random함수를 통해 0에서 400까지의 x위치 y위치 사이에 랜덤하게 원이 나타나도록 설정했다. 같은 방식으로 색상, 크기도 바꿔주었다. random(400) -> 0에서 400사이 랜덤값 호출 random(100, 255) -> 0에서 255사이 랜덤값 호출 8강 화면의 왼쪽 위에서 화면..

p5.js를 시작해보려 한다. 자바스크립트 언어도 공부해보면서 다양한 작업을 할 수 있어 꽤 유용하지 않을까 싶다. 유튜브에 p5.js를 잘 정리해주신 강의가 있어 이걸 보면서 따라해볼 예정이다. 이런 좋은 콘텐츠를 무료로 올려주시다니.. 참 감사하다. * 공부에 큰 도움을 받은 유튜브 강좌 링크를 첨부한다. (생활코딩 - 모션그래픽을 위한 p5.js) https://youtu.be/31JEsy40XBU 1강 1. 환경 세팅하기 크게 p5.js를 작성할 수 있는 방법은 두가지이다. 코드에디터에서 태그에 p5.js의 링크를 첨부하여 사용하는 방법. 그리고 p5.js에서 제공하는 에디터 사용하기. 에디터는 p5.js 공식 홈페이지에 들어가면 사용이 가능하다. https://p5js.org/ko/ home |..

챕터 5의 두번째 분량이다. 여기까지의 내용이 마지막 강의 내용이다. 강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다. https://class101.net/ko CLASS101+ | 세상의 모든 클래스를 하나의 구독으로 2700개 이상의 클래스로 일러스트, 공예, 코딩, 부업, 주식까지 세상의 모든 분야를 배워보세요. CLASS101에서 14일 무료 체험해 보세요. class101.net 챕터5. 한 걸음 더 나아가기 - 상호작용, 세부 위치 등 세세한 부분까지 생각하기 (Part2) 4강. inherit (상속), initial, unset (1) 상속 (Inheritance) 상속(Inhertiance)이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미..

마지막 5챕터의 내용들이다. 분량이 많아 2편으로 나누지 않을까 싶다. 강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다. https://class101.net/ko CLASS101+ | 세상의 모든 클래스를 하나의 구독으로 2700개 이상의 클래스로 일러스트, 공예, 코딩, 부업, 주식까지 세상의 모든 분야를 배워보세요. CLASS101에서 14일 무료 체험해 보세요. class101.net 5챕터. 한 걸음 더 나아가기 - 상호작용, 세부 위치 등 세세한 부분까지 생각하기 1강. 선택자 2편, 특성 선택자와 결합자 (1) 선택자 선택자란 어떤 요소에 스타일을 적용할 것인지에 대한 정보. (2) 선택자의 종류 기본 선택자 => (1)편에서 다룬 내용 그룹 선택자 => (2..

4챕터 flexbox에 관한 내용이다. 강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다. https://class101.net/ko CLASS101+ | 세상의 모든 클래스를 하나의 구독으로 2700개 이상의 클래스로 일러스트, 공예, 코딩, 부업, 주식까지 세상의 모든 분야를 배워보세요. CLASS101에서 14일 무료 체험해 보세요. class101.net 챕터 4. flexbox - flexbox 속성 활용하기 1강. flexbox 1편, 정의 및 사용 방법 (1) flexbox flexbox란 flex박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. 1차원 레이아웃 모델이란? flexbox를 1차원 모델이라 부르는 이유는, 레이아..

챕터3의 주제는 위치 정하기 float과 position이다. 강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다. https://class101.net/ko CLASS101+ | 세상의 모든 클래스를 하나의 구독으로 2700개 이상의 클래스로 일러스트, 공예, 코딩, 부업, 주식까지 세상의 모든 분야를 배워보세요. CLASS101에서 14일 무료 체험해 보세요. class101.net 챕터3. 위치 정하기 - float과 position 1강. float 그리고 clear (1) float float 속성은 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치 되도록 한다. 문서의 일반적인 흐름이란 무엇일까? 흔히 웹브러우저에서 렌..

챕터 2의 중반부터는 박스모델 관련 내용이 주를 이룬다. 중요한 부분이라고도 말씀하시고 자료를 다시 자주 찾게 될 것 같아 따로 박스모델 부분만 모아 작성해본다. 강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다. https://class101.net/ko CLASS101+ | 세상의 모든 클래스를 하나의 구독으로 2700개 이상의 클래스로 일러스트, 공예, 코딩, 부업, 주식까지 세상의 모든 분야를 배워보세요. CLASS101에서 14일 무료 체험해 보세요. class101.net 챕터2. 텍스트와 박스 모델 - 텍스트, 여백 그리고 배경까지 3강. 박스모델 1편, 박스모델 소개 (1) 박스모델 (Box-Model) 브라우저가 렌더링 할 때 모든 요소들은 기본적으로 사각형..