[WEB][Vue.js] Vue.js…? (MVVM/가상 DOM)

Vue.js란?자바스크립트 프레임워크웹 화면 작성에 최적화 Vue.js의 특징SPA(Single Page Application)html 한 개로 어플리케이션을 구성section 영역의 내용만 바뀜(ex) React.js, Vue.js, Svelte MVVM 패턴Model: 순수 데이터 View: 화면ViewModel: 순수한 데이터를 화면에 출력하기 편하게끔 가공한 형태(변수, 함수 반환 ...) event drivendata driven - 데이터 수정을 감지가상 DOM(Virtual DOM) 브라우저 메모리에서 관리하는 DOM에 대한 추상 객체 빠른 UI 렌더링 성능을 제공 브라우저 DOM 목적: 화면에 직접 그리는 작업을 수행 가상 DOM 목적: 변경된 부분을 탐지하는 것 ..

• format_list_bulleted Web/vue.js
• · 2025. 3. 24.
• textsms

[WEB] 브라우저 엔진 렌더링의 과정

브라우저 엔진 렌더링 과정[ 중요 렌더링 경로, Critical Rendering Path ] = 렌더링 엔진이 거치는 전체 프로세스 HTML 파싱CSS 파싱 및 스타일 계산레이아웃(리플로우) ⭐⭐⭐브라우저는 요소의 크기와 위치를 계산하여 화면에 배치 → 이 과정을 리플로우 또는 레이아웃!레이아웃은 요소의 스타일, 크기, 위치 등을 고려하여 화면에 어떻게 표시될지를 결정+ (아직 화면에 나타나지 않음. 그냥 계산만 해놓는 것!)렌더링 트리 구축DOM과 CSSOM(스타일 객체 모델)을 결합하여 렌더링 트리를 생성렌더링 트리는 화면에 표시될 요소의 구조를 나타내는데, 시각적으로 표현되는 요소만 포함렌더링렌더링 트리를 기반으로 브라우저는 화면에 실제로 픽셀을 그리고 색상과 텍스처를 적용하여 최종적인 렌더링을 ..

• format_list_bulleted Web
• · 2025. 3. 24.
• textsms

[WEB][CSS3] overflow: hidden이 뭔데..

overflow? 넘쳐흐르다, 범람하다, 가득 차다  기능▷ 영어 뜻에서 추측해볼 수 있듯이, 크기가 제한된 영역에서 많은 양의 컨텐츠를 보여줄 때(= 컨텐츠가 넘쳐흐를 때) 사용한다. 속성 종류visible 기본값, height 보다 내용의 크기가 크더라도 전부 출력hidden height 만큼만 출력, heigt 공간 안의 내용은 숨긴다는 뜻!auto컨텐츠의 양이 가변적이어서 스크롤바를 보여줘야 할지 말지 미리 결정하기 어려운 경우에 사용!scroll주어진 공간을 넘어가는 컨텐츠가 삐져나오면 안 되고, 누락되어도 안 될 때 사용내용이 공간을 넘어가지 않아도 스크롤바가 생김 말로만 설명하면 이해가 어려우니..    예시 코드!예시 코드 See the Pen overflow:hidden(1) by ..

• format_list_bulleted Web/css
• · 2025. 3. 21.
• textsms

[KB IT's Your Life] 6기 서류/면접 후기 (+ 최종 합격) 🎡

아무 생각 없이 학교 생활만 하다 보니 칼졸업..새학기 부터는 뭐든 해야할 것만 같은 부담감에 이것 저것 찾아보다 KB 국민은행에서 진행하는 부트캠프 IT's  Your Life 6기 공고 모집 글을 보게됐다!1️⃣ 서류 지원모집 기간은 12/23부터 1/26까지! 나는 1/19부터 여행 계획이 잡혀있어서 일주일 정도 일찍 제출했다. 🤌🏻 초반 기수의 글을 보면 멀티캠퍼스 강남/역삼에서도 수업을 받았던 것 같은데 이번 기수는 세종대 쪽!우리 집에서부터 편도 1시간 30분 거리라.. 약간 고민을 하긴 했지만, 체력 하나는 자신 있어서 냅다 지원해버렸다. + 일찍 제출하면 합격 가이드북 이라는 걸 준다! 많은 블로그 정보들보다 가이드북 안에 있는 내용이 가장 정확하니,  다들 부지런하게 작성하여 저것을 ..

• format_list_bulleted Activity/KB IT's Your Life
• · 2025. 3. 13.
• textsms

[WEB][CSS3] 속성 (2)

CSS3 속성 2탄.글자 속성font-sizefont-family공백이 있을 경우에 '' 로 반드시 묶기!여러 개 지정해놓기 가능, 첫번째 글꼴이 없을 경우에 그 다음 걸로 지정웹 폰트 많이 사용font-style글자 스타일italicnormalobliqueinheritinitialfont-weight글자 굵기text-alignleftrightstartend 태그는 중앙이라는 개념이 없으므로 이 속성을 적용할 수 없음!inline-block에서만 적용됩니다~~text-decorationnone위치 속성 position좌측 상단 모서리: default!!abolute: 절대 위치 좌표 설정부모 영역을 벗어나는 경우 → overflow 처리overflow: hidden / scroll실습 꼭 해보기!fixe..

• format_list_bulleted Web/css
• · 2025. 3. 12.
• textsms

[WEB][CSS3] 속성 (1)

css는 직접 실행하면서 공부하는 것을 추천드립니다 .. 박스 속성width, height: 컨텐츠에 의해 정해짐width 디폴트 값: 행 전체height 디폴트 값: 컨텐츠 만큼모든 태그에는 경계선(테두리)이 존재 margin: 테두리와 다른 태그 사이의 테두리 바깥쪽 여백margin: [상] [우] [하] [좌];  🕑margin: [상하] [좌우];padding: 테두리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용padding: [상] [우] [하] [좌];  🕑padding: [상하] [좌우];border: 테두리 border-radius: [좌상] [우상] [우하] [좌하];  🕑 border-widthboder-styleborder-color각자 써도 되지만 ..

• format_list_bulleted Web/css
• · 2025. 3. 6.
• textsms