문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는 사람의 ..
문제 설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함수를 완성해주세요. 제한사항 5 ≤..
1. HTML 양식 작성 MS Visual Studio Code 에서 ! 만 누르면 아래에 자동으로 Emmet ~ 이 나옴. 이렇게 해서 HTML 코드를 빠르게 생성! 2. 태그 작성 div 누르고 tab 키 누르면 자동으로 태그가 생성됨 클래스는 . 아이디는 # 을 이용하면 자동으로 생성됨! 3. 부모, 자식, 형제 노드 div>ul>li 입력 후 tab 키 div>ul+ol 입력 후 tab 키(형제노드) 상위에 추가하고 싶을 경우: div>ul>li^ol: ol 태그를 ul 태그와 같이 입력하고 싶을때 ^ 이용. 4. 그룹화 하기 div>(header>ul>li2>a)+footer>p* 입력 후 tab 키 5. 텍스트 입력하기 p{hello} 입력시 hello 6. 자동 번호 넣기 p.class${i..
Material Theme Material Icon Theme Prettierctrl + shift + p > settings 검색 후> prettier quote 검색 > JavaScript › Preferences: Quote Style 을 Single 로 변경 윈도우에서는 ctrl + 를 이용해 설정함 ctrl + shift + p > settings 검색 후> prettier quote 검색 > JavaScript › Preferences: Quote Style 을 Single 로 변경 4. bracket pair colorizer: 괄호에 컬러감을 줌으로써 코드의 가독성을 높여줌. 5. indent rainbow: 들여쓰기 된 부분이 rainbow 되어 한눈에 알아보..
리액트는 기본적으로 Javascript 사용 업데이트 된 사항? 자동으로 UI 업데이트 코드 재활용을 많이 함 (JSX 문법: html +Javascript) repl.it.com ⇒ 온라인 코딩툴 폴더 구조: src 폴더 내 App.jsx: 웹사이트에 보일 내용 main.jsx: index.html 파일과 App.jsx를 연결해줌 기존 html 과 차이? → div 태그 안에 class 대신 className 으로 사용! state ① state 가 바뀌면 UI가 자동으로 업데이트 됨 import React**,{useState}** from 'react'; import './App.css'; function App() { let count = 0 **const [count2, setCount2] = ..
CSS(Cascading Style Sheet) Cascading 의 개념: 정의된 세부적인 정의가 있다면 그걸 사용하고, 정의되어 있는게 없다면 다음 기본으로 지정된 것으로 넘어가는 개념 Flexbox: box 와 item 들을 자유자재로 사용할 수 있게 해줌! 2가지만 이해하자 ① Flexbox는 container(box) 에 적용 될 수 있는 것과 각각의 item 에 적용될 수 속성들이 따로 존재한다. container 에 적용 할 수 있는 속성들: display: display: flex 라고 해야 flex box로 사용 가능! flex-direction: 기본값은 row(왼→ 오 로 감), row-reverse(오→왼), column( 위→아래), column-reverse(아래→위) flex-..
1. semantic Tags - 너무 div 태그만 사용하지 말고 아래처럼 의미있게 써보자!!! 2. vs : 블로그에서 포스트 1개, 신문기사에서 기사 1개 자체를 묶을때. 자체만으로 독립적으로 다른 페이지에 보여줬을 때 전혀 문제 없을 때 사용. =⇒ 메인 안에 있는 다른 내용들과 전혀 상관 없이, 독립적으로 고유한 정보를 나타낼 때 사용 : article 안에 서로 연관있는 내용들을 묶어 주고 싶을 때. 3. vs 화면 같으면 읽을때는 최애!! 를 강조하게 됨. 즉, : 시각적으로만 이탤릭 체로 변환됨. 별다른 의미 없음! (ex. 책의 제목, 인용구) : 강조하는 이탤릭채. 4. vs : 시각적으로만 볼드체. : 정말 중요한 볼드체! 5. vs vs : 순서가 중요함. : 순서가 없는 목록을 나..
1. : 요소의 정보나 설명을 지정 2. : 요소에 적용한 스타일(CSS) 지정 3. : 요소를 지칭하는 중복 가능한 이름 4. : 요소를 지칭하는 고유한 이름 5. : 요소에 데이터를 지정
요소 내용 내용 text: 사용자에게 일반 텍스트를 입력 받을 때 사용 checkbox: 사용자에게 체크 여부를 입력 받음 요소가 화면에 출력되는 특성: 인라인 요소, 블럭 요소 1. 인라인(Inline) 요소: 글자를 만들기 위한 요소들 a. span: 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 요소가 수평으로 쌓임. 포함한 콘텐츠 크기만큼 자동으로 줄어듬. ex1) Hello //width: 요소의 가로 너비를 지정하는 CSS 속성 ex2) Hello //height: 요소의 세로 너비를 지정하는 CSS 속성 ex3) Hello //margin: 요소의 외부 여백을 지정하는 CSS 속성 ex4) Hello //padding: 요소의 내부 여백을 지정하는 CSS 속성 인라인 요소(ex. s..
DOM API: 자바 스크립트에서 HTML 을 제어하는 여러 가지 명령어 Box!! let boxEl = document.querySelector('.box'); console.log(boxEl); // HTML 요소(Element) 1개 검색/찾기 const boxEl = document.querySelector('.box'); // HTML 요소에 적용할 수 있는 메소드 boxEl.addEventListener(); // 인수(Arguments)를 추가 가능 boxEl.addEventListener(1, 2); // 1 - 이벤트(Event, 상황) boxEl.addEventListener('click', 2); // 2 - 핸들러(Handler, 실행할 함수) boxEl.addEventListene..
