Kwangkki

1년 회고 사실 잘 기억나지 않는다. 나의 1년이, 어떻게 지나갔는지. 원래 나쁜 기억이 더 오래 남는 법이니 막연히 좋았던 해였구나 싶다. 살아오면서 딱히 지난 1년을 되돌아본 적이 없다. 주변 개발자들이 회고 블로그를 남기니 따라해볼 뿐. 일기 같으면서도 자신의 성장 포인트나 가능성 같은 것에 대해 정리하는 것을 보니 좋은 생각이다 싶었다. 무작정 따라해보는 것이지만 의미 있는 글이 될 것 같다. 1년 회고, let's start! 앱 개발로 직무 전환 마로마브에는 2020년 마케터로 입사했다. 별별 일을 다 도맡았다. 상품 기획 및 생산, 해외 구매, 스토어 관리 및 배송/cs, 마케팅 조금. 뭐든 피하고 싶지 않았었다. 그러다 해보고 싶은 것이 생겼는데 바로 개발 업무였다. 맥북을 지르고 개발 스..

웹사이트 레퍼런스를 찾다보면 화려한 애니메이션이 난무하는 사이트를 볼 수 있다. 항상 저런 액티브한 사이트를 만들고 싶다는 생각을 했는데 이번에 배운 css 애니메이션 기능으로 어느 정도 구현 해볼 수 있을 것 같다. 근데 막상 많은 애니메이션을 구현하다보니 css파일이 엄청 길어진다 ㅠ css에서 애니메이션을 주는 방법은 2가지가 있다. 하나는 transition, 또 하나는 animation을 사용하는 방법이다. transition transition 단축 속성 트렌지션 사용방법은 간단하다. 아래는 트렌지션 단축 속성으로 순서대로 해당하는 속성을 입력하면 된다. /* transition: property duration timing-function delay */ .info { transition: ..

css에서 background는 배경을 설정하는 기능이다. 배경 컬러 지정, 그라데이션, 이미지 삽입 등 다양한 기능을 가지고 있다. backgorund css 설정 1. background-color 기본적으로 컬러를 설정할 수 있다. 웹브라우저 기본 216컬러 외에도 HEX코드, RGB로도 설정할 수 있다. background-color: #000000; background-color: rgb(255,255,255,0); background-color: green; 2. background-image 요소의 배경 이미지를 한개, 혹은 여러개로 지정한다. 여러개로 지정할 경우 가장 위에 선언한 이미지 레이어가 가장 위로 올라온다. 아래 예제와 같은 경우 이미지 파일이 가장 위로 표시된다. 이미지 외에 ..

CSS는 Cascading Style Sheet의 약자라는 것을 처음 알았다. 여기서 Cascading이란 '폭포' '위에서 아래로 흐르는' 등의 뜻이 있다. 이것이 무엇을 의미하냐면 수많은 css 선택자들 중 어떤 것이 가장 우선 선택자인지를 구분하는 기능을 의미한다. 예를 들면 동일한 태그 내의 class 선택자에 red color를 적용하고, id 선택자에는 blue color를 적용했을 때 id 선택자가 우선순위가 높기 때문에 blue 컬러가 적용된다. 캐스케이딩 우선순위 캐스케이딩 우선순위는 3가지에 의해 결정된다 1. 중요도 2. 구체성(명시도) 3. 선언 순서 그럼 각 개념별로 자세하게 알아보자. 중요도 중요도를 결정하는 요소 및 순서는 아래와 같다. 1. 인라인 스타일 css - 태그 내에..

강의에서 나온대로 git 커밋과 푸쉬를 진행해보았다. github 사용은 여전히 어려운 것..ㅠ 터미널로 깃허브 업로드한 순서 1. git init - 작업 폴더 내에 git 폴더 생성 2. git remote add origin (repository URL) - git github를 연결 3. git add . - git 폴더에 작업 내용 모두 추가 4. git commit -m '내 인생의 첫 잔디' - 확정 저장 및 코멘트 작성 5. git push origin master - origin 레포지토리의 master 브런치 작업 내용 업로드 여기까지 모두 입력하고 문제나 에러는 없었다! 근데 내 깃허브를 보니까 파일이 업로드 되어있지 않은 것 ㅠ README만 있고 push한 폴더나 파일이 없는 것 ..

부트캠프 2주차! 커리큘럼을 보니 지난주 프리캠프는 css, html, javascript의 기본을 고루고루 배웠다면 이번주는 CSS를 더 깊게 파고드는 한주가 될 것 같다. 이번 강의에서는 생산성을 높여주는 기능을 먼저 소개했다. 1. emmet(태그와 클래스명을 한번에 입력하는 기능) : 아래와 같이 입력하면 div태그 생성과 함께 클래스도 함께 생성된다. // div.wrapper__header 입력 시 2. 태그 한번에 생성하기 : 태그 뒤에 *n 숫자를 입력하면 원하는 숫자만큼 태그가 생성된다. //div*3 입력 시 총 3개의 div가 한번에 생성된다. 꿀팁 css 선택자 이번 강의에서는 선택자에 대해 배웠다. HTML 태그를 CSS파일로 가져와서 사용할 때 다양한 선택자를 활용할 수 있다. ..

이제 부트캠프를 시작한지 일주일이 다 지나간다. 5일 마지막 과제는 극악의 난이도를 자랑한다... 회원가입 인증창 만들기 1주차 파이널 과제, UI만 봤을 때 금방 끝날 줄 알았다. 실제로 HTML CSS로 UI 작업은 1시간 내로 끝났기에 더 자신감이 있었다. 하지만 문제는 기능 구현 ..! 구현해야할 기능 1. 지역선택하기는 서울, 인천, 경기 가능하도록 구현 2. '지역을 선택하세요'는 선택 불가능하도록 비활성화 3. 남성, 여성 성별 선택은 둘 중에 하나만 선택 가능하도록 구현 4. 휴대폰번호 입력칸에서 3자리 혹은 4자리 번호 입력 조건 만족시 다음칸으로 포커스 이동 5. 휴대폰 번호 모두 입력 시 '인증번호 전송' 버튼 활성화 6. '인증번호 전송' 버튼 클릭 시 6자리 수의 랜덤 토큰 생성 ..

블로그를 매일 쓰는 거는 정말 힘든 일... 그래도 힘내서 가보자구~! 오늘은 함수 기초에 대해 배웠고 정리해보겠다. 코딩 독학할 때 함수 이해가 정말 어려웠다. 특히 '=>' 이 녀석 function도 없고 ㅠ 정체성 뭐냐구~ 했는데 오늘 몇번 써보니까 이제 좀 친숙해졌다. 함수 자바스크립트에 함수를 만들 떄는 funciont을 써준다. funciont 함수이름(매개변수){ 명령문 } 여기까지는 좋다. 근데 함수를 만드는 방법이 2개가 더 있단다. // 1. 함수 선언식 function hello(name){ alert(name + "님 안녕하세요") } // 2. 함수 표현식 const hello = function(name){ alert(name + "님 안녕하세요") } // 3. 화살표 함수 c..

자바크스립트에서는 수학 연산을 해주는 아주 편리한 기능이있다. Math 함수에 내장된 기능들로는 정말 다양한 것들이 있다. Math.abs(x) 숫자의 절댓값을 반환합니다. Math.cos(x) (en-US) 숫자의 코사인 값을 반환합니다. Math.log2(x) 숫자의 밑이 2인 로그를 반환합니다. Math.pow(x, y) x의 y 제곱을 반환합니다. . . . 실제로 자주 쓰이는 것들을 요약하자면 다음과 같다. 위 6개 정도는 자주 쓰이는 기능들이다. 이 중에 랜덤함수를 가지고 실습을 해봤다. Math.floor(Math.random() * 1000000) // 430016 //string으로 형 변환 String(Math.floor(Math.random() * 1000000) ) // '48008..

부트 캠프 3일차, 블로그에 배운 것을 정리하다가 보니 메모장 정도로만 쓰인다는 생각이 들어 하루하후 배운 것에 대한 느낀점 혹은 배운점도 곁들여 쓸까 싶다. 오늘은 데이터 타입과 연산자, 조건문, 반복문, Math 함수, DOM 개념에 대해 가볍게 배웠다. 하나같이 중요하면서도 어려운 개념들이다. 이번 강의에서는 "이런 것들이 있다~" 정도로 배웠고 3주차에 자바스크립트에 대해 더 깊게 배운다고 한다. 그럼 오늘 배운 것들을 정리해보겠다. 데이터 타입 데이터 타입자바스크립트는 여러가지 데이터 타입을 가진다. 문자열 - String 숫자 - Number 참거짓 - Boolean 빈 데이터 - Null 할당하지 않은 데이터 - Undefined 객체 - Object 여기서 Null과 Undefined의 차..