본문 바로가기

분류 전체보기101

우주배경 미니멀 로그인 Form 만들기 오랜만에 웹 공부를 하면서 만들어봤다. 사진상으론 안보이지만 왼쪽의 지구는 자전하는중 ㅋㅋ HTML 기본적으로 main-container에 좌우로 div를 나누어 작성해서 CSS 코드 작성이 조금더 간편하도록 작성했다. ID Password Email Phone Submit! CSS 각 태그들의 배치를 원하는대로 하기위해 display:flex 속성을 적극 활용했다. /* main */ .main-container{ width: 60%; display:flex; margin:auto; border:2px solid; height: 80vh; border-radius: 18px; border:none; box-shadow: 0 0 30px rgba(36,51,106,0.7); transition: all .. 2024. 2. 7.
React 실행 과정 이해 Module을 통한 요소 생성 npm vite 라이브러리를 활용해 react APP 생성에 필요한 추가적인 파일들을 다운받는 것이 기본 구성 npm create vite@latest > 가장 최신 버전으로 vite 설치 npm install > package-lock.json 및 node_modules 설치 npm run dev > package.json의 script에 작성되어있는 dev(개발자용 vite APP)를 실행 ESM 형식으로 module 불러오기 일반적으로 index.html에 root로 사용하는 div태그 하나만 작성 -> jsx 형식의 다른 파일들을 ESM 형식으로 root로 불러와 활용(빠른 업데이트를 제공하기 위함) import React from 'react'; imp.. 2024. 2. 6.
React_Virtual Dom 이해 브라우저의 렌더링 과정 주요 렌더링 경로(critical Rendering Path)를 통해 브라우저가 코드를 알아보기 쉽게 해석 -> DOM트리 형태로 변환 Render Tree HTML로 작성한 요소의 배치 및 모양, CSS로 작성한 요소들의 스타일이 합쳐진 청사진 Layout 화면에 나타날 요소들의 위치 및 크기 결정 Painting 실제 요소를 화면에 그려내는 과정 HTML - DOM Render Tree - Layout - Painting CSS - CSSOM JS의 적용으로 DOM 수정 Reflow, Repainting 렌더링 과정 재진행, 이에 따라 발생하는 Reflow와 Repainting을 최소화를 목표 -> 성능의 최적화 < RE: Browser .. 2024. 2. 6.
Google 시작 홈페이지 만들어보기 홈페이지 제작 연습 겸 Google 시작 홈페이지를 만들어보았다. 개발자 도구도 뜯어보고 직접 클릭도 해보며 이 간단해보이는 화면도 정말 디테일적이고 구현되어 있는 요소가 많다는 것을 느끼고 아직 한참 부족하다는 생각이 들었다… 정진해야지 🙂 1. 헤더 처음 구글 홈페이지를 켰을 때 나오는 화면 중 최상단 부분 구현 Google 정보 스토어 Gmail 이미지 .header{ display:flex; justify-content:space-between; width:100%; } .header ul{ display:flex; flex-direction: row; margin: 10px 20px; } .header ul li{ display:flex; justify-content: center; align-.. 2024. 1. 15.
_운영체제_ 13. 교착 상태 13-1. 교착 상태란 두개 이상의 프로세스가 각자 가진 자원을 무작정 기다리면서 발생 식사하는 철학자 문제 교착 상태를 잘 표현할 수 있는 고전적인 문제 - 식사하는 철학자 원통형 탁자에 둘러앉고, 각자 음식이 있으며, 양옆에 포크 배치, 사람 수만큼 있는 포크로 식사 1. 왼쪽이나 오른쪽 포크가 사용 가능하면 집어든다 2. 왼쪽 오른쪽을 둘다 집을 시 식사한다 3. 식사가 끝나면 오른쪽->왼쪽 순서로 포크를 내려놓는다 4. 반복 -> 전부 다 식사하려고 포크를 집어들 경우, 영원히 하지못함(교착 상태) - 해결법 1. 교착 상태 발생 시의 상황을 정확히 표현 2. 교착 상태 발생의 근본적 이유 인지 교착 상태 표현법 : 자원 할당 그래프 어떤 프로세스가 어떤 자원을 사용하는지, 어떤 프로세스가 어떤 .. 2024. 1. 10.
메이플스토리 홈페이지 로그인 화면 만들어보기 요즘 여기저기서 말이 많긴 한데… 나름 애정하는 게임이라 연습겸 로그인 페이지를 만들어보았다. /* 기본 CSS */ *{ margin:0; padding:0; box-sizing: border-box; } a{ text-decoration: none; color:#8f8e91; } body{ font-family: 'Noto Sans KR', sans-serif; background:#2f2c34; height:100vh; } 1. 헤더 및 제목 맨 위 아이콘들과 메이플스토리 로고, 제목을 구현 메이플스토리 로그인 .container header{ display: flex; justify-content: space-between; /*아이콘과 로고가 반대위치인 것을 고려*/ } .container he.. 2024. 1. 9.

티스토리툴바