pretendard 폰트 사용 방법 PretendardPretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는cactus.tistory.com  GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform - orioncactus/prete..

transformHTML 요소를 회전, 크기 조절, 기울이기, 이동 효과를 나타낼 때 사용한다transform: 속성값(함수); transform 함수📌 translate(tx, ty)지정한 크기만큼 x축, y축으로 이동한다.box1 { transform: translate(20px, 20px);} 📌 translateX(tx)지정한 크기만큼 x축으로 이동한다.box1 { transform: translateX(20px);} 📌 translateY(ty)지정한 크기만큼 y축으로 이동한다.box1 { transform: translateY(20px);} 📌 scale(sx, xy)지정한 크기만큼 x축과 y축으로 확대·축소한다.box1 { transf..

overflow정해진 영역을 초과하는 데이터가 있을 때 처리하는 방식overflow: 속성; 속성의미visible기본값 - 정해진 데이터 영역을 넘어도 내용이 그대로 보여짐hidden정해진 데이터 영역을 넘기면 내용을 잘라버림auto정해진 데이터 영역을 넘기면 스크롤이 생성됨  예시와 함께 overflow의 개념을 살펴보자visible Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quibusdam quidem odit eligendi! Rerum modi dicta repellat et officiis, praesentium esse libero excepturi doloribus, nihil..

position문서 상에 요소를 배치하는 방법을 정의한다position: 배치방법;top: 위에서부터 얼만큼 떨어뜨릴것인가;right: 오른쪽에서부터 얼만큼 떨어뜨릴것인가;bottom: 아래에서부터 얼만큼 떨어뜨릴것인가;left: 왼쪽에서부터 얼만큼 떨어뜨릴것인가;postion을 통해 요소의 배치 방법을 정하면top, bottom, right, left로 최종 위치를 결정한다  position 속성값속성값의미static기본값 - 요소를 일반적인 문서 흐름에 따라 배치한다relative일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 적용한다absolute일반적인 문서 흐름에서 제거하고, 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다fixed일반적인 문서 ..

사용 방법addEventListener(event, callback function)HTML에서 특정 이벤트가 발생했을 때 콜백 함수를 실행한다target.addEventListener("click", function() {}) 이점- 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다- 같은 타겟에 대해 다수의 핸들러를 등록할 수 있다- 추가적인 옵션 사항이 제공된다  이벤트 종류마우스 이벤트이벤트명동작click요소에 마우스를 클릭했을 때 이벤트가 발생한다dbclick요소에 마우스를 더블클릭했을 때 이벤트가 발생한다mouseover요소에 마우스를 오버했을 때 이벤트가 발생한다mouseout요소에서 마우스를 아웃했을 때 이벤트가 발생한다mousedown요소에 마우스를 눌렀을 때 이벤트가..

개념미디어 쿼리(Media Query)미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기 or 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치구성 요소- 미디어 타입 : screen, print, speech...- 조건에 대한 물음(Query문) : 미디어의 조건을 작성함  사용 방법미디어 쿼리 구조미디어 타입을 설정한 뒤에 화면의 크기에 따라 어떻게 변할 것인지 조건과 스타일을 작성한다화면의 너비를 조건으로 사용하는 경우가 가장 많다 width : 지정한 크기에만 스타일을 적용한다 (거의 잘 사용하지 않음)max-width : 지정한 크기 이하부터 스타일을 적용한다min-width : 지정한 크기 이상부터 스타일을 적용한다@media 미디어_타입 and 조건에_대한_물음 { // 미디어 타입과 조건..