無제

웹 개발자들의 놀이터이자 포트폴리오 창고인 CodePen(코드펜) 에 오신 것을 환영합니다!코드펜은 별도의 설치 없이 브라우저에서 바로 HTML, CSS, JavaScript 코드를 작성하고결과를 실시간으로 확인할 수 있는 아주 유용한 도구예요.사용법을 핵심만 콕콕 집어 정리해 드릴게요.1. 회원가입 및 로그인가장 먼저 계정을 만들어야 내가 만든 코드(Pen)를 저장하고 나중에 다시 볼 수 있습니다.방법: CodePen 메인 페이지 우측 상단의 [Sign Up] 클릭추천: GitHub 계정이 있다면 **[Sign Up with GitHub]**를 추천해요. 개발자로서 협업하거나 나중에 포트폴리오를 관리하기 훨씬 편해집니다. (물론 이메일 가입도 가능합니다.)2. 기본 환경설정 (Settings)코딩 스타..

🟢   gradients배경 이미지 대신 CSS 코드만으로 두 개 이상의 색상이 부드럽게 변화하는 배경을 만드는 속성. 🔹  linear gradients (선형 그라데이션) 일정한 방향(직선)을 따라 색상이 부드럽게 변화하는 방식..gradients { background: linear-gradient(blue, pink); /* 위에서 아래로(기본값), 파란색에서 분홍색으로 */ background: linear-gradient(45deg, #f3bc2c, #e74c3c); /* 오른쪽 위 방향으로 45도 기울여서 전개 */ background: linear-gradient(to right, red 0%, yellow 50%, green 100%); /* 왼쪽에서 오른..

🟢   background 요소의 배경 색상, 이미지, 위치, 반복 방식 등을 설정하는 속성. 1️⃣ 개별 배경 속성배경을 세밀하게 제어하기 위한 주요 속성. 🔹 background-color배경 색상 지정..box { background-color: #3498db;}색상 이름Hex Code (16진수 코드) RGB / RGBA HSL / HSLA 🔹 background-image배경 이미지 경로 지정..box { background-image: url('image.jpg');} 🔹 background-repeat이미지 반복 여부..box { background-repeat: no-repeat;}repeat: 반복. (기본값)no-repeat: 반복 없음.repeat-x: 가로 방향..