바른소리

개인 프로젝트를 하던 도중 마음에 들지 않는 부분이 있었다. 버튼을 클릭하면 다양한 toolBtn들이 나오는데 이게 너무 딱딱하게 나타나니까 이쁘지 않았다. 그래서 나름 효과를 줘보겠다고 브러쉬버튼 클릭 시 trans 클래스를 추가하여 효과를 주도록 했는데 효과가 나타나지 않았다. 그러다가 찾은 한 블로그 글!! 참고) https://ssimplay.tistory.com/565 css에서 transition을 이용해서 부드러운 전환 효과를 넣어보자! css로도 약간의 애니메이션 효과를 넣을 수 있다는 사실 알고 계셨나요? transition을 이용하면 제이쿼리가 없어도 동적인 홈페이지를 만들 수 있답니다. 1. 예시 ① 사례 - 어떤 느낌인지 보여드리 ssimplay.tistory.com 글 설명 중에 ..

작은 개인 프로젝트를 하는 도중에 오류가 생겼다. 체크 버튼이 처음에는 안보이다가 체크버튼의 부모인 div를 클릭 시 주황색으로 나타나야하는 부분이 있었는데 hide 클래스를 주어서 체크 아이콘인 i태그를 숨기려해도 숨겨지지 않고 ,,,,,,,,,,,, icon_show 클래스로 체크 아이콘을 보여주려고 해도 보여지지 않았다 ㅠㅠ 개발자 분들에게 정보도 얻고 어려운 것들 물어보기 위해 들어가 있었던 프론트엔드 개발자 오픈채팅방에 1차로 여쭈어 보았는데 다른 곳에서 덮어씌워져서 그런거라고 하셨다. 처음 알게된 것 : css에 줄이 쳐진다 -> 다른게 덮어씌운 것이다. 아무튼 어제는 도대체 뭐가 덮어씌운것인가를 찾아보았는데 i태그 (체크 아이콘)을 https://fontawesome.com/icons/use..

안녕하세요 ! 몇주 전에 종강을 한 제로베이스 '프론트엔드 개발자 되기 완주반' 후기를 써보려고 합니다 ! 지극히 개인적인 의견이고 사람마다 느끼는 바는 다를 수 있으니 참고만 해주시면 감사할 것 같아요 ! - 수강 과목 : 프론트엔드 개발자되기 완주반 (현재는 수강과목에 없음) - 수강 기간 : 11/1 ~ 1/31 (최종 평가 마감일 기준) - 수강 방식 : 강의를 듣고 매주 퀴즈 + 과제 제출 -> 퀴즈와 과제 각각 정답률 50% 이상 달성 시 매주 환급 (수강 과목에 따라 환급금은 다름!) -> 최종 평가 정답률 70% 이상 달성 시 일부 금액 환급 (50,000원 이상 환급 시 제세 공과금 22% 떼고 지급) - 커리큘럼 1~5주 : HTML, CSS, SASS, 부트스트랩 -> 5주차 1차평가..

안녕하세요 ! 최근에 js를 재미있게 공부할 방법을 찾다가 전부터 익히 들어왔고 추천 받았던 노마드 코더를 수강하기 시작했는데요! 니꼬쌤 강의 저한테는 되게 재밌고 좋더라구요 ㅋㅋㅋㅋㅋ 말투도 넘 귀여우시고 수강생보다 더 js 기능에 대해서 막 흥분하시고 ...!!!!!ㅋㅋㅋㅋ 암튼 배웠던 것들 잊지 않기 위해서 코드 정리 , 만든 것을 정리해보기로 했어요! index.html index.html 에서 그림판의 모양을 잡아줍니다. 버튼의 경우 강의에는 fill과 save만 나오는데 저는 전체 삭제 기능을 넣어보고 싶어서 따로 clear를 추가했어요! app.js const canvas = document.getElementById("jsCanvas"); const ctx = canvas.getContex..

Class * class와 object 1. class - object(인스턴스)를 만들 수 있는 틀이다. - class 자체에는 data가 들어있지 않다. - 틀을 정의해서 한번만 선언한다. - class는 정의만 한 것이기 때문에 실제 메모리에 올라가지 않는다. 2. object - class를 이용해 data를 넣어 만드는 것이다. - class를 이용해 새로운 인스턴스를 생성하면 그게 바로 object이다. - object는 class를 이용해서 무수히 많이 만들 수 있다. - class를 이용해 만든 object는 실제 메모리에 올라간다. 1. class 선언과 object 생성 class Person { //constructor constructor(name, age) { //fields th..

Function - 프로그램 기본 구성 요소 - 여러번 재사용 가능 - 작업을 수행하거나 값을 계산 함수는 입력 -> 연산 -> 출력 의 과정을 가지고 있다. 프로그램은 여러개의 function들로 구성되어있고 function 하나하나를 sub program이라고도 부른다. 1. 함수 선언 function 이름 (파라미터) { body... return; } 하나의 함수는 하나의 이름만 허용하고 동사 형태로 이름을 지정한다. js에서 함수는 object이기 때문에 함수를 변수에 할당할 수도 있고 파라미터로 전달되어 함수를 return 할 수도 있다. 2. 파라미터 (매개 변수) - 값으로 전달 (primitive parameters) function changeName(obj) { obj.name = "..

- 연산 1. String concatenation (문자열 연결) // + 기호를 사용해서 문자와 문자를 연결시키거나 문자와 숫자를 연결시켜서 문자열로 만들 수도 있다. // 또한, ``을 이용해 템플릿 리터럴을 사용할 수도 있다. $ 를 이용하면 변수값을 계산해서 string으로 포함한다. // 리터럴의 장점은 줄바꿈을 하거나 중간에 특수기호 ' 등을 사용하여도 다 출력이 된다. console.log("my" + "cat"); console.log("1" + 2); console.log(`string literals: 1 + 2 = ${1 + 2}`); console.log(`ellie's book`); console.log("ellie's \nbook"); 2. 사칙 연산 console.log(1 ..

1. variable : 변수 : 변경될 수 있는 값 let : ES6에서 추가 let name = `ellie`; console.log(name); // > ellie name = `hello`; console.log(name); // > hello 2. Block scope let globalName = "global name"; //global 변수는 어플리케이션 시작부터 끝날 때까지 메모리에 있기 때문에 최소한으로 쓰는 것이 좋다. { let name = "ellie"; console.log(name); name = "hello"; console.log(name); } console.log(globalName); // global 변수이기 때문에 출력가능 > global name console.l..

script 삽입 시 async와 defer의 차이점 이해하기 - head 안에 삽입하기 1. 위에서부터 차례대로 파싱하다가 2. script태그를 만나면 잠시 파싱을 멈추고 main.js를 다운 받아서 실행한다. 3. 다시 파싱을 한다. - body 안에 삽입하기 1. html을 파싱해서 페이지가 준비를 마친 후, 2. script 를 서버에서 받아오고 실행한다. 단점) 사용자가 기본 html은 빨리 볼 수 있지만 만약 코드가 js에 의존적이라면 (js를 이용해서 데이터를 받아오는 방식) 정상적인 페이지를 보기까지 다소 시간이 걸린다. - head 안에서 async 사용하여 삽입하기 1. html 파싱하다가 script를 만나면 다운로드 하라고 명령해두고 계속 파싱을 한다. 2. 다운로드가 끝나면 파싱..