진주의 개발괴발

🤔모르는 게 뭔지 인식하자 unit7은 그동안 배웠던 지식을 총집합시키는 기분이었다. 강의를 보면서 문제를 푸는데 전혀 알 수가 없었다. 설명이 의도적으로 많이 빠져있어서 혼자서 낑낑대면서 알아내야 했다. 이것저것 건드려보기도 하고 이건가 하고 적었다가 이해를 하기도 했다. 딱 파일을 열었을 땐 너무 막막했다. 이게 내가 배웠던 게 맞나...? querySelector 는 뭐고 event는 뭐고... 😵 Document.querySelector(selector) : 문서에서 ()안의 선택자와 일치하는 첫번째 요소를 반환한다. 알고보니까 운도님께서 한번 보여주신 적 있던 녀석이었다. 이게 복습의 중요성이군아 ㅠㅠ😥 우선 모르는 게 뭔지 알기 위해 천천히 코드를 읽어내려갔다. 위에 선언문은 복잡하니까 패스하..

Number : 문자열 숫자로 강제 변환 형변환 되지 않으면 NaN 반환 Number('123') // 123 Number('+456') // 456 Number('-1.1') // -1.1 Number('08') //8 Number('1e10') //10000000000 (16진법) Number(null) // 0 Number('') // 0 Number('1000won') // NaN Number('happy') // NaN 숫자가 아닌 문자가 들어가면 인식하지 못하고 NaN을 반환한다. parseFloat : 문자열을 숫자로 파싱하는 것 : 부동 소수점 숫자 반환 :공백이 아닌 첫 문자를 숫자로 변환할 수 없는 경우 NaN 반환 parseFloat('+421') // 421 parseFloat('-..

🤡첫 목업 2022.10.26 수요일 예습을 하다가 처음으로 목업을 만들게 되었다. 우선 와이어프레임부터 Figma를 이용해서 그려보았다. 와이어프레임이라고 하기엔 전부 면이긴 하지만... 어쨌던 각 요소의 이름을 적어두었다. 나중에 만들면서 추가된 부분도 있지만 확실히 와이어프레임이 있는게 더 편리하고 정돈되는 느낌이다. 그렇게 만들어진 요상한 목업 만들면서 너무 신기했었다. 내가 색을 넣는대로 바뀌어서 기분이 좋았던 😁 👻그림자 목업 2022.10.28 금요일 이전 목업은 과제로 제출하기에 모자라다는 생각이 들어서 다시 만들었다. 이번에는 전에 만든 계산기와 거의 모양이 흡사하여 같은 와이어프레임을 사용했다. 그림자로 3D효과를 내고 싶었는데 실패했다. CSS 그림자 예시 사이트 이 사이트로 공부를 ..

💡레이아웃 📌와이어프레임 : 웹을 만들기 전 각 요소의 배치를 미리 그려두는 것 와이어프레임 만으로도 어떤 목적의 웹인지 알 수 있어야 함 📌화면 나누는 방법 (1) 수직분할 : 요소들이 가로로 배치된다 (2) 수평분할 : 요소들이 세로로 배치된다 height 속성 추가하면 직관적인 분할 가능 초기화 * { margin: 0; padding: 0; box-sizing: boader-box; } 💡flexbox 📌부모 속성에 적용 display : flex; flex-direction : colunm , row, colunm-reverse, row-reverse : 어떤 방식으로 자식 요소를 배치할 것 인지 flex-wrap : nowrap, wrap, wrap-reverse : 줄 바꿈 justify-c..

반복문 : for , while for(초기화, 조건, 증감문) 이 세 개의 조건은 전부 생략이 가능하지만, 반복문의 무한 반복을 탈출할 수 있는 장치가 필요하다. 💡return , continue, break 차이점 return : 함수에서 사용, 사용하는 즉시 함수 밖으로 주어진 값 반환 반복문에 사용했을 경우 : 반복문 끝남 continue : 반복문의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 다음 루프를 시작한다. let text = ''; for (let i = 0; i < 10; i++) { if (i === 3) { continue; } text = text + i; } console.log(text); // expected output: "012456789" 3만 ..

시작하고 나서 엄청 열심히 살았다. 정말 매일 일찍 일어나고, 산책도 맨날 하고! 공부는 당연히 매일 했다ㅋㅋㅋ 그러다가 목요일에 남자친구가 와서 거의 반나절을 놀게 됐다. 이게 시발점이 될 줄은... 누가 알았겠는가... 나는 그냥 놀고나서 개운하게 공부 시작하면 되겠다 싶었는데 왠걸 마음이 너무 무거웠다. 급 우울해지고... 나는 왜 이렇지... 이러면서 땅굴을 파게 되었다. 뭔가 스터디도 나만 제대로 못하는 것 같고... 목업도 하나밖에 못 만들었고 예습도 지금 못했는데... 복습도 당연히 못하고... 이런 부담감이 나를 옥죄어왔다. 근데 여기에 글로 쓰고 나니까 더 웃긴 건 해야할 건 다 하긴 했다는 거다ㅋㅋㅋㅋ 목업도 하나만 만들면 되는건데 내 성에 안차서 더 만들려고 했던거고 예습은 애초에 안..

💡CSS 기초 CSS : 스타일시트, 색맹이나 장애인에게 친화적인 UI를 만들 수 있다. 기본 구조 div(셀렉터){ background-color(속성명 : property): red (속성값 : value); } 💡CSS Property color : 색상코드 //글자 색을 바꿈 text-decoration : underline // 밑줄 text-weight : bold // 글자 굵게 : 숫자 // 글자 굵기 숫자로 정함, 900이 최대 background-color: 색상코드 // 배경 색 바꿈 CSS -> HTML 적용 방법 HTML에 작성하여 링크함 CSS에 스타일 따로 적용하는 이유 : 💡박스모델 margin [ boarder [ padding [content] ] ] 다양한 박스의 속성 ..

💡 html, css, javascript의 간단한 정의 html : 구조 css : 스타일 javascript : 상호작용 💡 html의 기본구조 📌tag : 부등호 로 감싸져 있음. 의 형식으로 닫는 것이 일반적이지만 self-closing tag도 있다. 📌self-closing tag : 의 형식으로 태그 사이에 아무것도 들어가지 않을 때 사용한다. img태그의 경우는 로 닫지 않아도 된다. 📌attribute (속성) : 태그 뒤에 붙어 기능을 제한하는 용어 📌와 의 차이점 : 구분할 때 사용하는 태그. margin 없음. : paragraph의 약자. 단락 구분할 때 사용되는 시멘틱요소. margin이 포함되어 있음. 📌와 의 차이점 : block 속성으로 한 줄 차지. : inline 속성으..

💡index 인덱스를 사용할 수 있다. let str = '안녕하세요' console.log(str[0]) // '안' let arr = ['의자','책상','소파'] console.log(arr[0]) // '의자' 인덱스를 이용한 메소드를 사용할 수 있다.( indexOf, slice 등) str.indexOf('안') // 0 arr.indexOf('의자') // 0 💡length 길이가 존재한다. let str = '안녕하세요' console.log(str.length) // 5 let arr = ['의자','책상','소파'] console.log(arr.length) // 3

💡 조건문 if else if else boolean 타입 falsey : 0 , undefined, null, false, NaN, '' (빈 문자열) 논리연산자 Not : ! (뒤에 오는 것의 true, false 뒤집음) And : 조건1 && 조건2 (두 조건 다 만족해야 true) Or : 조건1 || 조건2 (두 조건 중 하나만 만족해도 true) 💡 문자열 (1) let str = 'Hello, world' str[0] = ' '; 글자를 바꾸려고 해도 바꿔지지 않음. 아예 str 재할당해야 바꿀 수 있다. (2) string 타입과 다른 타입 사이에 + 연산자 사용 시 string 타입으로 변환 string 타입과 Number 타입에 비교연산자 사용 시 숫자로 변환 문자열 Method st..