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일반적인 문서 ..

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

개념em, rem을 이용하여 상대적인 크기의 폰트를 적용할 때처럼레이아웃에도 비율에 기반한 개념을 적용할 수 있다 부모 요소의 크기에 비례하여 자식의 요소의 크기가 변하는 방식을 이용하면 된다  단위%부모 요소에 대한 백분율 값 보통 부모 요소와의 상대적 크기를 지정할 때 사용한다부모 요소 대비 해당 요소가 차지하는 비율을 설정하면 된다 값을 정확하게 모르겠을 때에는 계산기를 이용해서해당 요소의 크기 / 부모 요소의 크기의 값을 구하면 된다 너비와 높이, 여백, 글자 크기 등에 사용할 수 있다- width는 부모 요소의 width 크기에 비례하여 계산- height는 부모 요소의 height 크기에 비례하여 계산- font-size는 부모 요소의 글자 크기에 비례하여 계산- margin과 padding의..