fetch apiasync function 함수이름() { const name = document.getElementById('name').value fetch(`http://localhost:3000/sound/${name}`) .then((response) => response.json()) .then((data) => { console.log(data) document.getElementById('name').value = data });}// 최신 문법async function logJSONData() { const response = await fetch("http://example.com/movies.json"); const jsonData = await..

자바 스크립트에서 자주 쓰이는 함수setTimeout : 정해진 시간에 호출하는 함수 (1번)setInterval : 정해진 시간마다 호출하는 함수 (여러번) 크롬에서 인터벌이 1초보다 짧으면 1초로 바꾼다. 함수를 정리하는 방법 (취소)clearTimeoutclearInterval requestAnimationFrame : 기존에는 인터벌을 이용해 애니메이션을 조작했는데 성능 저하 때문에 등장했다. 사용법requestAnimationFrame( () => console.log("Hi") ); const sayHi = () => { console.log("Hi"); requestAnimationFrame(sayHi);}requestAnimationFrame(sayHi); 이런식으로 콜백함수로 사용하..

기본 값은 static으로 지정되어 있음. offset 으로 위치를 조정해주려면 relative 로 포지션을 변경해줘야 함. absolute

inline block 차이 인라인은 줄바꿈 없음 블럭 혼자서 해당 라인을 모두 씀 display iline 또는 block 속성을 주어 바꿀 수 있음. box model inline 에서는 width와 height 값을 무시함. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere distinctio reiciendis culpa deleniti totam non maiores at amet ipsum. Quidem consequatur eos quod ratione autem ipsum beatae sint nobis! Qui! Lorem ipsum dolor sit amet consectetur,..

px : 절대값em, % : 상대값 대부분의 브라우저 폰트 사이즈 기본값 : 16px, 1em, 100% px% : 지정된 사이즈의 상대적인 사이즈를 결정. 기본이 10px로 지정되어 있으면 50% 지정시 5px로 변경em : em은 배수 단위 상속받은 요소의 사이즈 기준rem : 최상위 요소의 사이즈 기준 vw / vh : viewport 단위 브라우저 너비를 기준으로 한 상대적 사이즈를 의미vw : viewport 너비의 1/100vh : viewport 높이의 1/100vmin : viewport 너비 또는 높이 중 작은 쪽의 1/100vmax : viewport 너비 또는 높이 중 쪽의 1/100

id 선택자 : 특정 요소를 선택할 때 사용 class 선택자 : 특정 집단의 여러 요소를 한 번에 선택 결합 선택자일치 선택자 #EF자식 선택자 (자식만) #E>F자손 선택자 (자식과 손자까지 전부) #E F 동위 선택자인접 형제 선택자 #E+F일반 형제 선택자 #E~F그룹 선택자 선택 방법 E, F 의사 선택자의사 요소선택자설명::first-letter콘텐츠의 첫글자를 선택::first-line콘텐츠의 첫줄 선택::after콘텐츠의 뒤에 위치하는 공간을 선택 일반적으로 content 프로퍼티와 함께 사용::before콘텐츠의 앞에 위치하는 공간을 선택::selection드래그한 콘텐츠를 선택 after, before 는 앞이나 뒤에 content를 추가하고 스타일을 적용할 수 있음. ..

1. 모던 CSS (Modern CSS) 현대 CSS의 주요 기능.CSS 변수 (Custom Properties) : --main-color: #3498ab; 와 같이 변수를 선언하고, var (--main-color) 로 재사용할 수 있음. 다크 모드 구현이나 전체적인 테마 변경이 매우 쉬워짐.Flexbox와 Grid : 복잡한 계산 없이도 유연하고 반응형인 레이아웃을 손쉽게 만들 수 있음. 트랜지션(Transition)과 애니메이션(@keyframes) : 요소의 상태 변화나 복잡한 움직임을 부드러운 애니메이션으로 구현.계산 함수 (`calc()`) : width: calc(100% - 80px); 처럼 서로 다른 단위(%, px, em 등)를 섞어서 동적으로 크기를 계산할 수 있어 반응형 디자인에 ..