전체 글

문제https://school.programmers.co.kr/learn/courses/30/lessons/258705  문제 이해  이 문제는 사다리꼴 윗변에 정삼각형이 있는지를 나타내는 1차원 정수 배열 tops와 그 길이 n이 입력으로 주어진다. 도형은 돌릴 수 있으며, 문제 예시 모양을 빈틈없이 채우는 경우의 수를 반환해야한다. 도형이 다른 도형과 겹쳐서는 안된다. 제한 사항1 ≤ `n` ≤ 100000`tops`의 길이 = `n``tops[i]`는 사다리꼴의 윗변과 변을 공유하는 i + 1 번째 정삼각형의 위쪽에 정삼각형을 붙이는 경우 1, 붙이지 않는 경우 0. 문제 접근 n = 1일 경우먼저 삼각형이 하나이고(n = 1), 사다리꼴 윗변에 정삼각형이 있는 경우(tops[0] = 1)의 경우의..

햄버거 만들기문제 링크 function slice(array, start, end=array.length){ let sliced = []; if(start   옹알이 (2)문제 링크 function slice(str, start, end=str.length){ let sliced = ""; for(let i = start; i   가장 많이 받은 선물문제 링크 function makeArray(length, deps = 1){ const array = []; if(deps === 1){ for(let i = 0; i maxNum){ maxNum = num; } } return maxNum ?? 0;}function ..

script 태그는 자바스크립트를 실행시키기 위해 사용하는 태그이다. 태그 내부에 인라인으로 자바스크립트를 작성할 때에는 HTML파싱 순서대로 파싱 및 실행되지만, 만약 외부 스크립트를 연결하고 있는 경우 해당 스크립트를 다운로드, 파싱, 실행 순서로 진행된다. HTML에서 아무것도 안 붙인 로 외부 자바스크립트 파일을 읽게 될 시, 문서를 파싱하다가 진행하던 파싱을 멈추고 스크립트를 로드 및 실행한 후, 다시 파싱을 진행하게 된다. 각각의 를 만날 때마다 같은 과정이 일어나게 되고, 결국 HTML이 로드되는 시간은 길어지게 된다. 하지만 async 속성이 붙으면 script의 로드가 비동기적으로 동작하게 된다. 예를 들어, HTML을 파싱하던 중 async script를 만나게 되면, 파싱을 멈추지 않..

float 이미지와 텍스트가 함께 있을 때, 이미지의 위치를 정해줄 때 주로 사용한다 속성값none 기본값이다. 요소를 띄우지 않는다.left요소를 왼쪽으로 띄운다.right요소를 오른쪽으로 띄운다.inherit부모의 값을 상속해서 사용한다. float 초기화 방법float를 사용하다보면, float로 인해 바뀌어버린 레이아웃을 초기화해야할 때가 있다. 이 때 사용하는 방법들이다. 1. clear초기화할 태그에, clear 속성을 주게되면 float로 인해 바뀐 레이아웃을 초기화 시킬 수 있다. 속성값은 5가지가 있다. none초기화를 하지 않음leftfloat: left로 인해 바뀐 레이아웃을 초기화한다.rightfloat: right로 인해 바뀐 레이아웃을 초기화한다.bothfloat로 인해 바뀐 레..

기본 스타일 시트각각의 웹 브라우저가 기본으로 가지고 스타일 시트(CSS)가 있다. 모든 브라우저에서 같은 UI UX 경험을 주기 위해서는 이를 초기화 시켜주는 작업이 필요하다. 초기화 CSS 중에 가장 유명한 것은, 에릭 마이어의 reset css이다. 최근에는 여러 CSS 라이브러리들이 있기 때문에, 실무에서는 사용할 일이 적다.  CSS 적용 우선순위CSS는 겹치는 속성이 있을 때, 가장 우선순위가 높은 하나 이외에는 무시하는 특징이 있다. 그렇다면, CSS는 가장 우선순위가 높은 것을 어떻게 판단할까? 정확한 가중치는 알 수 없지만, 아래의 점수표와 비슷한 방식으로 우선순위에 점수를 매겨 판단한다고 생각하면 편하다. !important : ???점 다른 어떠한 것보다도 우선순위가 높다.만약 imp..

태그는 웹사이트에서 오디오를 재생하기 위해 사용하는 태그이다. source 태그를 통해 확장자가 다른 오디오 파일을 여러개 연결하여, 다양한 브라우저에서 정상적으로 작동하도록 할 수 있다. 속성속성 이름타입내용controlsboolean컨트롤바 표시autoplayboolean자동 재생 (크롬에서는 muted가 true일 때)mutedboolean음소거loopboolean무한 반복  이 문장은 여러분의 브라우저가 audio 태그를 지원하지 않을 때 화면에 표시됩니다! ❗  크롬 브라우저에서는 muted 속성을 설정하지 않으면 autoplay 속성이 적용되지 않는다. ( 도 마찬가지)   태그는 웹사이트에서 비디오를 재생하기 위해 사용하는 태그이다. 와 마찬가지로 source 태그를 통해 크로스..

다중 리스트를 만드려면? 위와 같은 구조의 HTML을 설계한다면, 어떻게 만드는 것이 가장 이상적일까? 여러가지 방법이 있겠지만, 아래의 방법이 가장 의미적으로 맞다고 생각한다.  우선, ul 태그는 자식으로 무조건 li 태그를 포함해야한다. 물론, li 태그를 굳이 쓰지 않더라도 화면에는 제대로 표시가 되지만, SEO 관점에서는 불이익을 받을 가능성이 있다. mdn에서도 이 방법이 옳은 방법임이 명시되어 있다!  그러니, 굳이 불확실한 방법을 고를 필요는 없을 것이다! table 태그에서 사용 가능한 태그들을 모두 활용한 레이아웃은 다음과 같다. (col 및 colgroup 제외) ..

HTML 기본 구조HTML은 크게 , , 로 이루어진다. 태그의 자식으로 와 가 있다.  내부에는 사이트 제목 or 사이트의 세부정보 같은 meta정보들이 들어가게 되고, 내부에는 실제 그 사이트에 들어갔을 때 보여지는 부분에 대한 정보들이 들어간다.  HTML 코드를 VSCode에서 emmet을 통해 생성해보면, 가장 윗 부분에는 이렇게 생긴 부분이 있는데, 이 부분은 HTML과 XML의 유효성을 검증하기 위한 부분이다. 예전에는 DTD (Document Type Definition)이라는 형식으로 검증했었는데, 그 방식은 아래와 같다.">  예전의 웹 개발에서는 브라우저마다 고려해야할 점도 많았기 때문에 일관된 렌더링을 위해 DTD 방식을 사용했었지만, 현재는 웹 개발 표준이 어느정도 정착하면서 ..