분류 전체보기 71

[ HTML / CSS ] 포지셔닝, position

static은 기본값. relative 는 자기 자리에서 삐져나온다. 다른 요소들이 relative요소가 원래 있던 자리를 그대로 둔다. 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용. 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다. absolute은 다른 친구들이 원래 그 차리를 침범 한다. -> 띨롱 나와서 엄마 곁에서 떨어진다. 부모의 relative요소를 찾아서 그 요소에 절대적인 값으로 위치를 조절할 수 있다. sticky는 자기 자리에 잘 있다가 사용자 눈에 띌라고 아주 발악을 한다 fixed는 문서에서 띨롱 떨어져 나와 고정되어 있다. absolute과 fixed는 원래 있던 자..

[ HTML / CSS ] z-index, stacking context

stacking context css 포지셔닝 등으로 인하여 요소가 겹쳐 졌을 경우 요소의 쌓임 순서(stacking context)를 정의할 수 있다. 자주 쓰이는 쌓임 맥락의 영향을 받는 요소는 다음과 같다. 문서의 루트 요소 () position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소 position이 fixed 또는 sticky인 요소 flexbox 컨테이너의 자식 중 z-index가 auto가 아닌 요소 grid 컨테이너의 자식 중 z-index가 auto가 아닌 요소 opacity가 1보다 작은 요소 z-index 속성의 값 auto 새로운 쌓임 맥락을 생성하지 않고 현재 쌓임 맥락에서의 위치는 부모 요소와 동일하다. 상수 한 자신만의 쌓임 맥락을 생..

[ HTML / CSS ] 공용키워드 inherit, initial, unset

다음은 속성의 "값"으로 쓰이는 것들임. 기본적으로 상속이 되지 않는 속성들 : backgound-color, backgound-image, background-repeat, border, display 등 주로 박스모델과 관련됨. 자연스럽게 상속이 되는 것들은 대체적으로 텍스트와 관련이 있음. 상속 inherit : 하위 요소가 상위 요소의 스타일 속성값을 물려받겠다는 것을 의미함. 부모 요소가 포함(containing) 블록이 아니더라도, 항상 문서 트리 내 부모 요소로부터 상속받게 됨. 초깃값 initial : 속성의 초깃값을 요소에 적용시킴. unset : 부모로부터 상속할 수 있는 값이 있으면 상속값을, 없으면 초깃값을 적용시킴.

[ HTML / CSS ] background-size 속성 (auto, contain, cover)

backgrund-size 속성은 backgound-img 속성으로 지정한 이미지의 크기를 조절 할 수 있는 속성이다. 사용자 지정 값으로 설정 할수도 있고 키워드 값을 사용하면 편하게 설정할 수 있다. div 의 크키를 800px의 정사각형으로 만들고, 배경사진을 불러온 상태에서 backgound-size 속성을 키워드로 설정해보자. 설정한 원본이미지는 다음과 같다. auto (기본값) " 문서상으론 고유한 비율이 유지되도록 해당 방향으로 배경 이미지의 크기를 조정합니다. " 라고 되어있다. 이미지 자체에는 리사이징이 되어있지 않지만 컨테이너 크기에 맞게 조정되었다. contain 이미지를 자르지 않고, 부모의 크기 안에서 최대한 커진다. backgound-repeat 속성의 디폴트가 반복 이기 때문에..

[ HTML / CSS ] 인라인 요소 & 블록 요소

인라인 요소 필요한 부분만 공간 차지. 연속 배치시 기본적으로 가로로 나란히 배치됨. 예) , 등 블록 요소 가로로 모두 차지. 연속 배치시 기본적으로 아래에 배치됨. margin, padding, width, height 설정가능. 예) , 등 요약 인라인 요소는 자기부분 조금만 이런 느낌 블록 요소는 가로로 꽉차는 직사각형 느낌이라 보면 된다. 인라인 요소는 기본적으로 크기를 지정할 수 없는데, display: inline-block 을 지정해주면 크기를 설정할 수 있다. 블록 요소 안에 인라인 요소를 삽입하여 인라인 요소를 관리 할 수 있다. 참고 Inline-level content - MDN Web Docs Glossary: Definitions of Web-related terms | MDN ..

프린터 / 프로그래머스 코딩테스트 자바스크립트 코드

🔗 참고글 🔥 주어지는 것 1) 일의 중요도가 표시된 배열 2) 출력 순서가 궁금한 요소의 인덱스 넘버(로케이션) 🔥 요구하는 것 배열의 순서대로 출력하되, 요소의 중요도가 뒤에 있는 것 보다 낮으면 맨 뒤로 넘길 것(한번에 정렬X) [2, 1, 3, 2] 로 배열이 주어지고 로케이션이 2인(중요도 3인 요소) 경우, 1, 3, 2, 2 (답 ++!) 3, 2, 2, 1 (답 ++1) 로 결과는 2 이런식으로 나오게 해야함. 🔥 어려웠던 것 1. 문제 가독성이 에바 2. 반복문을 어떻게 제어 해야하는가, ---------- 1. 자기 자리의 인덱스 번호와 중요도를 묶어주기 위해 map 으로 배열을 변화 시켜줌 이렇게 됩니다. function solution1(priorities, location) { v..

주자 요금 계산 / 프로그래머스 코딩테스트 자바스크립트 코드

🔗(문제) 🔗(코드제공) 0. 사전 지식 1. records로 부터 차량 번호를 키로 두고 시간 , 출차 시간 정리 function getParkingTable(records) { const parkingTable = {}; records.forEach((val) => { const info = val.split(" "); if (Object.keys(parkingTable).includes(info[1])) { parkingTable[info[1]].push([info[0], info[2]]); } else { parkingTable[info[1]] = [[info[0], info[2]]]; } }); // 콘솔 확인용 코드 console.log(parkingTable); return parkingTa..

다음에 올 숫자 / 프로그래머스 코딩테스트 자바스크립트 코드

배열의 마지막 요소를 들고올때 length-1 로 들고왔는데 걍 pop() 으로 들고오면 됐구나 ,, 🔗 1, 2, 4 인 경우가 있기 때문에 등비수열일 경우 공비를 나눗셈으로 다시 구했다 function solution(arr) { var f = arr[1] - arr[0]; //차이 var f2 = arr[2] - arr[1]; if (f === f2) { // return arr[arr.length - 1] + f; return arr.pop() + f; } else { // return arr[arr.length - 1] * (arr[1] / arr[0]); return arr.pop() * (arr[1] / arr[0]); } } console.log(solution([2, 4, 8]));

과일 장수 / 프로그래머스 코딩테스트 자바스크립트 코드

저는 과일판매아티스트예요. 🔗 문제에 k(과일의 최대 점수)가 주어지는데, 이게 왜 필요한지는 아직까지도 모르겠숨. 아무튼 m개씩 팔거야. (나머지는 내가 먹음) 묶음 중에 제일 낮은 등급 * m 이 한 묶음의 가격 낼 수 있는 최대수익은 얼마인가?! 하는 문제. 1. 남은 과일을 버리기 위해서 과일 배열의 개수를 m 으로 나눈 나머지만큼 배열에서 빼줄건데, 등급이 낮은 애들을 빼야겠지요? 2. 오름차순으로 남은 과일을 sort 해주고 m개씩 구분한다 치면 각각의 앞에 있는 수 * m 이 그 묶음의 가격 이겠지요? 🔥 무지성으로 2차원 배열로 만들어주고 계산하면 되겟다 했는데 🔥 그럴 필요 없음. 🔥 for 문으로 m식 뛰어 넘으면서 최종값에 추가해주기면 하면 됨. function solution(k, ..

중복된 문자제거 / 프로그래머스 코딩테스트 자바스크립트 코드

🔗 people 이라는 문자열이 있으면 이후에 나오는 중복 문자를 제거하여 peol 문자열을 반환해라 하는 것. 공백도 포함이 된다. 문자열로 받아 문자열을 뱉어야 한다. 포인트 * 중복 -> 일단 Set 객체를 먼저 생각하거라. Set - JavaScript | MDN (mozilla.org) Set - JavaScript | MDN Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. developer.mozilla.org ✔ 두 개의 문자열을 이용한 풀이 function solution(str) { var ans = ""; for (item of str) { if (ans.indexOf(item) == -1) { ans += item; } } return a..

문자열 밀기 / 프로그래머스 코딩테스트 자바스크립트 코드

문제는 그나마 쉽게 풀었는데? length 스펠링 때문에 또 삽질했죠? 손으로 쓰면 써지는데 타이핑으로 칠때마다 손가락이 지 멋대로 움직이는거 잇죠 이제 좀 외우거라 인간아. length !!! 🔗 "hello" > "ohell" 이 되려고 하면, 얘를 왼쪽으로 몇 번 밀어야 하니 ? 하는 문제임. 걍 대충 풀었읍니다. 이거는 남의 코드 보고 충격 받는게 낫습니다 let solution = (A, B) =>(B+B).indexOf(A); 네 ,, 이런 생각은 어떻게 하냐 진짜? 현업에서 쓰이는게 고스란히 내려온건가? 암튼 내가 한그 function solution(A, B) { let ans = A; let su = 0; if (A === B) return 0; for (let i = 0; i < A.l..