전체 글57 [HTML] inline-level elements and block-level elements inline요소 tag block요소 tag a div button h1,h2,h3,h4,h5,h6 i aside input article label footer span header strong section canvas nav svg main footer form li, ol, ul 2021. 9. 2. [Git] 유닉스 터미널 명령어 정리(손글씨) ▶︎ 출처: 엘리코딩 https://www.youtube.com/watch?v=EL6AQl-e3AQ 2021. 8. 31. [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. [JS] parameter, argument function printFruit(name, price) { console.log(name+"는 "+ price +"원 입니다."); } printFruit("banana", 2000); 1. 함수를 호출한다 2. 함수를 호출할 때, "banana"와 2000의 데이터를 printFruit함수로 전달한다 3. name과 price 라는 매개변수에 "banana"와 2000이 저장된다 4. 데이터가 채워진 값이 출력된다 ▷ argument(인수) - "banana", 2000 - 데이터를 넘겨준다 - javascript 내에서 사용하는 모든 data type을 다 사용할 수 있음 (array나 object도 가능) ▷ parameter(매개변수) - name, price - 함수를 선언하는 쪽에서, 넘겨.. 2021. 8. 13. [CS] 알고리즘과 데이터구조를 배워야 하는 이유 (Algorithm & Data Structure) ☑︎ 알고리즘을 언제 배우는 것이 좋을까? 코드를 최적화 할 때 or 나의 어플리케이션의 속도를 개선하고 싶을 때 즉, 더 빠르고 효율적인 코드를 작성하고 싶을 때 ▷ 알고리즘(Algorithm) - 어떤 일을 수행하기 위한 여러개의 지시사항들 - 내가 아침에 출근준비를 하는 루틴, 밤에 나이트케어를 하는 과정 모두 하나의 알고리즘이라고 할 수 있음 - 컴퓨터에 적용하면 어떤 액션을 수행하기 위해 컴퓨터가 수행하는 것 ex) 지도에서 최단거리를 찾는 알고리즘, 데이터를 암호화하는 알고리즘 -알고리즘을 잘 학습하면 질 좋은 프로그램을 만들 수 있음 ▷ 데이터 구조(Data Structure) - 어떤 개발 분야든, 산업이든 반드시 데이터를 다룸 - 데이터 구조는 이러한 데이터를 정리하는 것 - 작업에 대해.. 2021. 8. 9. [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. [JS] 윈도우 사이즈 표기 (window.screen / window.outer / window.inner / documentElement.clientWidth) ▷ window.screen - 모니터의 사이즈, 해상도 - 브라우저 바깥에 있는 영역까지 합함 - 콘솔창에 입력하면 다양한 property 값을 가진 object를 보여줌 ▷ window.outer (outerWidth, outerHeight) - 전체적인 브라우저의 사이즈 ▷ window.inner (innerWidth, innerHeight) - 페이지가 표기되는 부분 전체 - 스크롤바가 표기되는 것 포함 ▷ documentElement.clientWidth - 문서 전체를 의미 - 스크롤바를 제외한 순수 document의 크기 // 실사용 예시 documentElement.clientWidth = ${document.documentElement.clientWidth}, ${document.docu.. 2021. 7. 31. [JS] object에서 method를 작성하는 두 가지 방법 method: 객체의 속성 중에 동작(함수)인 것 method를 작성하는 방법 두 가지 ▷ 첫 번째 방법 // eat() 메소드를 활용한 예시 const pet = { eat: function (food) {} } pet.eat() const superEventHandler = { handleEnter: function() { h2.innerText = "The mouse is here!"; h2.style.color = colors[0]; } } h2.addEventListener("mouseenter", superEventHandler.handleEnter); ▷ 두 번째 방법 const pet = { eat(food) } pet.eat() const superEventHandler = { handl.. 2021. 7. 31. 이전 1 2 3 4 5 6 다음
