본문 바로가기

분류 전체보기290

이벤트(Event)와 이벤트 처리기(Event Handler) 이벤트(Event)와 이벤트 처리기(Event Handler) 개념 정리1. 이벤트(Event)이벤트는 브라우저나 사용자가 수행하는 행동을 말합니다. 예를 들어, 마우스 클릭, 키보드 입력, 페이지가 로드되는 것 등이 모두 이벤트에 해당합니다. 웹 페이지에서 특정 동작이 발생할 때 이벤트를 발생시키고, 그 이벤트에 반응하여 특정 작업을 실행하게 할 수 있습니다.대표적인 이벤트:click: 사용자가 요소를 클릭했을 때 발생mouseover: 마우스를 요소 위에 올렸을 때 발생keydown: 키보드를 눌렀을 때 발생load: 페이지나 리소스가 모두 로드되었을 때 발생2. 이벤트 처리기(Event Handler)이벤트 처리기는 이벤트가 발생할 때 실행되는 함수입니다. 이벤트가 발생하면 해당 이벤트 처리기가 호.. 2024. 10. 4.
자바스크립트 기초 정리 자바스크립트 기초 정리1. 기본 함수alert(): 사용자에게 경고창을 띄웁니다.alert("Hello, World!");confirm(): 확인/취소 버튼이 있는 대화 상자를 띄웁니다. 사용자의 선택에 따라 true 또는 false 값을 반환합니다.const result = confirm("Are you sure?");prompt(): 사용자에게 입력창을 띄워 값을 입력받습니다. 반환값은 문자열입니다.const name = prompt("What is your name?");2. 출력하기document.write(): HTML 문서에 직접 쓰기 (웹 페이지에 출력)document.write("Hello, World!");console.log(): 콘솔에 출력 (개발자가 디버깅할 때 주로 사용)conso.. 2024. 10. 4.
CSS 트랜스폼, 트랜지션, 애니메이션 정리 1. CSS 트랜스폼(Transform)CSS transform 속성은 HTML 요소에 2D 및 3D 변형을 적용할 수 있게 해줍니다. 변형에는 이동, 회전, 크기 조정 등이 포함됩니다.1.1 translate(): 요소를 이동용도: 지정한 방향으로 요소를 이동시킵니다.값: translate(x, y)로 x축, y축으로 각각 이동할 거리를 지정합니다.transform: translate(50px, 100px); /* x축으로 50px, y축으로 100px 이동 */1.2 scale(): 요소의 크기 조정용도: 요소를 확대하거나 축소시킵니다.값: scale(x, y)로 x축과 y축 방향으로 각각 크기를 조정합니다. (값이 1보다 크면 확대, 작으면 축소).transform: scale(1.5, 2); /*.. 2024. 10. 3.
2024.10.03(목) { 서블릿 컨테이너, 서블릿 컨텍스트 } 💡 서블릿 컨테이너(Servlet Container)서블릿 컨테이너는 클라이언트의 요청을 받아서 이를 처리하고, 처리된 결과를 다시 클라이언트에게 응답해주는 자바 웹 애플리케이션의 핵심 컴포넌트입니다. 자바에서 웹 애플리케이션을 개발할 때, 서블릿 컨테이너는 다음과 같은 역할을 수행합니다:HTTP 요청 처리:서블릿 컨테이너는 클라이언트로부터 들어온 HTTP 요청을 수신하여 해당 요청을 적절한 **서블릿(자바 클래스)**에 전달합니다.서블릿 관리:서블릿 컨테이너는 서블릿의 생명 주기(생성, 초기화, 요청 처리, 종료)를 관리합니다. 즉, 서블릿을 처음 호출할 때 인스턴스를 생성하고, 이후에는 재사용하면서 성능을 최적화합니다.HTTP 응답 생성:서블릿이 요청을 처리한 결과를 바탕으로 HTTP 응답을 생성하.. 2024. 10. 3.
CSS 선택자 CSS 선택자 정리CSS에서 선택자는 특정 HTML 요소를 선택해 스타일을 적용할 때 사용됩니다. 연결 선택자(조합 선택자)를 통해 특정 관계에 있는 요소들에 스타일을 지정하거나, 속성 선택자와 가상 클래스 선택자를 활용해 다양한 조건과 상황에서 스타일을 적용할 수 있습니다.1. 연결 선택자 (Combinator Selectors)연결 선택자는 요소 간의 관계를 정의하며, 두 개 이상의 요소를 조합해 특정 요소에만 스타일을 적용합니다.1.1 하위 선택자 (section p)용도: 선택한 요소 안의 모든 하위 요소에 스타일을 적용합니다.예시: section 요소 안에 있는 모든 p 요소에 적용.section p { color: blue;}1.2 자식 선택자 (section > p)용도: 선택한 요소의 직.. 2024. 10. 3.
CSS 그리드 레이아웃 CSS 그리드 레이아웃은 2차원 레이아웃 시스템으로, 웹 페이지를 행과 열로 나누어 복잡한 레이아웃을 쉽게 구성할 수 있도록 도와줍니다. 그리드 레이아웃은 가로뿐만 아니라 세로 축도 함께 다루므로, 플렉스 박스와 달리 가로/세로 모두에 대한 배치를 손쉽게 설정할 수 있습니다.1. 기본 개념CSS 그리드 레이아웃에서는 다음 두 가지 주요 구성 요소가 있습니다:그리드 컨테이너(Grid Container): 그리드 레이아웃을 적용하는 부모 요소.그리드 아이템(Grid Item): 그리드 컨테이너 내의 자식 요소.2. 그리드 컨테이너 설정그리드를 사용하려면 부모 요소에 display: grid 또는 display: inline-grid 속성을 지정합니다..container { display: grid;}3. .. 2024. 10. 3.

티스토리툴바