짧은코딩

가상 셀렉터 가상 셀렉터에는 가상 클래스와 가상 엘리먼트가 있고 선택된 요소에 특별한 상태나 특정 부분을 선택할 수 있는 셀렉터이다. :virtual selector와 같이 사용된다. 1. 가상 클래스 가상 클래스는 선택된 요소의 특정 상태에 동작하는 셀렉터이다. 링크에 마우스가 올라가거나 체크박스에서 선택되었을 때 스타일이 적용된다. This is a link 이 코드는 마우스를 이미지에 올렸을 때 스타일이 변경된다. -많이 사용되는 가상 클래스 :active a:active 링크를 마우스로 클릭 했을때 :hover a:hover 마우스가 해당 요소의 위로 올라간 경우 :link a:link 방문하지 않은 모든 링크를 선택 :focus input:focus 태그에서 해당 요소가 마우스 포커스를 가진경우..

Position position은 박스의 배치를 위한 속성이다. 1. Static -position의 기본값이며 요소를 순서대로 배치한다. 원하는 위치에 배치할 수 없다. -순서대로 왼쪽에서 오른쪽으로 추가해 나가고 오른쪽 공간이 없으면 다음 줄로 넘겨서 배치한다. -float 속성을 이용해 좌우로 배치 가능하다. 2. Relative -static과 같이 순서대로 배치되지만 top, right, bottom, left 속성을 사용해서 원하는 위치를 지정할 수 있다. -좌표값은 원래 있던 위치(static 기준으로 원래 위치해야 하는 곳)가 기준이 되며 속성에 따라 상/하/좌/우로 원하는 자리에 배치 가능하다. 3. Absoulte -top, bottom, right, left 속성값을 이용해 요소를 원..

캐스케이딩과 우선순위 캐스케이딩 Cascading은 DOM(Document Object Model) Tree 구조에서 상위 요소에서 하위 요소로 전달되는 (상속 개념)의미에서 유래 되었다. -상위 태그에서 정의된 디자인 속성은 하위 태그로 상속 -하위 태그에서 상위 태그에 정의된 디자인 속성을 변경할 수 있다. 우선 순위 디자인 속성이 외부 스타일시트, 내부 스타일시트, 인라인 스타일시트에 있으면 우선순위는 인라인 스타일시트가 제일 우선 순위이다. 그리고 외부, 내부 스타일시트는 문서상 정의된 순서에 따라 우선 순위가 결정된다. 만약 웹 브라우저 자체에도 css가 있다고 보면 브라우저 디자인 정의가 제일 낮은 우선 순위를 가진다. 박스 모델 박스 모델: 테두리(border), 내용(content), 안쪽..

function onGeoOk(position){ const lat = position.coords.latitude; const lng = position.coords.longitude; console.log("You live in", lat, lng); } function onGeoError(){ alert("Can't find you. No weather for you."); } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); user의 위치(geolocation)를 알려주는 것이다. navigator와 geolocation, getCurrentPosition을 사용한다. 이걸 부르면 브라우저에서 정보를 준다. 와이파이, GPS, 위치 ..

로컬 스토리지는 DB가 아니라 toDos를 복사하는 곳이다. 따라서 toDos가 DB이다. function deleteToDo(event){ const li = event.target.parentElement; li.remove(); } deleteToDo 함수는 HTML에서 어떤 element를 지워야 하는지를 안다. 하지만 DB에서 어떤 것을 삭제해야 하는지는 모른다. function handleToDoSubmit(event){//js가 방금 발생한 event를 handleToDoSubmit의 첫번째 인자로 준다. event.preventDefault() const newTodo = toDoInput.value; toDoInput.value = ""; const newTodoObj = { text: ..

https://programmers.co.kr/learn/courses/30/lessons/42626 코딩테스트 연습 - 더 맵게 매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같 programmers.co.kr 내 풀이(질문 봄) import heapq def solution(scoville, K): answer = 0 scoville.sort() sum = 0 while scoville[0] < K: if len(scoville)

https://programmers.co.kr/learn/courses/30/lessons/42586 코딩테스트 연습 - 기능개발 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 programmers.co.kr 내 풀이(맞음) def solution(progresses, speeds): answer = [] while progresses: count = 0 for i in range(len(progresses)): if progresses[i] >= 100: continue progresses[i] += speeds[i] while progresses: if p..

-html에서의 코드 html에서 required는 필수 -js에서의 코드 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); //toDoForm 안에 input이 1개라서 //const toDoInput = doucument.querySelector("todo-from input"); //위에랑 같은 의미 const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event){//js가 방금 발생한 event를 handleToDoSubmit의 첫번째 인자로 준다. event.prev..

명언 넣기 Math.random()을 하면 랜덤 값이 나온다. Math.random() * 10을 하면 0~10 사이 값이 나오는데 소수점도 나온다. 이 소수점을 없애는 함수는 3가지가 있다. 1. round Math.round(1.0)는 1로 반환, 반환할때 반올림해서 돌려준다. 2. ceil Math.ceil(1.1)은 2가 된다. 1.01도 2로 반환한다. 천장까지 올려준다는 의미이다. 3. floor Math.floor(1.1)은 1이 된다. 1.99도 1로 반환한다. 바닥까지 내려준다. const quotes = [ { quote: "최고 높이의 산을 오를 때에도 한 번 한 걸음에서 시작한다. ", author: "바바라 월터스", }, { quote: "우리가 정복하는 것은 산이 아니라 우리 ..

const clock = document.querySelector("h2#clock"); //혹은 #clock이나 clock로만 써도된다. h2 + id로 사용하는 방식을 사용했다. function sayHello(){ //2초마다 실행하는 함수 console.log("hello"); } setInterval(sayHello, 5000)//2가지 파라미터를 받고 첫번째는 내가 실행하고자하는 함수, 두번째는 호출되는 간격 단위는 ms interval은 매번 일어나는 것, ex) 매 2초마다 무슨 일이 일어나게 하는 것이다. setInterval 함수는 인자를 2개 받는데 하난 사용할 함수를 받고 다른건 시간(ms단위로)을 받는다. setInterval은 5초마다 계속 실행 const clock = docu..