본문 바로가기

분류 전체보기

(64)
(Javascript) 코딩 테스트 전 정리, 자바스크립트 표준 내장 객체 - 배열, 순회 매서드 편 순회 매서드 순회 매서드는 주어진 배열을 순회하며 모든 값을 가져오며, 반복문과 비슷한 역할을 함. 배열 메서드는 콜백 함수를 인수로 받으며, 배열의 각 요소에 따라 콜백함수는 한번만 호출된다. method(callbackFn, thisArg) 여기서 callbackFn은 세 개의 인수를 받음 element : 배열에서 현재 처리 중인 요소 index : 배열에서 현재 처리 중인 요소의 인덱스 array : 메서드가 호출된 배열 순회 메서드 종류 forEach() 각 배열 요소에 대해 제공된 함수를 한 번씩 실행, 반환값 없음. const array1 = ['a', 'b', 'c']; array1.forEach((element, index) => console.log(index, element)); //..
(Javascript) 코딩 테스트 전 정리, 자바스크립트 표준 내장 객체 - 배열 편 reduce() 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결괏값을 반환 //구문 arr.reduce(callback[, initialValue]) //예시 const array = [1, 2, 3, 4]; const result1 = array.reduce((total, e)=> total+e, 0); const result2 = array.reduce((total, e)=> total+e, 100); console.log(result1); //10 console.log(result2); //110 indexOf() 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환 //구문 indexOf(searchElement, f..
(Javascript) 코딩 테스트 전 정리, 자바스크립트 표준 내장 객체 - 문자열 편 Split (string) String 객체를 separator로 여러 개의 문자열로 나눔 separator(선택) : 원본 문자열을 끊어야 할 부분을 나타내는 문자열 limit(선택) : 끊어진 문자열의 최대 개수를 나타내는 정수 //구문 split(); split(separator); split(separator, limit); //예시 let str = "I like pie" console.log(str.split(' ')); //Array ["I", "like", "pie"] console.log(str.split('')); //Array ["I", " ", "l", "i", "k", "e", " ", "p", "i", "e"] console.log(str1.split(' ', 2)); //Arr..
(CSS) flexbox 1탄 : justify-content, align-items, flex-direction, flex-wrap 사용법 css로 태그 크기를 이리저리 조정하다 보면 불편한 점을 금방 발견하게 된다. 컴퓨터를 기준으로 height와 weight를 설정해서 디자인하면, 모바일에서 볼 때 디자인이 이상해지는 경우가 있다.  따라서 모든 해상도에서 웹이 잘 보여주기 위해서는 반응형으로 디자인을 하는 게 좋다. 이때 사용하면 좋은 것이 display: flex; 이다.   flex 사용 방법자식 앨리먼트에 flex를 적용하고 싶으면 부모 앨리먼트를 flex container로 만들어야 한다. 즉 아래 html에서 span 태그에 flex를 적용하고 싶으면 자식인 fruit-basket__apple이 아닌 부모인 fruit-basket에 flex를 적용해야 한다는 것이다. apple banana.fruit-basket{ dis..
id와 class의 차이점과 사용방법 앞서 html 태그는 아래와 같은 구조로 구성되어 있다고 언급한 적 있다.  content   오픈 태그 안에는 속성(attribute)을 추가할 수 있다. 속성이란 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값이다.이번 포스팅에서는 속성 종류 중 하나인 id와 class를 설명한다. 만약 속성의 종류에 뭐가 있는지 궁금하고, 어떻게 사용하는지 궁금하면 아래 사이트에 자세히 나와있다. HTML 특성 참고서 - HTML: Hypertext Markup Language | MDNHTML의 요소들은 특성을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.developer.moz..
HTML block태그, inline태그 차이 html 태그는 크게 block 태그, inline 태그으로 나뉜다. block 태그 block 태그 종류 : h1~h6, div, ol, ul, li, p, form 등 block태그는 옆에 뭐가 오지 않는다. 자동으로 줄바꿈이 된다는 뜻이다. block 태그는 높이(hight)와 너비(width)를 지정할 수 있으며, 여백과 관련된 3가지 속성을 가진다. Margin : 경계(border) 바깥 공간 Border : 경계 Padding : 경계(border) 안쪽 공간 inline 태그 block 태그 종류 : a, b, img, input, strong, span, br, button 등 inline태그는 줄바꿈이 되지 않는다. 그래서 inline 태그들은 여러개 작성해도 같은 라인에 출력된다. i..
HTML 기본 구조 여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요 : 문서 형식 선언 문서의 내용이 시작되기 전에 해당 문서가 어떤 마크업 언어 형식으로 작성되었는지를 명시하는 태그 !DOCTYPE 뒤에 html을 적은 것은 이 문서가 html로 작성되었다고 알리는 것 : 인코딩 파일과 웹 브라우저의 인코딩 방식을 통일해 깨짐을 방지하는 태그 : 문서 정보 전달 브라우저에게 문서의 정보를 전달하는 태그. 웹 브라우저 화면에 표시될 콘텐츠를 나타내는 것은 아니지만, 웹페이지의 품질에 영향을 주는 중요한 정보들. 중요 : head 에 넣는 정보는 웹상에 보이지 않는다 : 문서 제목 여기에 입력한 제목은 웹 브라우저의 탭 메뉴에 표시된다. : 화면에 표시되는 콘텐츠 웹 브라우저 화면에 표시될 콘텐츠를 입력하는 태그 중요 ..
HTML, CSS이란? HTML (Hyper Text Markup Language) 웹 페이지를 만드는 컴퓨터 언어 Hyper Text : 문서 내부에 다른 문서로 연결되는 참조를 넣어 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 링크를 통해 한 페이지에서 다른 페이지로 뛰어넘는 비순차적 접근법을 표현함 Markup Language : 문서를 구조적으로 표현해내는 언어 HTML은 마크업 언어를 통해서 정보를 본문, 제목, 주소 등으로 구조적으로 표현 가능 브라우저는 HTML을 읽어들이고 그것을 표시에 우리에게 보여줌 정보는 태그(Tag)를 통해 표현됨. 태그는 꼬리표를 뜻하며 정보를 구조적으로 나누는 역할을 함 태그의 구조는 기본적으로 content 첫번째 태그를 통해 시작을 알리고 /가 포함된 태그를 통해 끝을 알림..