2025/06/04 5

CSS Transition(부드러운 애니메이션 만들기) - 18

CSS의 transition 속성은 웹 요소의 스타일 변화를 부드럽게 만들어주는 강력한 도구입니다. 예를 들어, 버튼에 마우스를 올렸을 때 색상이 서서히 변하거나, 크기가 자연스럽게 커지는 효과를 줄 수 있습니다. 1. CSS Transition의 기본 구조 transition 속성은 요소의 스타일 변화를 부드럽게 전환(transition) 하도록 설정합니다.이 속성은 다음과 같은 4가지 주요 속성으로 구성됩니다. transition-property: 어떤 CSS 속성을 전환할지 지정합니다. (예 : width,opacity,backgroud-color등) transition-duration: 전환 효과가 얼마나 오래 지속될지 시간을 지정합니다.(예 : 2s = 2초) transition-timing..

CSS position 관련 속성(Position, Z-Index, Overflow) - 17

문서 흐름(Document Flow)이란?HTML 요소는 기본적으로 문서 흐름에 따라 배치됩니다. 이는 다음과 같은 규칙을 따릅니다.-블록 요소(Block Elenents): 한 줄을 모두 차지하며, 수직으로 쌓입니다.(예 : ,,). -인라인 요소(lnline Elements): 한 줄에 나란히 배치되며, 줄 바꿈 없이 옆으로 이어집니다.(예:,,). -기본 흐름: 요소는 HTML에 작성된 순서대로 위에서 아래로 (블록 요소) 또는 왼쪽에서 오른쪽으로(인라인 요소)배치됩니다. 문서 흐름 이해하기 1. 블록 요소 (수직으로 쌓임) 블록 요소 1 블록 요소 2 블록 요소 3 2. 인라인 요소 (수평으로 나란히) 인라인 요소 1 인라인 요소 2 인라인 요소 3 position( 위치 지정..

HTML CSS 2025.06.04

CSS font 속성 - 16

=====================================================학습 목표CSS의 font 관련 속성(font-family,font-size,font-weight,font-stlye,line-height 등)을 이해하고 활용할 수 있다. 텍스트 스트일을 자유롭게 조정하여 웹 페이지의 가독성과 디자인을 개선할 수 있다.====================================================== 1.1 Font 속성이란?CSS의 font 속성은 텍스트의 모양을 정의하는 데 사용됩니다. 텍스트는 웹 페이지에서 가장 중요한 요소 중하나로, 적절한 스타일랑은 가독성과 디자인에 큰 영향을 미칩니다. 주요 font 관련 속성을 하나씩 살펴 보겠습니다. font-fa..

HTML CSS 2025.06.04

1:N 소켓 양뱡향 하기(client측) (chap gpt와의 대화)

package _client_socket.ch05;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import java.io.PrintWriter;import java.net.Socket;/** * 서버와 양방향 통신하는 클라이언트 측 코드 */public class MulitNClient { private final String name; // Socket생성시 사용자 이름 넣기 위한 값이다. // final상수인데도 오류 없이 사용가능한 이유는 아래에서 확인하자. private Socket socket; // 소켓을 생성했을 ..

카테고리 없음 2025.06.04

1:N 소켓 양뱡향 하기(Sever측) (chap gpt와의 대화)

package _server_socket.ch05;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import java.io.PrintWriter;import java.net.ServerSocket;import java.net.Socket;import java.util.Vector;/** * 1:N 양방향 통신을 구현하는 서버 측 코드 * 여러 클라이언트와 연결하여 메시지를 수신하고, 모든 클라이언트에게 * 브로드캐스트 처리 한다. */public class MultiNServer { private static final int PORT = 5000; // 포트 번호 5000번을 상수..

728x90