無제

🟢  list-style목록(ul, ol, li)의 스타일을 꾸밀 때 자주 사용하는 속성. 🔹 list-style-type (마커의 모양)목록 아이템 앞에 붙는 마커(불릿이나 숫자)의 종류를 지정.ol { list-style-type: decimal; } (Ordered List) 순서가 있는 목록decimal: 숫자. (1, 2, 3) decimal-leading-zero: 0이 붙는 숫자. (01, 02, 03)lower-alpha: 소문자 알파벳. (a, b, c)upper-alpha: 대문자 알파벳. (A, B, C) lower-roman: 소문자 로마자. (i, ii, iii)upper-roman: 대문자 로마자. (I, II, III) ul { list-style-type: disc; }..

📕 UI 디자인 레퍼런스  📕Pinterest - 이미지, 디자인, 예술 관련 소셜 네트워크 서비스 https://kr.pinterest.com/ Behance - 전 세계 디자이너와 예술가의 전시장 https://www.behance.net/ Good Web Design - 국내 베스트 UI/UX 디자인 어워드 https://www.gdweb.co.kr/main/index.asp DB CUT - 국내 UI 디자인 레퍼런스 제공 https://www.dbcut.com/ Awwwards - 글로벌 베스트 UI/UX 디자인 어워즈 https://www.awwwards.com/ MOBBIN - 모바일 앱 디자인 레퍼런스 https://mobbin.com/ Dribbble - 글로벌 트랜디 디자인 레퍼런스 ..

🟢   text style 글자의 모양, 크기, 정렬, 간격 등을 꾸미는 속성. 🔹 text-align (정렬) 텍스트의 가로 정렬 방식을 지정.p { text-align: center; }left: 왼쪽 기준으로 정렬. (기본값)right: 오른쪽 기준으로 정렬.center: 가운데 기준으로 정렬.justify: 양쪽 끝(왼쪽 + 오른쪽)에 맞춰 정렬. 줄 사이 간격을 자동으로 조절해서 양쪽이 딱 맞게 보이도록 한다. 🔹 line-height (줄 간격)텍스트 줄과 줄 사이의 간격(줄 높이)을 지정.p { line-height: 1.5; }문법: 숫자 (line-height: 1.5;)를 입력하며, font-size의 배수로 적용한다.추천 값: 일반 텍스트 (1.5~1.8), 제목 (1.2~1..

🟢   color웹 페이지의 텍스트(글자)의 색을 지정하는 속성.상속: 부모 요소에 지정된 color 값은, 특별한 설정이 없는 한 자식 요소로 전달(상속)된다.확장: 텍스트 외에도 테두리(border)나 구분선(hr) 등에 색상을 줄 때는 border-color, background-color 처럼 접두사가 붙은 속성을 사용한다. 🎨 주요 방식 (4가지) 🎨 1️⃣ Color Names (색상 이름) 브라우저가 미리 정의해둔 색 이름을 사용하는 방식.header { color: red; /* 빨강 */ color: blue; /* 파랑 */ }예: red, blue, gold, transparent(투명) 등. (약 140개 색상만 사용 가능) 직관적이지만 세밀한 표..

🔗 Google Fonts 🔗 https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com Get embed code: 1️⃣ 외부 서비스 이용 (CDN)Download: 2️⃣ 서버에 직접 업로드 🔗 Icons Fonts 🔗 https://fontawesome.com/ Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. A..