無제

[한글 폰트]Noto Sans KRPretendardSpoqa Han Sans NeoNanum GothicSUIT [영문 폰트]InterPoppinsMontserratDM SansPlayfair Display 노토 산스 케이알 가장 많이 쓰는 기본 한글 웹폰트 품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을 얼음에 능히 그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는..

👀 스캔성 : 사용자를 헷갈리게 하지 말지어다 👀네가 이해 못하면 사용자도 100% 못 한다. 🖱️ 명확성 : 클릭할 수 있는 것은 티 나게 만들지어다 🖱️숨바꼭질은 게임에서만 하자. 🎯 집중성 : 한 화면에 너무 많은 것을 담지 말지어다 🎯디자인도 다이어트가 필요하다. 🔄 일관성 : 일관성을 버리지 말지어다 🔄어제랑 오늘이 다르면 배신이다. 👆 계층성 : 시선의 흐름을 설계할지어다 👆사용자가 어디를 봐야 할지 고민하게 두지 말라. 💬 피드백 : 반응을 침묵시키지 말지어다 💬눌렀으면 뭐라도 일어나야 한다. 🧩 단순성 : 선택지를 줄일지어다 🧩많이 주는 건 친절이 아니라 부담이다. 🛡️ 예방성 : 에러는 미리 막을지어다 🛡️좋은 UX는 에러를 설명하는..

1️⃣ (Unordered List) 사용 언제 사용?메뉴가 항목들의 리스트일 때, 즉 홈, 소개, 서비스, 연락처 같은 링크 모음일 때 적합.장점의미론적: HTML 구조상 ‘목록’을 표현하므로 스크린 리더가 이해하기 좋음 → 접근성 향상CSS로 스타일링이 쉬움 (display: flex 등으로 가로 메뉴 가능)SEO 친화적: 검색 엔진이 구조를 쉽게 이해예시 Home About Services Contact https://www.samsons.kr/ Samson:ArtArtist Samson's work and lifewww.samsons.kr 2️⃣ 사용 언제 사용?메뉴가 단순한 컨테이너 형태이거나, 리스트가 아닌 복잡한 UI 요소를 감싸야 할 때.단점의미가 없음..

👇🏻  HTML 신상품 목록 상품 1 가격 : 12,345원 상품 2 상품 2 설명 텍스트 가격 : 12,345원 상품 3 상품 3 설명 텍스트 가격 : 12,345원 👆🏻  14/results/product.html 👇🏻  CSS /* 전체 컨테이너 영역 설정 */#container { max-width: 1000px; margin: 20px..

중앙 박스 top: 50%;left: 50%;/* 박스의 왼쪽 상단 꼭짓점을 화면 정중앙에 가져다 놓는다. (이 상태에선 박스가 우측 하단으로 쏠려 보인다.) */transform: translate(-50%, -50%);/* 박스 자신의 너비($X$)와 높이($Y$)의 딱 절반만큼 왼쪽과 위쪽으로 끌어당긴다. 결과적으로 박스의 정중앙이 화면의 정중앙과 일치하게 된다. */

🟢 perspective3D 공간에서 카메라와 요소 사이의 거리를 설정하여 입체감(원근감)을 결정하는 속성. 🔹 perspective@keyframes rotate { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }} perspective(값) 의 (값)은 카메라의 거리.값: 작다 (100px) → 의미: 카메라가 가까움 → 결과: 원근감(왜곡) 큼 → 강한 3D값: 크..

🟢 animation 요소의 스타일을 시간에 따라 다양한 효과 및 변화시키는 기능. ◼ @keyframes (애니메이션의 설계도)애니메이션의 시간의 흐름에 따른 스타일 변화 단계를 정의.@keyframes 애니메이션이름 { from { /* 상태 */ } to { /* 상태 */ }}@keyframes 애니메이션이름 { 0% { /* 시작 상태 */ } 50% { /* 중간 상태 */ } 100% { /* 끝 상태 */ }}from (시작) → 0%, to (끝) → 100%. 중간 단계(예: 25%, 50%, 75%) 정의 가능. 🎯 주요 속성 🎯 🔹 animation-name: 이름.@keyframes에서 정의한 이름. 🔹 animation-duration: 완료되는데 걸리는..

🟢 transition요소의 스타일이 변할 때, 변화 과정을 일정 시간 동안 점진적으로 부드럽게 애니메이션 효과처럼 보여주는 속성. 🎯 핵심 속성 4가지 🎯 🔹 transition-property 변화 줄 대상 속성 지정. .prop-box { width: 100px; height: 100px; background-color: #e74c3c; /* 배경색(background-color) 변화에만 1초간 효과를 줍니다. */ /* 너비(width) 변화는 즉시 일어납니다. */ transition-property: background-color; transition-duration: 1s;}.prop-box:hover { background-color: #8e44ad; wid..

🟢 filter 속성 요소에 그래픽 효과(시각적 효과)를 적용하는 함수. ◼ 문법.functions { filter: blur(5px);}filter: function(value); ◼ 함수 종류 🔹 blur(): 흐림 정도. 🔹 brightness(): 밝기 정도. (0%, 0: 검은색 / 100%, 1: 변화없음 / 200%, 2: 밝기 2배 증가) 🔹 contrast(): 대비 정도. (0%: 회색 / 100%: 변화없음 / 200%: 대비 2배 증가) 🔹 drop-shadow(): 그림자 정도. (가로 오프셋, 세로 오프셋, 흐림 정도, 번짐 정도, 그림자 색) 🔹 grayscale(): 회색조 강도. (0%: 컬러 / 100%: 흑백) 🔹 invert(): 반전 정도. 🔹 s..