전체 글

전체 글

    [ CSS ] Transform/Transitions/Animations
    CSS

    [ CSS ] Transform/Transitions/Animations

    ꕥCSS만으로도 요소에 애니메이션을 적용할 수 있어요!ꕥTransitions: JavaScript를 사용하지 않고, CSS만으로 요소의 스타일 속성이 한 상태에서 다른 상태로 변경될 때, 애니메이션처럼 부드럽게 진행되도록 한다.transition-property : 변화할 속성 값을 설정한다.Ex) color, background-color, transformtransition-duration : 속성 값의 변화가 진행되는 시간을 설정한다.Ex) s, ms베지에 곡선 : 제어점(Control Points)을 이용해 곡선의 형태를 조정하는 기법이다.함수 이름설명ease기본값으로, 느리게 시작해서 점점 빨라졌다가 다시 느려지는 형태이다. cubic-bezier(0.25, 0.1, 0.25, 1.0)와 같다...

    CSS

    [ CSS ] 반응형 웹/Viewport/Media Query/Breakpoint

    ꕥ웹뷰 프로젝트를 업무로 맡고 있기 때문에 뷰포트에 대해 알아보겠습니다!ꕥ반응형 디자인(Responsive Design) : 세상엔 수많은 기기가 있는데, 다양한 화면 크기에 따라 레이아웃과 스타일을 동적으로 조정하여 웹 페이지를 최적화된 형태로 보여주는 디자인이다.적응적 디자인(Adaptive Design) : 특정 화면 크기(해상도)에 맞게 레이아웃이 변하는 디자인이다. 미디어 쿼리를 사용한다.유동적 디자인(Fluid Design) : 화면 크기에 맞게 요소의 크기가 변하는 디자인이다. %, vw, vh 비율을 사용하고, 요소를 Flex, Grid로 유연하게 배치한다.뷰포트(Viewport) : 사용자가 웹 브라우저를 통해 보는 화면 영역이다.MetaTagvw : 뷰포트 너비의 비율이다.vh : 뷰포..

    CSS

    [ CSS ] Layout/Display/Position/Flexbox/Grid

    ꕥ저는 백엔드 위주로 개발을 했기 때문에 프론트엔드는 알아볼 수 있을 정도로만 공부했었는데, 업무를 하면서 이미 만들어진 요소들을 알아보고 배치하려니 복잡하더라구요 ㅎㅎ; 그래서 CSS를 살펴볼까 합니다!ꕥDisplay : 요소가 HTML 페이지에서 어떻게 배치될지를 정의한다.블록(block) : 항상 새로운 줄에서 시작하며, 가로 폭을 모두 차지한다. 위에서 아래로 배치된다. 기본적으로 너비와 높이 지정이 가능하다.Ex) , , 인라인(inline) : 한 줄에 이어서 배치되며, 콘텐츠 크기만큼의 폭을 차지한다. 화면이 꽉 차면 다음 줄로 넘어간다. 기본적으로 너비와 높이 지정이 불가능하다.Ex) , , (예외적으로 너비와 높이 지정 가능) 이외에, 화면상에 전개식으로 요소가 배치되는 것이 아닌, 여러..

    [ Git, GitHub ] Windows Git 설치 및 GitHub 사용자 등록
    Git

    [ Git, GitHub ] Windows Git 설치 및 GitHub 사용자 등록

    ꕥ분산 버전 관리 시스템인 Git을 설치하고 내 깃허브 계정과 연동해 보자!ꕥ Git 설치https://git-scm.com/downloads/win Git - Downloading PackageDownload for Windows Click here to download the latest (2.47.0(2)) 64-bit version of Git for Windows. This is the most recent maintained build. It was released on 2024-10-22. Other Git for Windows downloads Standalone Installer 32-bit Git for Windows Setupgit-scm.com본인 운영체제 버전에 맞게 공식 배포판 ..

    Git

    [ Git ] Git을 사용하는 이유/LVCS CVCS DVCS 차이

    ꕥ협업 개발자로서 첫 발걸음은 깃허브!깃허브는 왜 사용하는 걸까?ꕥ Git을 사용하기 전에는 LVCS와 CVCS를 사용했다. 1. LVCS : 로컬 버전 관리 시스템로컬 데이터베이스에 파일의 변경 정보를 저장하여 버전을 관리한다. 파일을 특정 시점으로 되돌릴 수 있지만, 로컬 관리이기 때문에 다른 개발자와 협업할 때는 버전 관리가 쉽지 않다는 단점이 있다. 2. CVCS : 중앙집중식 버전 관리 시스템중앙 서버에서 코드를 관리하면 되므로 누가 어떤 수정을 했는지 알 수 있고 로컬보다 버전 관리가 용이하다. 하지만 중앙 서버에 문제가 발생할 경우, 업무 진행 및 복원이 어렵다는 단점이 있다. 3. DVCS : 분산 버전 관리 시스템이름에서 알 수 있다시피 파일들이 원격 저장소와 깃 사용자들의 각 로컬 컴퓨..

    Coding Test/Programmers

    [ Programmers ] Lv.1 12903 가운데 글자 가져오기 문제 풀이

    문제https://school.programmers.co.kr/learn/courses/30/lessons/12903 생각단어의 가운데 글자를 가져오기 위해서 입력받은 배열의 길이를 반으로 나눈 인덱스를 구하도록 했다.길이가 홀수거나 짝수일 때를 기준으로 배열에서 정확한 중앙 값을 찾도록 했다. 제출 코드def solution(s): num = int(len(s)) # 홀수일 때 if num % 2 == 1: return s[num // 2] # 짝수일 때 else: return s[num // 2 - 1:num // 2 + 1]

    [ Express ] Node.js와 MySQL Database 연동/MySQL Preferred Authentication Plugin 오류 해결
    Node/Express

    [ Express ] Node.js와 MySQL Database 연동/MySQL Preferred Authentication Plugin 오류 해결

    Express에서 MySQL에 접속해 보자.const express = require('express')const app = express()const mysql = require('mysql');const connection = mysql.createConnection({ host: '[ 공인 IP 또는 localhost ]', // 데이터베이스 주소 port: '3306', // 데이터베이스 포트 user: 'root', // 로그인 계정 password: 'password', // 비밀번호 database: 'database' // 액세스할 데이터베이스});connection.connect();connection.query('SELECT 1 + 1 AS ..

    [ KJ ] Week08
    Krafton Jungle

    [ KJ ] Week08

    ꕥ 8~9주차 PintOS User Programs 프로젝트를 진행했습니다~ꕥ Project2 : User Programs유저 모드(User Mode) : 일반적인 응용 프로그램이 실행되는 환경   - 제한된 메모리 공간과 시스템 자원에만 접근 가능   - 운영 체제의 핵심 부분에 직접 접근 불가   - 시스템의 안정성과 보안을 유지   - 시스템 자원이나 서비스가 필요할 경우, 시스템 호출(System Call)을 통해 커널 모드로 전환하여 요청을 처리커널 모드(Kernel Mode) : 운영 체제의 핵심 부분과 하드웨어를 직접 제어하는 코드가 실행되는 환경   - 시스템의 메모리 및 하드웨어를 직접 제어 가능   - 오류가 발생할 경우 시스템의 안정성에 큰 영향   - 메모리, 프로세스, 파일 시스템..

티스토리툴바