본문 바로가기

전체 글

포트폴리오 제작 포트폴리오는 메인 페이지, About me, Skill, Project, 푸터로 구성되어 있습니다. 개인정보는 검열하였습니다. 메인페이지 메인 페이지 구성 입니다.버튼메인 멘트About me자격증교육과정메인에서 GitHub 또는 Vlog에 마우스가 hover되면 체크표시가 생깁니다. /*자기소개 버튼들*/.buttons {  position: absolute;  top: 3em;  display: flex;  gap: 30px;  z-index: 1000;}/* 버튼 스타일 */.buttons button {  padding: 10px;  font-size: 1em;  color: #000;  border: none;  cursor: pointer;  transition: background-color .. 더보기
포트폴리오 기획 & 제작 일지 개발자를 시작하려는 저를 소개하기 위해, 포트폴리오를 제작하게 되었습니다.  다른 사람의 포트폴리오를 밴치마킹해서 참고를 했지만, 다들 화려한 라이브러리와 멋있는 디자인을 사용해서저는 포트폴리오를 심플하면서 깔끔한 1차 포트폴리오를 만들어 보겠습니다.  사용한 라이브러리  fullPage.js fullPage를 사용해서 스크롤 한번 할 때마다 한 영역씩 이동하려고 했으나, 스크롤 마다 이벤트를 주는게 더 나아 보여서 캔슬했습니다.   AOS fullPage를 사용하는 것 보다 AOS를 사용하여 페이지 요소 마다 애니메이션을 주는게 더 시각적으로 재밌어 보여서 AOS를 사용하였습니다.       색상 팔레트  색상은 많이 사용하지 않을 것이다. 애초에 포트폴리오를 심플하면서 깔끔한 포트폴리오를 만들 예정이.. 더보기
TypeScript로 HTML 조작하기 TypeScript로 Html 조작 가능하다. document.getElementById()를 TS에서 어떻게 쓰는지 알아보자  1. html을 준비   2. Null을 더욱 세세하게 잡아주는 strict 추가  이제 TS를 이용해서 HTML 조작을 해보겠습니다. .TS 조작하기   안의 글자를 TS로 바꿔보자 let 제목 = document.querySelector("#title"); //Selector로 title찾기 ts는 애매한 변수보다 확정적인 타입을 좋아한다. 제목은 null일 수 있습니다.  HTML 조작시 narrowing하는 방법 5가지!   narrowing이란?)  TypeScript에서 값의 타입을 좁혀가는 과정을 말합니다. 이는 Union 타입이나 any와 같은 포괄적인 타입에서 .. 더보기
타입스크립트(TypeScript) 핵심 9가지 문법 공부하기 😀 타입스크립트 = 자바스크립트 대용품같은 언어이다. 완전 다른건 아니고 JS문법을 응용하는 느낌이다. (타입부분을 업그레이드한 JS 업그레이드 버전이다)  기존 JS의 자유도 높은 코드는 프로젝트의 안좋은 부분을 끼칠 수 있음     타입스크립트는 에러 표시도 JS보다 확실하게 집어줌.   1. node.js 다운2. npm install -g typescript 로 타입스크립트 다운로드 .ts 로 끝나는 파일은 타입 스크립트로 인식함.  코드 작성 후 시작! 하지만 .ts파일은 브라우저가 읽을 수 없으므로 .js로 변환해야 사용가능하다  터미널에 tsc -w를 입력하면 바로 변환 가능하지만  오류가 발생한다.  보니까 PowerShell을 관리자로 실행한 후 스트립트를 허용하게 바꿔줘야될거 같음 1. 파.. 더보기
컴퓨터 정보 보안 - 1주차 공부 1960 ~ 1970년대 - 마이크로소프트 설립 : 1974년 MITS라는 회사가 세계 최초로 조립식 개인용 컴퓨터 엘테어 8800를 만들어 판매 애플 컴퓨터의 탄생 - 1979년 애플 컴퓨터가 스티브 워즈니악과 스티브 잡스의 손에 탄생 정보 권리 논쟁의 시작(1980 ~ 1990년대) -1981년 독일의 전설적인 해커 그룹인 카오스 컴퓨터 클럽(CCC)이 결성 -카오스 컴퓨터 클럽은 자유로운 접근 권리를 공식적으로 주장 ★★★정보 권리 논쟁의 웹사이트 유형은? - ccc사이트   ★ ★  해커선언문 ★ ★ 1980 ~ 1990년대 해킹 문화의 등장 1983년에 개봉된 영화 은 해커를 소재로 한 최초의 영화 1980년대에 해킹이 발전하면서 역사적으로 유명한 해커들이 본격적으로 등장 ★ 해커선언문 : 로이.. 더보기
컴퓨터비전(computer vision) - 6주차 perspectiveTransform -> dst입력 벡터들에 대해서 투영(perspective, 원근) 변환 m을 수행함. gemm -> dst일반화된 행렬 곱셈을 수행함(행렬의 내적을 구함 -> 물체 회전과 같은 변환에 사용)  np.dot()함수로도 행렬의 내적 계산 가능함. 열(row) 세로 , 행 (coulmn) 가로   m x n , n x k / m x k 결과 (곱셈 앞의 열과 뒤의 행이 같아야 함)3 x 2 * 2 x 3 = 3 x 3가운데 2는 사라짐.  T는 열을 행으로 바꾸는? 거여서 I행처럼됨. 그리고 m x n 과 n x k를 실행해서1 x 1 +１x4 = 5 ... 이렇게 되는거임  반지름과 호의 길이가 같은 각도 = 1라디안각도(theta) = 원호 / 반지름1도 = 파이/1.. 더보기
컴퓨터 비전(computervision) - 5주차(파이썬 연산 내용) 학교에서 기본적으로 카메라의 얼굴 영상은 사용자의 실제화면과 좌우가 바뀐 영상이다.  OpenCV에서는 배열을 옵션에 따라 여러 방향 뒤집음 배열 자체를 처리하는 함수를 제공함. Cv2.flip(src, flipCode[, dst]) -> dst입력된 2차원 배열을 수직, 수평, 양축으로 뒤집을 수 있다. Repeat : 입력 배열의 반복된 복사본으로 출력 배열을 채움Src, dst 입력배열, 출력 배열Ny, nx 수직방향, 수평방향 반복 횟수 Transpose : 전치 행렬을 만듦.   이렇게 2행 4열을4행 2열 전치 행렬로 바꿀 수 있다. A > A의 T승처럼 T를 붙이면 전치 행렬이 된다.  OpenCV에는 RGB를 BGR로 바꾸는데Merge와 split을 사용해서 채널을 합치거나, 분리 할 수 .. 더보기
컴퓨터 비전(computer vision) - 4주차 셤 공부 영상파일 처리 – 한글이나 공백에 의한 경로 인식 문제 주의! : 영상파일을 읽어 들여 행렬에 저장하고, 행렬 연산 과정에서 행렬의 원소, 즉 화소값들이 표시된 영상을 필요할 때마다 눈으로 직접 확인할 수 있어야 함.  cv2.imread(filename[, flags]) -> retval 읽어들이는 함수 >지정한 영상파일로부터 영상을 적재한 후, 행렬로 반환함>  imread - read 읽어들이는 함수..  filename - 적재할 영상파일 이름flags - 적재한 영상을 행렬로 반환될 때 컬러 타입을 결정하는 상수  cv2.imwrite(filename, img [,params]) -> retval img - 행렬을 지정한 영상파일로 저장함filename - 적재할 영상파일 이름, 확장명에 따라 .. 더보기

티스토리툴바