개발 공부/HTML7 [HTML] 버튼 클릭 시 다른 페이지로 이동하는 법 (a 태그 vs window.location) 💡 버튼을 눌렀을 때 다른 페이지로 이동시키고 싶다면?웹페이지에서 버튼을 클릭하면 다른 페이지로 이동하는 기능이 필요한 경우가 많아요. 태그를 써도 되고, JavaScript의 window.location을 써도 가능해요.이 글에서는 두 가지 방법의 차이점과 사용 예제를 알려드립니다.🛠️ 방법 1. a 태그 사용하기 (HTML만으로 이동)가장 간단한 이동 방법입니다. 이동하기✅ 장점:HTML만으로 구현 가능새 탭에서 열고 싶으면 target="_blank" 추가 새 탭에서 이동🛠️ 방법 2. JavaScript window.location 사용하기JS로 제어하고 싶을 때 사용하는 방법입니다. 이동하기✅ 장점:이동 시점이나 조건을 JS 코드로 더 세밀하게 제어 가능예: 로그인 확인 후 이동, 확.. 2025. 5. 2. [HTML] div 안의 이미지 비율 유지하며 꽉 채우는 법 (object-fit 활용) 💡 div 영역 안에 이미지를 꽉 채우면서 비율은 유지하고 싶다면?웹 페이지를 만들 때 이미지를 div 안에 채우고 싶은데,이미지 비율(가로 세로 비율)은 그대로 유지하면서, 박스는 깔끔하게 꽉 채우고 싶을 때가 많아요.이럴 때는 CSS의 object-fit 속성을 사용하면 간단하게 해결할 수 있습니다.🛠️ 이미지 비율 유지하며 div 안에 꽉 채우기: 코드 예제와 설명✅ 기본 예제 (object-fit: cover) 🎯 포인트 설명object-fit: cover; 👉 이미지 비율 유지 + 박스를 꽉 채움 (잘리는 부분 생김)width: 100%; height: 100%; 👉 div 영역에 맞춰 이미지 크기 조정overflow: hidden; 👉 넘치는 이미지를 잘라서 깔끔하게 맞춤⚡ obj.. 2025. 5. 1. [HTML] div 영역을 화면 정중앙에 배치하는 법 (flex + height 100vh 활용) 💡 div 박스를 화면의 딱 가운데(가로 + 세로 중앙)에 위치시키고 싶다면?웹 페이지를 만들다 보면 어떤 요소를 화면의 정확한 중앙에 배치하고 싶을 때가 많아요.예전에는 position: absolute, top: 50%, transform: translate(-50%, -50%) 같은 방법을 썼지만,요즘은 CSS flexbox와 height: 100vh 조합으로 더 쉽게 구현할 수 있습니다.🛠️ 화면 정중앙 배치: 코드 예제와 설명✅ 기본 예제 (flexbox + height 100vh) 화면 정중앙 박스🎯 포인트 설명height: 100vh; 👉 화면 전체 높이 사용 (Viewport Height)display: flex; justify-content: center; align-items:.. 2025. 4. 30. [HTML] div 안의 글자 수직 가운데 정렬하는 법 (flex 활용) 💡 div 안의 글자를 세로(수직) 가운데로 정렬하고 싶다면?웹페이지에서 div 영역 안의 텍스트나 버튼을 세로(수직) 방향으로 가운데 정렬하고 싶을 때가 많아요.예전에는 padding, line-height, position을 이용했지만,지금은 CSS flexbox를 사용하면 훨씬 쉽고 깔끔하게 설정할 수 있습니다.🛠️ div 안의 글자 수직 가운데 정렬: 코드 예제와 설명✅ 기본 예제 (flexbox 사용) 가운데 정렬된 텍스트🎯 포인트 설명display: flex; 👉 flexbox를 사용하겠다는 선언justify-content: center; 👉 가로 방향 가운데 정렬align-items: center; 👉 세로 방향 가운데 정렬width, height: 박스 크기 설정border, .. 2025. 4. 29. [HTML] input 클릭 시 테두리 색상 바꾸는 법 (focus 속성 활용) 💡 input 박스를 클릭했을 때 테두리 색을 바꾸고 싶다면?웹페이지에서 input 박스를 클릭하거나 포커스될 때 테두리(border) 색상이 자동으로 바뀌지 않아서직접 스타일을 지정해야 하는 경우가 많아요.이 글에서는 CSS의 :focus 선택자를 활용해 클릭 시 테두리 색상 변경 방법을 알려드립니다.🛠️ input 클릭 시 테두리 색상 변경: 코드 예제와 설명✅ 기본 예제🧩 포인트 설명input:focus 👉 클릭하거나 키보드로 선택됐을 때 적용outline: none; 👉 기본 포커스 효과(파란 테두리)를 제거border-color: 원하는 색; 👉 원하는 색상으로 변경 가능색상 추천:파란색: blue연두색: limegreen빨간색(경고): red⚡ 함께 알아두면 좋은 속성속성역할bord.. 2025. 4. 28. [HTML] input placeholder 색상 바꾸는 법 (::placeholder 활용) 💡 placeholder 색이 너무 연해서 안 보인다면?input 박스에서 placeholder(힌트 텍스트)가 너무 흐릿해서 사용자들이 잘 못 보는 경우가 많아요.이럴 땐 CSS의 ::placeholder 선택자를 이용해 placeholder 색상을 직접 설정할 수 있습니다.이 글에서는 placeholder 색상 변경 방법과 실무에서 자주 쓰는 예제를 알려드립니다.🛠️ placeholder 색상 바꾸기: 코드 예제와 설명✅ 기본 예제 (인라인 스타일) ❌ 위 코드는 placeholder 색상이 아니라 입력된 글자 색상을 바꾸는 방법이에요!placeholder 색상을 바꾸려면 아래처럼 CSS의 ::placeholder 사용해야 합니다.🎯 placeholder 색상 변경 (정석 방법)🧩 다양한 pl.. 2025. 4. 25. 이전 1 2 다음 반응형
