본문 바로가기

분류 전체보기

(112)

250313 to-do 리스트 만들기 (2) https://hydeveloper.tistory.com/170 에서 아직 하지 못한 심화 과제 (3) : 드래그 앤 드롭으로 요소의 위치 바꾸기 (정렬하기) 를 구현하고자 한다. 이에 앞서 draggable 속성과 drag 이벤트를 알아둬야 한다. draggable 속성 draggable = "true"를 부여하면 어떤 요소든 드래그될 수 있는 객체로 변환할 수 있다. drag 이벤트 (mdn : https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/drag_event) drag드래그가 가능한 대상에서 발생dragstart드래그를 시작할 때 발생dragend드래그가 종료될 때 발생dragover드래그하면서 마우스가 대상 객체 위에 있을 때 발생dr..

250313 to-do 리스트 만들기 (1) 챌린지에서 심화과제 (로컬 스토리지, 체크박스)를 추가한 글이다. 필수 조건index.html에 있는 input 요소에 입력된 값(value)과 button 요소를 변수에 할당합니다.새로운 li 요소를 만들고 input 요소에 입력된 값을 textContent로 갖도록 합니다.li 요소는 클릭하면 해당 li 요소가 지워지는 delete 버튼을 가지고 있어야 합니다. 입력창은 초기화되어야 합니다.만약 입력창에 아무것도 입력하지 않은 경우 alert로 유저에게 입력을 요청해야 합니다.3.의 삭제버튼 만들기 🔽const deleteBtn = document.createElement('button'); deleteBtn.onclick = function () { this.parentElement.remov..

javascript/var를 더이상 사용하지 않는 이유 참고모던자바스크립트 Deep Divehttps://velog.io/@wksh229/JavaScript-var-%EC%93%B0%EC%A7%80%EB%A7%88-%EC%A0%9C%EB%B0%9Chttps://batcave.tistory.com/39https://valueengine.tistory.com/15 var의 특징 var는 variable(변수)의 준말로, Javascript ES5에서는 var 키워드만이 변수를 선언하는 유일한 방법이었다. 그러나 ES6부터는 let, const 키워드를 지원하면서 var의 사용을 지양하고있다.var에는 다음과 같은 특징이 있다.function scope(함수 내부에 있다면 선언 위치에 관계없이 사용이 됨)var 키워드 생략 허용중복 선언 허용변수 호이스팅 하..

마진 겹침 현상(margin collapsing) 참고https://developer.mozilla.org/ko/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsinghttps://youtu.be/c19Mjg-ivxc?si=kzFGncB5IBQzRxKihttps://velog.io/@devsaza/likealion006https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin 마진 겹침 현상(마진 상쇄 현상) 여러 블록의 margin 상하 값이 경우에 따라 제일 큰 margin 값을 가진 단일 margin으로 결합(상쇄)되는 현상 (단, float 속성값을 줬거나 position 속성 값이 절대요소(absolute, fixed, sticky...)즉 인접한 요소 간의 위아래 ..

250307 프로그래머스 이번 과제는 블로그에 글을 작성하는 과제는 아니지만, 코딩 테스트 연습 과제라 여기에 정리해둔다. 1. 두 수의 차 : https://school.programmers.co.kr/learn/courses/30/lessons/120803?language=javascriptfunction solution(num1, num2) { var answer = num1 - num2; return answer;} 2. 나이 출력 : https://school.programmers.co.kr/learn/courses/30/lessons/120820?language=javascriptfunction solution(age) { var answer = 2023 - age; return answer;..

Flex vs Grid 참조https://studiomeal.com/archives/197 https://studiomeal.com/archives/533https://www.youtube.com/playlist?list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9 Flex - flexbox : 행 또는 열을 주축으로 설정해 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식플렉스 박스 방식으로 레이아웃을 구성하기 위해 플렉스 컨테이너를 만들며, 플렉스 컨테이너 내에 플렉스 박스 방식으로 배치되는 요소를 플렉스 아이템이라고 한다. 이 때 아이템이 배치된 방향의 축을 메인축(이미지에서는 오뎅꼬치의 느낌?)메인축과 수직인 축을 교차축이라 한다. * flex container에 적용하는 속성 See the Pe..

비기너 트랙 10 - JavaScript 이론 내용 요약 변수 : 컴퓨터와 개발자 사이에 새롭게 규정한 명사변수 선언 시 let 키워드를, 값을 할당 할 때는 = 를 사용한다.let apple = '사과';// 개발자가 컴퓨터에게 새로운 변수 apple을 규정하고, 문자열 '사과' 라는 값을 할당함 함수 : 컴퓨터와 개발자 사이에 새롭게 규정한 동사function countLength(string) { // 함수 countLength 선언, (string)은 함수에서 사용할 변수 return string.length; // string의 length(문자열의 길이)를 반환한다.} - function : 함수를 선언하는 키워드- return : 함수 내부의 코드가 실행된 후 결과를 반환하는 키워드 이렇게 선언한 함수는 다음과 같이 사용할 수 있다./..

비기너 트랙 9 - CSS 이론 (2) 내용 요약 CSS 박스 모델content : 텍스트나 이미지가 들어가는 실제 내용 영역padding : 내용과 테두리 사이 내부 여백border : 테두리, 요소의 경계margin : 요소 외부의 여백, 다른 요소와의 간격 박스 모델.container { width : 200px; padding : 20px; border : 5px solid black; margin : 15px;} CSS 우선 순위!important(우선 적용) > style 속성 (인라인 스타일) > id 선택자 > class 선택자 > 태그 선택자 다만 !important는 가독성이나 성능, 유지보수 측면에서 여러모로 좋지 않기 때문에 되도록 사용하지 않는 것이 좋다.CSS 우선순위p { color: blu..

이전 1 ··· 5 6 7 8 9 10 11 ··· 14 다음

티스토리툴바