[JavaScript] 특정 위치로 스크롤 이동시키기 (scrollTo)

본격 팀 프로젝트가 시작됐다!내가 해보고싶다한 기능을 구현하기위해 테스트를 해보다가.. 예상치못하게 참고한 코드들이 하나도 이해가 안돼서 ㅎㅎㅎ ㅠㅠ한참을 고민했다..일단 기반이되는 scrollTo()를 먼저 정리해보자! window.scrollTo()문서 내 특정 좌표로 스크롤을 이동한다!SyntaxscrollTo(x, y);scrollTo(({top: y, left: x, behaviour: option}); x, y값은 이동할 거리(단위: 픽셀), behaviour는 움직임에대한 옵션을 설정할 수 있다. behaviour 옵션smooth: 부드럽게 이동instant: 한번에 이동auto: smooth를 지원하지 않는 경우, 브라우저에서 지원하는 방식으로 스크롤 (대부분 목표 위치로 즉시 이동)beh..

• format_list_bulleted JavaScript
• · 2024. 7. 16.
• textsms

[CSS] position (static, relative, absolute, fixed, sticky)

position요소를 배치할 기준점을 정하는 속성이다! staticHTML 요소의 기본 위치이다. position: static인 요소는 top, bottom, right, left를 지정해줘도 이동하지 않고 원래 위치에 배치된다. relative요소의 기본 위치를 기준으로 설정된 값만큼 top, bottom, right, left 방향 이동한다.position: relative;top: 50px;left: -100px; 왼쪽이 위치를 설정하지 않은 기본 상태, 오른쪽이 위 코드를 적용한 상태이다.top 에서부터 +50px만큼 좌표가 이동하고 left에서부터 -100px만큼 이동한 것을 볼 수 있다.  absolute부모 요소 중 가장 가까운 relative 요소를 기준으로 이동한다.이미지 위의 특정 위..

• format_list_bulleted HTML + CSS
• · 2024. 7. 13.
• textsms

[CSS] 선택자(Selector) 문법

자주 쓰다보면 익숙해지겠지만.. 아직은 조금 헷갈려서 CSS 선택자 문법을 정리해보았다.작성한 것들 외에도 더 활용할 수 있는 것들이 있다! 기본 선택자자식 선택자선택자의 직계 자식들을 선택하여 스타일을 적용한다..container > * { } // .container의 직계 자식 전체를 선택.container > div { } // .container의 직계 자식인 div만 선택한다. 자식 요소의 자식 중에 div가 있는 경우 해당하지 않음  자손 선택자선택자의 직계 자식을 포함하여 모든 하위 요소들을 선택한다.즉, 자식의 자식의 자식까지도 포함된다..container div { } // .container 하위의 모든 div를 선택  인접 형제 선택자선택자의 바로 다음 형제 요소를 선택한다.같..

• format_list_bulleted HTML + CSS
• · 2024. 7. 11.
• textsms

LAN, WAN은 무엇일까?

네트워크 (network)긴밀하게 연결된 것을 의미한다. 사람들 간의 소통, 교통상황 등 네트워크의 주체는 다양할 수 있다.컴퓨터 네트워크는 컴퓨터 간 데이터를 주고받는 통신망을 의미한다!네트워크는 전 세계를 연결할 수 있는 거대한 네트워크가 있고, 그 안에 여러개의 중간급 네트워크가, 그 안의 더 작은 네트워크들로 구성되어 있다.이처럼 네트워크를 범위에따라 구분한 것 중 일부가 LAN, WAN이다.  LAN (Local Area Network)지리적으로 가까운 기기들이 서로 연결된 소규모 네트워크집, 학교, 회사와 같이 지리적으로 가까운 위치의 기기들이 중심기기(공유기 등)에 연결된 형태통신에 필요한 선이 짧으므로 데이터를 주고받을 때 오류가 적고 속도가 빠름  WAN (Wide Area Network..

• format_list_bulleted 네트워크
• · 2024. 7. 9.
• textsms

[프로그래머스 lv.1] 달리기 경주 (JS)

프로그래머스 - 달리기 경주 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 설명과 입출력이 직관적으로 다가와서 쉬운 편이라고 생각했으나..객체와 배열의 특징에 대해 다시 한 번 생각을 정리할 수 있는 문제였다!  문제  첫 시도 (오답)callings.forEach(player => { let curRank = players.indexOf(player); let tmp = players[curRank - 1]; players[curRank - 1] = player; players[curRank] = tmp;});return players; ind..

• format_list_bulleted 알고리즘
• · 2024. 7. 9.
• textsms

TODO-LIST 만들기

최종 결과 🎂 과제 목표1) HTML로 기본 구조를 만든다.2) 자바스크립트로 할 일 추가 기능을 구현한다. (입력 필드, 버튼) 🎂 추가로 시도한 것1) 할 일 완료 표시, 체크박스 꾸미기2) 할 일 삭제 기능3) 배경, 버튼 그라데이션 색상 적용4) 입력창이 빈 상태일 경우 alert 띄우기  구현 방법🥐 입력을 받아 할 일 목록에 추가하기 + 입력창이 비었을 때 alert + 삭제 추가 '할 일(task)'들은 같은 분류의 요소들이 모여있는 목록이기에 ul로 만들기로 했고, 사용자가 입력한 요소들을 li로 추가하도록 구성했다. // task 추가const taskAddButton = document.querySelector('#taskAddButton');taskAdd..

• format_list_bulleted 개인 프로젝트/개인 과제
• · 2024. 7. 5.
• textsms