전체 글

CSS에서 리스트의 스타일을 조정하는 데 사용되는list-style-type과 list-style-position 속성에 대해 깊이 있게 알아보겠습니다.이 두 속성은 HTML 리스트의 기본 모양과 배치를 변경하여 웹 페이지의 디자인과 가독성을 향상시키는 데 중요한 역할을 합니다.list-style-type 속성list-style-type 속성은순서 없는 목록()과 순서 있는 목록()의 항목 앞에 표시되는 마커(marker)의 모양을 결정합니다. 기본적으로 요소는 채워진 원형 불릿(disc)을, 요소는 숫자(decimal)를 마커로 사용합니다. 그러나 list-style-type 속성을 활용하면 다양한 마커 스타일로 변경할 수 있습니다.주요 값과 설명disc: 채워진 원형 불릿입니다. (의 기본값)cir..

Git을 사용할 때 반드시 알아야 하는 개념 중 하나가 .gitignore 파일이다.프로젝트를 진행하다 보면 자동으로 생성되는 파일이나 민감한 정보가 담긴 파일 등이깃 저장소에 올라가면 안 되는 경우가 많다. 이런 파일들이 깃에 올라가지 않도록 설정하는 것이 바로 .gitignore 파일의 역할이다..gitignore 파일이란?.gitignore 파일은 특정 파일이나 폴더를 깃의 추적 대상에서 제외하도록 설정하는 역할을 한다.즉, .gitignore에 지정된 파일이나 폴더는 git add . 명령어를 실행해도 스테이징되지 않는다.이를 통해 불필요한 파일이 원격 저장소에 올라가는 것을 방지할 수 있다. .gitignore 기본 문법.gitignore 파일을 작성할 때는 몇 가지 기본 규칙이 있다.주석 처리..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명미로는 1x1 크기의 칸들로 이루어진 직사각형 격자 형태입니다.각 칸은 통로 또는 벽으로 구성되어 있습니다.벽으로 된 칸은 지나갈 수 없고, 통로로 된 칸으로만 이동할 수 있습니다.미로에는 출구, 레버, 시작 지점이 각각 하나씩 있습니다.출구는 레버를 당겨야만 열립니다.탈출 순서: 시작 지점 → 레버 → 출구한 칸 이동에 1초가 걸립니다.레버를 당기기 전에도 출구가 있는 칸을 지나갈 수 있습니다.목표, 입출력목표미로를 탈출하는데 필요한 최소 시간 계산입력문자열 배열 maps출력최소 탈출 시간 (초), 탈출 불가능 시 -1 매개변수maps미로를 나타..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr문제 요약민호는 다단계 칫솔을 판매함 판매원이 칫솔 판매이익이 피라미드 조직을 타고 조금씩 분배 어느정도 판매가 이뤄진 후누가 얼마만큼의 이득을 가져갔는지 궁금이 경우 민호가 center파란색은 여덟명의 판매원각각은 자신을 조직에 참여시킨 추천인에 연결 조직의 이익분배 규칙모든 판매원은 이익의 10% 계산해 추천인에게 배분나머지는 자신이 가짐 모든 판매원은 자신이 조직에 추천하여 가입시킨 판애원에게서 발생하는 이익의 10%까지 자신의 이익이 됨자신의 이익 또한 자신의 추천인에게 분배 단 10% 계산 시 원 단위에서 절사10%를 계산한 금액이 1원 미만인 경우..

배열에서 서로 다른 인덱스의 두 수를 뽑아 더해 배열로 출력하는 문제 해답 여기서 테스트케이스 출력과 result 가배열과 객체인 경우에 같은지 확인하려면JSON.stringify 사용script>       const data = [        {          input: [1, 2, 3, 4, 5],          output: [3, 4, 5, 6, 7, 8, 9],        },        {          input: [10, 20, 30, 40],          output: [30, 40, 50, 60, 70],        },        {          input: [-5, 0, 5, 10],          output: [-5, 0, 5, 10, 15],     ..

script>      // sort 메서드 사용하지 않고 O(N^2) 정렬 시간 비교      // bubblesort      function bubbleSort(arr) {        const n = arr.length;        for (let i = 0; i n; i++) {          for (let j = 0; j n - i - 1; j++) {            if (arr[j + 1] arr[j]) {              [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];            }          }        }        return arr;      }      // sort() method      functi..

padStart와 padEnd에 대해 깊이 있게 알아보려고 합니다.이 두 메서드는 특히 시간 형식을 다룰 때 굉장히 유용한데요,00:00 형식의 시간을 만들 때 어떻게 활용할 수 있는지 자세히 살펴보겠습니다. padStart와 padEnd란?padStart와 padEnd는 ES2017(ES8)에서 도입된 String 메서드입니다. 이 메서드들은 문자열의 시작 또는 끝에특정 문자를 채워 넣어 원하는 길이의 문자열을 만들 수 있게 해줍니다. padStart 메서드padStart는 문자열의 시작 부분에 지정된 문자를 채워 넣습니다.const str = '5'; console.log(str.padStart(2, '0')); // 출력: '05' padEnd 메서드padEnd는 문자열의 끝 부분에 지정된 문자를 ..

오늘은 CSS의 :has() 선택자에 대해 알아보려고 해요.이 기능이 왜 중요한지, 어떻게 사용하는지,그리고 어떻게 활용할 수 있는지 자세히 살펴보겠습니다.:has() 선택자란?:has() 선택자는 CSS에서 오랫동안 기다려온 '부모 선택자'의 역할을 합니다.특정 조건을 만족하는 요소를 선택할 수 있게 해주는데요, 이게 왜 중요할까요?기존에는 자식 요소를 기준으로 부모 요소의 스타일을 변경하는 게 CSS만으로는 불가능했거든요.JavaScript를 사용해야 했죠.하지만 :has()를 사용하면 순수 CSS로 이런 작업이 가능해집니다.브라우저 지원 현황2023년 기준으로 :has()는 대부분의 최신 브라우저에서 지원됩니다.Chrome, Edge: 105 버전부터Firefox: 121 버전부터Safari: 15..

HTML의 태그는 사용자로부터 다양한 형태의 데이터를 입력받기 위해 사용됩니다. 각 type 속성은 입력받는 데이터의 형식과 기능을 정의합니다.아래에서는 HTML의 모든 input 태그의 type 속성과 그 정의, 예시를 소개합니다. button클릭 시 특정 동작을 수행하는 버튼입니다. checkbox여러 개의 선택지 중에서 하나 이상을 선택할 수 있는 체크박스입니다. color색상을 선택할 수 있는 입력 필드입니다. date날짜를 선택할 수 있는 입력 필드입니다. email이메일 주소를 입력받기 위한 필드로, 유효한 이메일 형식인지 검증합니다. file파일을 업로드할 수 있는 입력 필드입니다.  hidden사용자에게 보이지 않지만, 서버로 전송할 데이터를 포함하는 필드입니다. number숫자만 입력받..

코어 웹 바이탈 (Core Web Vitals) 이란?웹사이트의 사용자 경험을 측정하는 중요한 측정 지표입니다.이 지표는 페이지 로딩 속도, 상호작용의 반응성, 시각적 안정성을 평가하여웹사이트의 품질을 개선하는 데 도움을 줍니다. 핵심 성능 보고서(Core Web Vitals Report)는모든 웹 페이지에 적용되는 성능 보고서의 하위 집합으로 웹사이트의 사용자 경험을 평가하는 데 중요한 도구입니다.Google의 코어 웹 바이탈 지표를 기반으로 합니다.이 보고서는 웹사이트의 성능을 측정하고, 개선할 수 있는 기회를 제공합니다. 이 보고서는 LCP, FID, CLS와 같은 코어 웹 바이탈 지표를 포함하여 웹사이트의 로딩 속도, 반응성, 시각적 안정성을 측정합니다 각 코어 웹 바이탈은 사용자 경험의 고유한 ..