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 요소 중에서 가장 많이 사용하는 span 태그와 div 태그에 대해서 알아보자. 1. span 태그 span은 인라인 요소의 대표주자다. 인라인 요소의 특성 줄바꿈이 일어나지 않는다내용만큼의 공간만 차지한다높이와 너비를 직접 설정할 수 없다텍스트나 다른 인라인 요소들과 나란히 배치된다이 문장에서 빨간색 글자만 강조해줘 span 태그는 주로 텍스트의 일부분을 꾸밀 때 사용한다. 문장 중간에 색깔을 바꾸거나 폰트를 바꿀 때 유용하다. 2. div 태그 div는 division의 줄임말로, HTML에서 가장 기본적인 블록 레벨 요소 블록 레벨 요소의 특성 항상 새로운 줄에서 시작한다가로폭을 전체 너비만큼 차지한다높이와 너비를 자유롭게 설정할 수 있다다른 블록 요소들을 포함할 수 있다 제목 ..

JSP(JavaServer Pages)에서 다른 JSP 파일을 포함하는 방법에 대해서 알아보자.주로 사용 목적에 따라 Static Include와 Dynamic Include로 나뉜다. 1. 정적 include 컴파일 시점에 포함: 소스 코드 자체가 JSP 변환 전에 물리적으로 합쳐짐단일 서블릿 생성: 포함된 모든 파일이 하나의 서블릿으로 컴파일됨변수 공유: 포함된 모든 파일이 같은 스코프를 공유함성능 우수: 한 번 컴파일되어 서블릿이 한 번만 생성되므로 실행 속도가 빠름정적 콘텐츠: 컴파일 후에는 변경 불가능 작용 상황자주 변경되지 않는 공통 헤더, 푸터공통 변수 선언이나 메서드 정의사이트 전체에서 공통으로 사용되는 상수나 설정성능이 중요한 부분2. 동적 include - 파라미터 전송 시 ..

JSP에서 스크립틀릿(Scriptlet) 은 JSP 페이지 내에서 Java 코드를 직접 삽입할 수 있도록 하는 구문이다.하지만 요즘은 JSTL, EL(Expression Language), MVC 구조(Spring 등)를 통해 로직을 분리하는 것이 권장된다. 1. JSP 스크립틀릿 기본 문법 1-1. 스크립틀릿 문법 ( ) 1-2. 표현식(Expression) () // out.print("Hello JSP!") 와 동일 1-3. 선언부(Declaration) () 2. JSP 스크립틀릿 사용 예제 2-1. 변수 선언 및 출력숫자: 사용자: 2-2. 조건문과 반복문 반복문 출력: 2-3. if 조건문 관리자입니다. 일반 사용자입니다. 스크립틀릿은 과거에는 자주 사용되었으나, 현재는 ..

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는 두 축(수평 및 수직)을 동시에..

상황에 따라 Controller에서 list를 view에 넘겨줄 때 select option 태그를 반복해서 출력해야하는 경우가 있다. 1. controller 데이터 조회 후 view에 데이터 전달 List list = new ArrayList(); list = entityRepository.findAll(); model.addAttribute("list", list); 2. view에서 반복 출력 -- 선택 -- - value 값은 idx값이 들어가고 utext에 view에 보여질 텍스트를 작성해주면 된다. 만약 한개의 컬럼이 아닌 복수개의 컬럼을 텍스트로 보여주고 싶다면 뒤에 '+' 를 붙혀 문자열 붙이는 것처럼 사용할 수 있다. -- 선택 --

/img/cat.png 이미지 파일을 준비한 후 main.css에 작성한다. body{ background-size: cover; } 이렇게 작성하면 이미지가 화면에 꽉차게 된다.