pogun 코딩 공부 저장소

1. 기본적인 HTML 페이지 이동 1-1. 태그를 사용한 이동 index Two로 이동: href 속성을 이용해 다른 페이지로 이동 : 사용자가 클릭하면 새로운 페이지가 열린다.1-2. 을 이용한 이동 index Three로 이동: form 태그의 action 속성으로 이동할 URL을 지정할 수 있다.: submit 버튼을 누르면 해당 페이지로 이동1-3. JavaScript를 이용한 이동 const goPage = () => { location.href = "./indexThree.html";}: location.href를 사용하면 JavaScript로 동적으로 페이지를 이동할 수 있다.2. JavaScript를 이용한 페이지 탐색 2-1. history.back(): 이전 페이지로 이..

1. CSS Animation 속성이란?: CSS animation 속성을 활용하면 HTML 요소에 다양한 애니메이션 효과를 적용할 수 있다.: 이번 글에서는 @keyframes를 사용한 색상 변경 및 위치 이동 애니메이션을 예제로 작성했습니다.1-1. 색상이 바뀌는 애니메이션: @keyframes를 이용하여 요소의 배경색이 변경되는 애니메이션을 만들 수 있다..box1 { animation-name: ani1; animation-duration: 1s;}@keyframes ani1 { from { background: red; } to { background: blue; }} 설명:: animation-name: ani1; → 적용할 애니메이션 이름을 ani1로 지정: animat..

CSS Transform란?: CSS의 transform 속성을 활용하면 요소의 크기를 조정하거나 위치를 이동시키고, : 회전하거나 왜곡하는 등의 다양한 변형 효과를 줄 수 있다.: scale, translate, rotate, skew, 그리고 transform-origin을 활용한 변형 방법을 정리하겠다!1. 크기 변형 (scale) : scale() 함수는 요소의 크기를 확대하거나 축소하는 데 사용된다..box1:hover { transform: scale(1.5); /* 요소의 크기를 1.5배 확대 */} 추가 설명: : scaleX(n): X축 방향으로 n배 확대/축소 : scaleY(n): Y축 방향으로 n배 확대/축소: scale(n, m): X축과 Y축을 각각 n배, m배 확대/축소 ..

기본 예제 코드*{margin: 0; padding: 0;}.box1{padding: 20px; margin-bottom: 10px; background:#ccc;}.box1 p{width: 100px; height: 100px; margin: 0; background:#f03;}.box1:hover p{width: 300px;}: 이렇게하면 마우스를 박스에 갖다대면 자식 박스 크기가 한번에 width: 300px로 바뀜transition 적용 후*{margin: 0; padding: 0;}.box1{padding: 20px; margin-bottom: 10px; background:#ccc;}.box1 p{width: 100px; height: 100px; margin: 0; background:#f0..

1. 문자열 가져오기let msg = document.getElementById("msg").innerHTML;: HTML 문서에서 특정 id를 가진 요소의 내용을 가져와 msg 변수에 저장2. 문자열 길이 확인let len = msg.length;console.log(len);: length 속성을 사용하면 문자열의 길이를 확인할 수 있다.: 이는 문자열 내의 문자 개수를 반환3. 특정 문자 위치 찾기 (indexOf, lastIndexOf)let pos = msg.indexOf('자동차');console.log(pos);: indexOf() 메서드는 특정 문자열이 처음 등장하는 위치(인덱스)를 반환 : 만약 해당 문자열이 없다면 -1을 반환let lastPos = msg.lastIndexOf('자동차..

1. JavaScript의 진수 변환변환 유형코드 예제결과 2진수 → 10진수 parseInt("10000000", 2) 128 16진수 → 10진수 parseInt("80", 16) 128 10진수 → 2진수 (128).toString(2) "10000000" 10진수 → 16진수 (128).toString(16) "80" 2진수 → 16진수 parseInt("10000000", 2).toString(16) "80" 16진수 → 2진수 parseInt("80", 16).toString(2) "10000000" 10진수 -> 다른 진수로 변환 (toString() 활용)let num = 128;// 10 -> 2 (2진수 변환)let number2 = num.toString(2);..

1. JavaScript에서 버튼 클릭 이벤트 처리 방법 1-1. onclick 속성 사용 (ES5 방식)document.getElementById("btn").onclick = function() { console.log("버튼 클릭");};: document.getElementById("btn")을 사용해 버튼 요소를 가져온 후, onclick 속성을 통해 클릭 이벤트를 설정: 함수 내부에서 console.log()를 이용해 "버튼 클릭"이라는 메시지를 출력1-2. 별도 함수 정의 후 onclick에 할당document.getElementById("btn").onclick = btnClick;function btnClick() { console.log("button 클릭!");}: btnC..

: JavaScript의 Date 객체를 사용하여 현재 날짜 및 시간 출력, 특정 날짜 설정, 개별 날짜 요소 추출하는 방법 1. HTML 기본 구조 지금시간 : 현재 시간을 표시 : 클릭하면 현재 시간을 출력하는 함수를 실행 : 특정 날짜를 설정하고, 그 정보를 표시2. 현재 시간 표시 (setInterval 활용) displayDate() 함수: 현재 시간을 가져와서 화면에 출력 function displayDate(){ document.getElementById("demo").innerHTML = Date();}: Date()를 호출하면 현재 날짜 및 시간이 문자열 형태로 반환 : document.getElementById("demo").innerHTML = Date();     ..

1. HTML 기본 구조 설정태그 작성: : 사용자가 클릭하면 makeElement() 함수를 실행하여 태그를 생성 : : 줄 바꿈 역할 : : 새로운 요소들을 추가할 영역2. makeElement() 함수: 새로운 HTML 요소 생성기능설명 document.createElement("태그명") 새로운 HTML 요소 생성 element.innerHTML = "내용" 요소 안에 텍스트 삽입 document.body.appendChild(요소) 에 요소 추가 document.getElementById("id").appendChild(요소) 특정 id를 가진 요소에 추가 element.setAttribute("속성", "값") 속성 설정 (input의 type, placeholder 등) a..

: 이런식으로 "[ ]" 대괄호 안에 사용!: .box3 클래스에 a태그 안에 target속성을 가지면 색을 넣어라.: 마친가지로 title 속성을 가진 a 태그한테 색을 넣어라.href$='hwp' : hwp로 끝나는 태그한테 밑줄을 없애라.href*='hwp' : 포함하는title^='en' : 시작하는속성 선택자선택자[속성] 선택자[속성="값"]단일 속성 선택선택자[속성="값"], 선택자[속성="값"] 속성 다중 선택선택자[속성$="값"]값으로 끝나는선택자[속성*="값"]값을 포함하는선택자[속성^="값"]값으로 시작하는