babydevelopbabydevelop

포지션 position 속성 position 속성은 HTML 요소가 위치를 결정하는 방식을 설정합니다. CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있습니다. 1. 정적 위치(static position) 지정 방식 2. 상대 위치(relative position) 지정 방식 3. 고정 위치(fixed position) 지정 방식 4. 절대 위치(absolute position) 지정 방식 정적 위치(static position) 지정 방식 HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식입니다. position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다..

CSS 글꼴 CSS를 사용하면 웹 페이지에 나타나는 글꼴(Font)을 다양하게 설정할 수 있습니다. CSS에서 사용할 수 있는 font 속성은 다음과 같습니다. 1.font-family 2.font-style 3.font-variant 4.font-weight 5.font-size CSS 글꼴 집합(font-family) CSS에는 두 가지의 글꼴 집합(font family)이 존재합니다. - generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등) - font family : 특정 글꼴 집합 ("Times", "Courier" 등) font-family 속성 font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 ..

document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); //window.scroll(0, 1000); //window.scroll({left:0 , top:1000}); //window.scroll({left:0 , top:1000, behavior: "smooth"}); // window.scrollTo(0, 1000); // window.scrollTo({left:0 , top:1000}); // window.scrollTo({left:0 , top:1000, behavior: "smooth"}); // window.scrollBy(0, 1000)..

CSS에서는 선택자(selector)를 통해서 웹페이지의 특정 부분만을 선택하여 원하는 스타일을 적용합니다. Type Selector CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector) 입니다. 타입 선택자를 사용하면 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다. 예를 들어, 웹페이지 상의 모든 요소의 글꼴 두께를 스타일하기 위한 CSS 코드는 다음과 같습니다. strong { font-weight: 500; } Class Selector 타입 선택자와 더불어 가장 많이 사용되는 CSS 선택자는 클래스 선택자(Class selector) 입니다. . 기호에 클래스 이름을 붙여서 사용하며 클래스 선택자로 특정 clas..

window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; document.querySelector(".clientY").innerText = event.clientY; document.querySelector(".offsetX").innerText = event.offsetX; document.querySelector(".offsetY").innerText = event.offsetY; document.querySelector(".pageX").innerText = event.pageX; document.querySelector(".pageY").innerText..

조건문 조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다. 조건문의 종류에는 if문, else문, else if, switch문이 있습니다. if문 if문은 표현식 결과과 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않습니다. if(조건식) 자바스크립트 코드 } 적용 예시 var num = prompt("하루의 몇시간 공부하시나요?", "0"); if(num >= 5){ document.write("공부를 열심히 하시네요."); //5시간 이상일결우 결과값(true) } document.write("조금 더 공부하셔야 합니다.") //5시간 미만일경우 결과값(false) 조건식에 논리형 데이터가 아닌 다른 형이 오..

연산자. 연산자란 프로그래밍에서 쓰이는 기호입니다. 이를 톨해 계산 작업을 합니다 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 비교등을 하는 작업을 연산 작업이라 합니다. 자바스크립트에서 사용하는 연산자에는 산술, 문자 결합, 대입, 증감, 비교, 논리, 삼항 조건 연산자가 있습니다. 산술연산자 산술 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다. 산술 연산자로 연산을 하기위해서는 연산 데이터가 반드시 2개 있어야 합니다. 산술 연산자의 종류와 기본형 종류 기본형 설명 + A+B 더하기 - A-B 빼기 * A*B 곱하기 / A/B 나누기 % A%B 나머지 문자 결합 연산자 문자 결합 여산자는 피연산자(연산 대상 데이터)가 문자형 데이터입니다. 여려 개..

IR 기법 ir기법을 사용하는 이유 의미있는 이미지의 대체 텍스트를 제공하는 경우 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 Phark Method - 이미지 대체 텍스트 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법 .ir-pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } WA IR - 이미지 대체 텍스트 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그..