함번보고 두번보고

1. display HTML 포스팅에서 소개하였듯이 HTML 태그는 Block Level과 Inline Level 두 가지로 분류할 수 있다. 그러나, css의 display 속성값을 이용하면 기본 속성값을 변경할 수 있다! display 속성값은 일단 flexbox를 제외하고 block, Inline, Inline-block 각각의 차이점을 아래 코드블럭을 통해 살펴보자.. See the Pen GRNzxdd by Hamsworth (@hampro) on CodePen. display 정리! value description block 한줄에 하나! Inline 공간이 허용한다면 한줄에 여러개 가능. *lnline은 content 자체만 꾸밈. 즉, content크기에 따라 크기가 결정. (= css로 ..

1. CSS CSS란 Cascading Style Sheet의 약자로, 우리는 Cascading이 뭔지 좀 더 살펴볼 필요가 있다. Cascading 이란, 폭포, 연쇄라는 뜻으로 그 이유는 웹페이지 화면이 로드될 때, 실제 화면이 꾸며지는 순서는 아래 그림처럼 우리가 정의한 CSS가 있다면, Author style이 적용되고, 없으면 다크모드 설정과 같은 유저가 설정한 User style이 그리고 이도 없다면 Browser에서 정의한 기본스타일이 적용이 되기 때문이다. 2. Selector CSS에서 Selector란, HTML에서 우리가 꾸미고자 하는 요소를 골라오는 것 즉, 선택하는 것을 말한다. 무엇가를 꾸민다는 것은 잘 분류하고 공통적인 특성을 부여함으로써 통일적인 느낌을 주는게 중요하기 때문에..

앞서 '[HTML] Web 기초, HTML? 개념 잡고 가자!' 포스팅에서 우리는 '태그'의 개념을 배웠다. 이번 포스팅에서는 태그에 대해 좀 더 자세히 알아보자. 태그는 크게 Box와 Item으로, 그리고 Block과 Inline으로 분류할 수 있다. 1. BOX vs ITEM Item은 실제 사용자에게 보여지는 태그이고, Box는 보이지않지만, Item들을 잘 정리할 수 있도록 도와주는 즉, Sectioning을 도와주는 태그이다. (물론, 나중에 CSS를 통해 스타일링이 가능하지만, 기본적으로 HTML에서는 사용자에게 보여지지가 않는다. ) 그럼 실제 어떤 태그들이 있는지 몇가지를 살펴보자. BOX ITEM header section a video nav article button audio mai..

1. HTML Wikipedia에서 살펴본 HTML이란.. Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. 즉, HTML은 웹 브라우저(Chrome, Safari, Firefox 등..)에서 나타나도록? 디자인된 문서의 표준 '마크업 언어'이다. 2. Markup language 그럼.. '마크업 언어'는 뭔데..? 라는 질문이 꼬리를 물고 생길 터인데.. 위 링크를 타고 들어가서 살펴보면.. In computer text processing, a markup language is a system for annotating a docum..

갑자기 Class와 Object의 재밌는 예시가 생각나서 글을 써본다..그놈의 붕어빵은 이제 그만.. 1. Class vs Object Class와 Object의 차이를 게임으로 비교하자면.. Class는 직업, Object는 유저의 캐릭터라고 볼 수 있다. 좀 더 구체적으로 예를 들면.. LOL에서 우리가 고르는 캐릭터(티모, 말파이트 등등..)들이 클래스고, 소환사의 협곡에 소환된 캐릭터는 오브젝트라고 볼 수 있다. 자 이게 무슨말인고 하니...처음에 시작할 때 캐릭터의 기본 능력치는 똑같지만 각각에 캐릭터에 부여된 UserName과 시간이 지날수록 페이커와 내가고른 캐릭터의 KDA가 달라진다는 말이다. 즉, Class는 무언가를 생성하는 하나의 '틀'이고, Object는 그 틀(Class)에서 자신..

요즘 너무 재밌으신 개그맨 최해준님 유행어 한번 빌려 포스팅을 시작..ㅎ 코딩을 할 때 종종 부딪히던 regex...언젠간 한번 정리해야지 항상 생각하다가 즐겨보는 유투브 채널인 "드림코딩 by 엘리"님의 영상을 보고 고무가 되어 이 강의로 바탕으로 regex를 정리해 보았다... 1. 정규표현식?? regex는 regular expression의 약자로 정규표현식이라 불리며 문자열에서 특정한 패턴을 찾을 수 있도록 도와준다. 2. 문법 정규표현식은 아래와 같이 사용할 수 있다. 그 중 우리가 주의깊게 살펴봐야하는 바로 pattern 이다. 문법 slashes pattern slashes flag 의미 정규표현식 시작 찾고자하는 패턴 정규표현식 종료 검색옵션 예시 / regex? / i 3. ! 패턴작성..

reduce 함수를 사용해 Map의 value 최댓값을 구할 수 있다. let arr = [ ['bob', 1], ['a', 1], ['ball', 2], ['the', 1], ['flew', 1], ['far', 1], ['after', 1], ['it', 1], ['was', 1] ] let map = new Map(arr); console.log([...map.entries()].reduce((a,b) => a[1] > b[1] ? a : b)[0]); // ball

매번 알고리즘 문제를 풀때마다 느끼지만.. 정규식을 잘쓰자..! * const isNum = c => /\d/.test(c); let name = "hello, This is hamstar"; let old = "I'm 30 years old..."; const isNum = c => /\d/.test(c); console.log(isNum(name)); console.log(isNum(old)); // false // true + String이 숫자일 때, number로 변환을 하고 싶을 경우 ( parseInt (str) ) let str = "30"; const isNum = c => /\d/.test(c); if(isNum(str)) { console.log(parseInt(str)); conso..

! Array의 map함수는 Array 내의 모든 요소를 순회하며 콜백함수를 거친 새로운 배열을 반환한다. Number type을 가지고 있는 Array의 각 요소를 String type으로 변경하려 할 때 일반적으로 for문을 돌며 toString으로 바꿔왔지만, Array.Map 함수와 Arrow function을 함께 사용하면 매우 간단하게 변경할 수 있다는 걸 발견했다. 1. Syntax let new_array = arr.map(function callback( currentValue[, index[, array]]) { // return element for new_array }[, thisArg]) Parameters callback 함수는 arr의 모든 요소를 호출하고, 매번 callbac..