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 요소를 기준으로 이동한다.이미지 위의 특정 위..
자주 쓰다보면 익숙해지겠지만.. 아직은 조금 헷갈려서 CSS 선택자 문법을 정리해보았다.작성한 것들 외에도 더 활용할 수 있는 것들이 있다! 기본 선택자자식 선택자선택자의 직계 자식들을 선택하여 스타일을 적용한다..container > * { } // .container의 직계 자식 전체를 선택.container > div { } // .container의 직계 자식인 div만 선택한다. 자식 요소의 자식 중에 div가 있는 경우 해당하지 않음 자손 선택자선택자의 직계 자식을 포함하여 모든 하위 요소들을 선택한다.즉, 자식의 자식의 자식까지도 포함된다..container div { } // .container 하위의 모든 div를 선택 인접 형제 선택자선택자의 바로 다음 형제 요소를 선택한다.같..
네트워크 (network)긴밀하게 연결된 것을 의미한다. 사람들 간의 소통, 교통상황 등 네트워크의 주체는 다양할 수 있다.컴퓨터 네트워크는 컴퓨터 간 데이터를 주고받는 통신망을 의미한다!네트워크는 전 세계를 연결할 수 있는 거대한 네트워크가 있고, 그 안에 여러개의 중간급 네트워크가, 그 안의 더 작은 네트워크들로 구성되어 있다.이처럼 네트워크를 범위에따라 구분한 것 중 일부가 LAN, WAN이다. LAN (Local Area Network)지리적으로 가까운 기기들이 서로 연결된 소규모 네트워크집, 학교, 회사와 같이 지리적으로 가까운 위치의 기기들이 중심기기(공유기 등)에 연결된 형태통신에 필요한 선이 짧으므로 데이터를 주고받을 때 오류가 적고 속도가 빠름 WAN (Wide Area Network..
프로그래머스 - 달리기 경주 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.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..
최종 결과 🎂 과제 목표1) HTML로 기본 구조를 만든다.2) 자바스크립트로 할 일 추가 기능을 구현한다. (입력 필드, 버튼) 🎂 추가로 시도한 것1) 할 일 완료 표시, 체크박스 꾸미기2) 할 일 삭제 기능3) 배경, 버튼 그라데이션 색상 적용4) 입력창이 빈 상태일 경우 alert 띄우기 구현 방법🥐 입력을 받아 할 일 목록에 추가하기 + 입력창이 비었을 때 alert + 삭제 추가 '할 일(task)'들은 같은 분류의 요소들이 모여있는 목록이기에 ul로 만들기로 했고, 사용자가 입력한 요소들을 li로 추가하도록 구성했다. // task 추가const taskAddButton = document.querySelector('#taskAddButton');taskAdd..
todo list를 만들면서 기본 체크박스 디자인이 아닌 실제로 체크한듯한 느낌을 주고싶어서 체크박스 스타일에대해 찾아보았다.체크박스의 스타일을 변경하는 것으론 한계가 있어서 대부분 체크박스와 연결된 label에 요소를 추가한다고 한다. 간단 요약1) 체크박스를 보이지 않게 숨긴다.2) label 혹은 태그 내 다른 요소를 체크되지 않은 상태의 체크박스로 꾸며준다.3) 체크된 상태도 꾸며준다. 이 때 예시처럼 다른 기호, 이미지 등을 띄우고싶다면 가상요소를 활용한다. 만들어보자HTML 구조 /* 이 span을 체크박스로 만들 것이다! */${newTask} 체크박스 숨기기input[type="checkbox"] { display: none;} 체크박스 기본 상태 만들기.checkboxIcon ..