One more thinking

직무관련 테스트를 보다가 모르는 부분이 나와서 찾아보았습니다. HTML 요소 중 abbr, 자주가는 MDN 사이트를 찾아서 설명을 읽었는데 그간 읽어왔던 번역과는 다르게 엄청 자연스러운 한글로 작성되어 있습니다. 문서의 내용도 알차게 작성되어 있어 이 문서 한 페이지만으로도 abbr요소는 명확하게 알 수 있을 것 같습니다. 요소에 대해서만은 이 문서 참조는 추천하고 싶습니다. 데모 You can use CSS to style your HTML. 의미 준말 또는 머리글자를 나타냅니다. 특성 title 속성은 요소에서만 특정한 의미를 가지며, title 속성을 통해 전체 뜻이나 설명을 제공합니다. title은 준말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태의 값으로 가져야 합니다. 브라우저는 ..

기술이 된 상상 2021. 7. 1. 14:19

CSS에서 요소들의 배치 방법에 대해 정의합니다. position은 static(기본값), relative, absolute, fixed, sticky로 지정할 수 있습니다. static 기본값, normal flow대로 정의됩니다. top, bottom, left, right, z-index의 영향을 받지 않습니다. relative 엘레멘트가 normal flow로 정의되고 난 후, 자신을 기준으로 top, right, bottom, left 값에 적용을 받습니다. z-index도 적용 됩니다. absolute normal flow에 포함되지 않으며 레이아웃도 차지하지 않습니다. 자신의 조상 중 position 값이 relative, fixed, absolute로 설정된 엘레멘트를 기준으로 top, r..

기술이 된 상상 2021. 4. 26. 17:03

CSS에서 요소들의 레이아웃을 지정할 때 사용하는 속성인 display 그 중에서도 inline, block, inline-block의 동작 방식을 정리한다. block 한 줄 전체를 점유 새로운 라인에서 시작 width, height, margin, padding 지정 가능 inline 컨텐츠 영역만큼만 너비 차지 inline + inline 이라면 같은 줄에 정렬 width, height, 세로 margin 지정 불가 요소 뒤에 공백이 있다면 space(4px)가 자동 지정 line-height 속성이 block 부모 요소에 적용 inline-block 컨텐츠 영역만큼 너비 차지(like inline) width, height, margin, padding 지정 가능(like block) 요소 뒤에 ..

기술이 된 상상 2021. 4. 2. 17:59

Array객체 sort 메소드 자바스크립트 Array의 내장함수 sort. 쉽게 정렬을 위해 사용할 수 있는 내장함수다. arr.sort([compareFunction]) 매개변수 compareFunction: 정렬 순서를 정의(Optional) 함수의 파라미터 값을 통해 전달된 인자를 비교하여 정렬의 순서를 정한다. 파라미터는 배열 내 요소 값 두 개가 주어진다. function(a, b) { // 비교 순환 시작 // 첫번째 순환 // a: 배열의 두번째 인자 // b: 배열의 첫번째 인자 // 두번째 순환 // a: 배열의 세번째 인자 // b: 배열의 두번째 인자 // ... // 마지막 순환 // a: 배열의 마지막 인자 // b: 배열의 마지막 직전 순서 인자 } 함수를 정의하지 않으면 유니코..

기술이 된 상상 2021. 4. 1. 17:08

String객체 replace/replaceAll 메소드 replace str.replace(regexp|substr, newSubstr|function) 첫번째 인자(regexp | substr) : 찾을 문자열 regexp : 정규식 객체 혹은 리터럴 값 substr : 문자열 값 str 문자열 중에 정규표현식 혹은 string 문자열과 일치하는 값을 찾는다. 두번째 인자(newSubStr | function) : 대체 문자열 newSubStr : 문자열 값 function(match, p1, p2, p3, offset, string) : 변경 절차를 함수로 정의하여 실행 function replacer(match, p1, p2, p3, offset, string) { // p1 is nondigit..

기술이 된 상상 2021. 3. 16. 15:28

sessionStorage와 localStorage의 차이가 있지만 일단 이 두 가지는 Web Storage라는 개념을 통해서 시작됩니다. Web Storage와 Web Storage API Web Storage는 웹 브라우저 내에 직접 데이터를 저장하는 공간을 말하며 Web Storage API를 활용해 이 저장소를 컨트롤 할 수 있다. Web Storage는 5MB의 저장공간을 사용할 수 있다. Web Storage는 origin(domain + protocol)마다 저장소를 할당합니다. Web Storage는 두가지 저장소 객체를 제공합니다. sessionStorage 객체와 localStorage 객체입니다. sessionStorage sessionStorage는 세션마다 별도의 저장소를 만들어 ..

기술이 된 상상 2021. 3. 13. 13:51

정규표현식에 대한 공부를 하려고 마음 먹고도 분량이 많다는 생각에 항상 복붙을 일삼은 날들을 후회하며 만드는 공식만이라도 이해하고 문법을 익혀보도록 한다. 오늘의 목표 16진수를 찾아라!! 1. 문자열 인자를 갖고 있는 배열에서 특정 16진수가 포함된 인자 값을 찾는다. 2. 각 문자열 내부에 16진수가 있다면 16진수를 찾아서 반환한다. * 각 문자열 내부에는 16진수가 여러 개 있고 그 중의 특정 prefix가 붙은 16진수만 찾아야한다. 단계별 목표 1단계 : 16진수 찾기 2단계 : 특정 prefix의 16진수 찾기 3단계 : prefix를 제외한 16진수 값 가져오기 1단계 : 16진수 찾기 String.prototype.match() 함수를 통해 정규표현식으로 찾는다. [string].matc..

기술이 된 상상 2021. 3. 12. 17:09

JSON.stringify() JSON 객체를 다루면서 많이 사용하는 메소드 중의 하나가 stringify와 parse일 것이다. 자바스크립트는 객체를 다른 변수에 할당할 때 기본적으로 주소값을 참조하기 때문에(call by reference) 객체를 복사하기 위해(call by value) 이 두 메소드를 자주 사용하곤 한다. 자주 사용하긴 하지만 다른 용도로 사용해본 적이 없어서, 혹은 정말 목적에 맞게 stringify 할 상황을 맞닥뜨리지 못해서 이 메소드의 사용법을 잘 모르고 지나쳤을지도 모른다. 이번 기회에 stringify 메소드에 대해 다시 명확하게 정리해본다. JSON 표준 내장 객체의 stringify 메소드 stringify() 메소드는 3개의 매개변수가 존재한다. JSON.strin..

기술이 된 상상 2021. 3. 8. 13:30