본문 바로가기

전체 글135

JavaScript 시작 들어가며 처음에는 책에 있는 자바스크립트를 공부하며 블로그를 업로드 하려 했는데 기초적인 프로그래밍 방법밖에 나오지 않아 파이썬 카테고리에 있는 글과 너무 많이 겹쳤다. 그래서 자바스크립트 카테고리에 있는 글은 내가 스스로 써보려고 하며 주로 실습을 위주로 코드를 업로드 할 예정이다. 물론 책으로 얻는 이론도 충분히 중요하다고 생각하지만, 최근 블로그에 업로드 한 태양계와 친구가 만든 게시판의 프론트를 건드려보며 경험으로 얻는 지식이 정말 중요하다고 느꼈다. 언젠가 내가 구글에 다 오픈소스로 있는데 뭐하러 힘들게 다 직접 하지? 라는 생각을 한 적 있었다. 그런데 직접 하지 않으면 그 코드가 어떻게 작동하는지 잊는 경우가 태반이고, 같은 알고리즘이라도 결과의 형태가 바뀌면 쉽게 인지하지 못하는 경우도 많.. 2023. 1. 4.
트랜지션과 애니메이션 속성 모음 최근 시험기간이기도 하고 학교 공부에 집중하다보니 블로그에 너무 소홀했던 것 같다. 처음에는 별로 나에게 도움이 되지 않을 줄 알았었던 과목도 이번 단원을 통해 다시 한 번 되짚어볼 수 있었고, 아는 내용이 나와 신기하기도 했었다. css 함수 중 rotate()와 skew()함수는 모두 학교에서 배운 Homogeneous Transformation 과 연관이 있었고, 평소같았으면 그냥 함수의 사용법만 알고 넘어갔을 단원도 그 함수가 어떻게 작동하는지와 같은 비교적 깊은 생각도 할 수 있었다. 트랜스 폼(transform) : 요소의 형태를 변형하거나 위치를 변경하는 것 사용법 : transform: 변형함수 2차원 변형함수 translate(tx,ty) : 지정한 크기만큼 x축 y축으로 이동 trans.. 2022. 12. 18.
C#을 이용한 태양계 시뮬레이션 만들기 최근 학교 공부에 집중 하느라 블로그에 신경을 많이 쓰지 못했다. 그래도 학교 공부를 하며 수학적 지식도 많이 얻을 수 있었고, 전보다 많이 성장하고 있음을 체감했다. 이번에 만든 태양계 시뮬레이션은 원래는 학교 발표 과제로 만들었지만, 하면서 배운점도 많고 책만 보며 이론을 익히는게 아닌 스스로 경험하며 지식을 얻은것 같아 뿌듯했다. 하드웨어 부분은 Bingle 로봇을 이용해서 태양계를 구성했는데 실행영상이 없으므로 이런 기능이 있다고만 생각하면 좋을 것 같다. 미리보기 소스코드 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using Sy.. 2022. 12. 13.
CSS 고급선택자 (속성 선택자) 속성 선택자의 기본 개념은 해당 속성이 있는 요소를 선택하는 것이다. 예를 들어 a 태그 여러개를 만들어 여러 속성을 부여했는데 그중에 text-decoration이 none인 속성을 가진 것들을 선택하고 싶을 때 사용할 수 있다. 속성선택자 사용법은 대괄호 안에 원하는 속성을 입력해서 사용한다. a[href] { color : #fff; } 다음 코드는 a태그중에 링크가 있는 요소만 선택하는 코드이다. a 태그더라도 href가 없다면 선택되지 않는다. 특정 속성 선택자 특정 속성 선택자는 속성의 속성값까지 일치해야 선택하는 선택자이다. 사용법은 [ 속성 = 속성값 ] 이다. a [target = _blank]{ background: url(...) } 위 코드는 a태그의 target 속성이 _blank.. 2022. 11. 4.
CSS 고급 선택자 (연결 선택자) 선택자란 내가 어떤 요소에 css 효과를 넣을지 결정하는 방법이다. 사실 이번 단원은 딱히 특별하거나 신기한 효과를 배우지 않아 대충 공부하고 다음 단원으로 넘어갔다가 T스토리 클론 코딩을 하며 이 단원의 중요성을 알게되었다. 많은 요소중에 내가 원하는 요소만을 선택한다는게 처음에는 쉽다고 생각할 수 있겠지만, 생각처럼 내 맘처럼 되지않아 고생해본 후에 공부하니 한결 이해가 빨랐다. 개념 css는 부모와 자식 요소가 존재한다. 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 하며 한 단계 아래인 요소를 자식 그 아래를 손자로 표현한다. 또한 같은 위치에 있는 요소를 형제 요소라고 하고 형제요소중 먼저 나온 요소를 형, 나중에 나온 요소를 동생으로 표현한다. 다음은 이해를 돕기 위한 코드이다. .. 2022. 11. 3.
(numpy) 배열의 분할 배열의 분할도 배열의 결합과 마찬가지로 나누고자 하는 축을 지정해주어야 한다. 축을 지정해주지 않으면 기본값인 axis=0으로 들어가며 나누고자 하는 값이 나누어 떨어지지 않으면 오류가 발생한다. 예를들어 2행 3열짜리 배열을 행이 3개가 되도록 자른다면 오류가 나는 것 처럼 나누는 수와 축은 나누었을 때 나누어 떨어지는 관계여야 한다. np.split (arr,x,axis) 배열을 분할하는 함수이며 'arr배열을 x개로 axis를 축으로 나눈다'라는 뜻이다. 예시) import numpy as np x = np.array([[1,2,3],[4,5,6]]) print(np.split(x, 3, axis = 1)) >>> [array([[1], [4]]), array([[2], [5]]), array([[.. 2022. 10. 20.
(numpy) 배열의 결합 배열을 결합하기위해서는 특정한 조건이 필요하다. 예를 들어서 행으로 결합한다면 (가로로 붙힌다면) 배열의 세로(행)의 사이즈가 맞아야 한다. 반대로 열로 결합한다면 (세로로 붙힌다면) 당연히 가로 길이가 맞아야 할 것이다. 행으로 결합하기 위해 두 배열을 붙히는데 위의 배열은 세로 길이가 맞아 잘 결합되었지만, 아래 두 배열은 세로 길이가 맞질 않아 결합이 되지 않는다. 따라서 배열을 결합하기 위해선 행/열의 길이를 맞추어야 한다. np.concatenate((arr_1,arr_2),axis = ) arr_1 와 arr_2 두 배열을 합칠 때 사용한다. axis는 축을 의미하는데 0을 넣으면 열로 결합하기 때문에 (아래로 결합) 열의 크기를 맞추어야 하고 1은 가로로 결합한다는 의미이다. 예시) impo.. 2022. 10. 20.
(numpy) random과 관련된 함수 np.random.normal (x, y, z) 범위안의 값을 랜덤으로 생성한다, 이 때 매개변수의 의미는 x: 범위의 시작값, y : 범위의 끝 값, z : 요소의 개수 이다. 예시) import numpy as np a = np.random(np.random.normal(1, 10, 3) print(a) >>> [14.03268414 -5.36156989 7.73318699] np.random.randint (x, y, size) 범위안에 있는 정수 값을 랜덤으로 지정된 배열의 크기만큼 생성한다. 이 때 x와 y값은 범위의 시작과 끝값이며 size는 array의 크기를 의미한다. 예시) import numpy as np a = np.random.randint(5,10,size = (2,4)) prin.. 2022. 10. 20.
(numpy) 특정 값으로 배열 생성 (np.zeros, np.ones, np.empty, np.full) 배열을 생성 할 때 배열 전체에 특정 값을 주어야 한다거나 True와 False 등 추가적인 조건이 붙을 수 있다. 이럴 때를 대비하여 배열을 생성할 때 미리 값을 지정해 주는 함수가 있다. 먼저 0과 1로 이루어진 배열을 생성하는 함수에 대해 써 보려한다. np.zeros (x,y,z) 0으로 이루어진 y행 z열을 가진 array를 생성한다. 0은 False를 뜻하기 때문에 bool 형식에서도 자주 쓰인다. 이 때 x는 z축으로 나열되어 있는 배열을 뜻하며 그림은 다음과 같다. 위 그림은 3행 3열짜리 배열이 2개 있으므로 np.zeros(2,3,3)으로 나타낼 수 있다. 매개변수가 1개이기 때문에 괄호로 묶어줘야함 예시) import numpy as np a = np.zeros ((2, 3, 3)) .. 2022. 10. 20.

티스토리툴바