본문 바로가기

Development/TIL9

[TIL] 2022-01-18 (input tag properties, arrow function) ▷ input tag properties import React, { useState } from "react"; function Problem(props) { return {props.text} ; } const GradingForm = (event) => { const [score, setScore] = useState(0) const answer1 = "아닌 밤중에 홍두깨"; const answer2 = "세살 버릇이 여든까지 간다"; const handleSubmit = (event) => { event.preventDefault(); let totalscore = 0 if (event.target.answer_one.value === answer1) totalscore += 50 if (even.. 2022. 1. 18.
[TIL] 2021-11-17 (find) ▷ find - 주어진 판별 함수를 만족하는 첫번째 값을 반환 - 없다면 undefined를 반환 const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found); // expected output: 12 - 객체와 함께 활용하는 방법 var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(.. 2021. 11. 18.
[TIL] 2021-11-14 (shift, pop, Object.values, Object.entries) ▷ shift() - 배열에서 첫번째 요소를 제거(배열의 길이가 바뀜) - 제거한 값을 반환 const array1 = [1, 2, 3]; const firstElement = array1.shift(); console.log(array1); // expected output: Array [2, 3] console.log(firstElement); // expected output: 1 ▷ pop() - shift와 유사, 마지막 요소를 제거한다는 점이 다름 const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; console.log(plants.pop()); // expected output: "tomato" console.lo.. 2021. 11. 14.
[TIL] 2021-09-10 1. div 안의 content를 정렬할 때 굳이 span 으로 감싸주지 않아도됨 2. CSS white-space ▷ 공백 문자를 처리하는 방법 https://developer.mozilla.org/ko/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. developer.mozilla.org 3. CSS border-collapse ▷ 표의 테두리(table border)이 겹쳐질 때, 그것을 분리할 지 상쇄할 지 설정 https://developer.mozilla.org/ko/docs/Web/CSS/border-collapse border-.. 2021. 9. 14.
[TIL] 2021-08-24 1. box-sizing: border-box; * { box-sizing: border-box; } ▷ 기본설정으로 사용하는 이유 : border-sizing의 기본값은 content-box인데, 이 때 padding과 border이 더해지면 내가 설정한 width를 초과하는 넓이가 되기 때문 2. margin:auto block level의 요소들은 자동적으로 오른쪽에 margin이 간다 예를 들어, block level인 list는 margin 이 오른쪽만 들어가게 됨 이 때 margin을 auto로 주면 중앙배치가 가능 /* 위 아래 여백이 0 이고, 가로 중앙배치 하고 싶을 때 */ header { margin: 0 auto; } 3. border, outline button input { bo.. 2021. 8. 26.
[TIL] 2021-08-04 1. 클론코딩을 할 때, 정적으로 만들어보고 그 다음에 동적으로 전환하기 2. 만들기 전에 큰 지도를 그리듯 머리에 한 번 그려보고, 세세하게 디테일을 수정하기. 노래들으면서 별 생각없이 코드를 짜다가는 나중에 수정이 어려워짐 3. 변수명을 더 직관적으로 짓기 위해 노력할 것. 지금은 너무 자주 바꿈. 2021. 8. 5.
[TIL] 2021-08-02 1. 으로 을 감싸야 하는 이유: 유효성 검사를 하기 위해서 ▷ 유효성(validation) 검사란? 입력한 데이터 값을 서버에 전송하기 전에 특정 규칙에 맞게 입력되었는지 확인하는 것. 필수요소를 빼먹거나, 비밀번호 등의 정보를 잘못 입력할 경우 사용자에게 오류가 있음을 알려준다. 으로 감싸지 않을 경우, Enter키를 눌러도 submit이 되지 않을 수 있다. 그 이유는 을 과 연관시키지 못하고 별도의 독립적인 요소로 보기 때문. 2. submit 이벤트 Note that the submit event fires on the element itself, and not on any or inside it. // HTML username // Javscript registerForm.addEventLis.. 2021. 8. 3.
[TIL] 2021-07-31 1. flexbox가 아닌 text-align 속성을 이용해서 요소를 정렬할 수 있다. 현대 브라우저에서 어떤 요소를 중앙에 배치하려면 display: flex; justify-content (en-US): center;를 사용하면 됩니다. 하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 margin: 0 auto;를 대신 사용하세요. (출처: MDN) body { text-align: center } 2. margin: auto; 브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있다. (엘리코딩 실습5에서 사용) +) margin 값으로 %(percentage)도 사용가능. 3. flex와 .. 2021. 8. 1.
[TIL] 2021-07-30 1. 어떤 요소의 위치를 변경할 때, padding값을 주는 것 말고 transform을 사용하면 반응형으로 만들 수 있음 .cursor { transform: translate(-50%, -50%) } - translate 속성을 이용해 element의 반절만큼 이동하게 함 2. inline, inline-block, block의 차이 ▷ inline: 사용자가 지정하는 box의 값을 무시하고 content 자체의 크기로 CSS가 설정됨 ▷ inline-block: inline처럼 한 줄에 나타나지만 지정된 box의 크기도 설정됨 (inline과 block의 속성을 모두 가지고 있음) ▷ block: 한 줄에 하나 3. CSS position https://betterme.tistory.com/11 4.. 2021. 7. 30.

티스토리툴바