hanker

온라인 상에서 그라데이션 효과를 도와주는 사이트들이 있어서 정리해본다. 1. 그라데이션 생성기https://designbase.co.kr/gradient-generator/ 그라데이션 생성기 | 디자인베이스웹으로 빠르게 그라데이션 컬러를 만들고 이미지로 출력하거나 CSS 코드로 복사 할 수 있습니다. 수 많은 예시 그라데이션 컬러를 확인해보세요.designbase.co.kr 2. CSS Gradienthttps://cssgradient.io/ CSS Gradient – Generator, Maker, and BackgroundAs a free CSS gradient generator tool, this website lets you create a colorful gradient background ..

CSS linear-gradient는 두 개 이상의 색상 간에 매끄러운 전환 효과를 만드는 CSS 함수이다. Linear-Gradient의 주요 장점성능 최적화: 이미지 파일 대신 CSS 코드로 구현하여 로딩 속도 향상반응형 디자인: 모든 화면 크기에 자동으로 적응편집 용이성: 코드 수정만으로 즉시 변경 가능SEO 친화적: 이미지 alt 태그 없이도 시각적 효과 구현 기본 사용 방법 /* background: linear-gradient(red, blue); */background: linear-gradient( [direction | angle], color-stop1 [position], color-stop2 [position], ...); 구성 요소 1. 방향 또는 각도 (선택사항)to to..

CSS Position 속성은 HTML 요소가 웹페이지 내에서 어떻게 배치될지를 결정하는 핵심 CSS 속성이다.기본적으로 모든 HTML 요소는 문서의 정상적인 흐름(normal document flow)을 따라 배치되지만, position 속성을 사용하면 이 흐름에서 벗어나 원하는 위치에 요소를 정확히 배치할 수 있다. CSS Position 속성에는 5가지 주요 값이 있으며, 각각 고유한 특성과 용도를 가지고 있다. 1. position static (기본값) .element { position: static;}모든 HTML 요소의 기본값문서의 정상적인 흐름을 따라 배치top, right, bottom, left 속성이 적용되지 않음z-index 속성도 적용되지 않음기본적인 블록 레이아웃이 필요하..

HTML에서 앵커 태그()는 경로 이동을 할 때에 사용된다.이 앵커태그는 기본적으로 밑 줄이 그어져 있는데, style을 추가하여 없앨 수 있다.  1. 기존 태그 사용 시네이버 바로가기  2. 밑 줄 제거한 태그 (text-decoration: none) 태그 내 text-decoration 옵션을 사용하면 밑줄이 제거된다.네이버 바로가기

HTML에서 요소를 중앙 정렬하는 방법은 여러가지가 있다. 수직 또는 수평 정렬을 어떻게 구현할지에 따라 다른 접근 방식을 취한다. 1. Flexbox 사용 부모 요소에 스타일을 설정하여 자식 요소를 수평과 수직 모두 중앙에 배치한다..parent { display: flex; align-items: center; justify-content: center; } 중앙 이 방식은 간단하게 부모 요소의 속성만 조정하여 자식 요소를 중앙으로 배치할 수 있어 매우 직관적이다. 2. Grid 사용 1번과 마찬가지로 부모 요소에 스타일을 설정하여 자식 요소를 중앙 정렬 시킨다..parent { display: grid; place-items: center; } 중앙 CSS Grid는 두 축(수평 및 수직)을 동시에..

태그의 마우스 커서 손가락 모양으로 변경 태그 내에서 변경 시 style="cursor : pointer;" #mouseOver{ cursor: pointer }

참고 : https://www.youtube.com/watch?v=omJfspwjnZk input[type=text]{ width:100%; border:2px solid #aaa; border-radius:4px; margin: 8px 0; outline: none; padding:8px; box-sizing: border-box; transition:.3s; } input[type=text]:focus{ border-color:dodgerBlue; box-shadow:0 0 8px 0 dodgetBlue; } css 적용 시