개발공부일지

목차 1. JS Runtime 2. 브라우저 렌더링 1. JS Runtime - stack : 쌓는다는 의미로, 1.2.3의 순으로 input → 3.2.1순으로 output (위에 있는게 먼저 나가는) - queue : 1.2.3 순으로 들어가면 1.2.3 순으로 나오는! - js runtime : javascript가 실행되는 환경 ★ Memory Heap → Callback Queue → Call Stack 2. 브라우저 렌더링 ★ 오늘의 포인트와 남겨두기 ★ ※ javascript 용어 먼저 알아두기!!!! ※ JS runtime 중요!!! ※ Memory Heap → Callback Queue → Event Loop → Call Stack (흐름 기억해두기) ※ web API ※ Memory H..

경일게임아카데미 intro페이지 중 curriculum, guide 영역 클론코딩하기 https://www.kiweb.or.kr/intro 경일게임아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아 www.kiweb.or.kr 실습코드와 부연설명 더보기 #curriculum { background-color: lightsteelblue; padding: 7rem 0; /* display: none; */ } #curriculum .box-wrapper { margin-top: 6rem; } #curriculum .box-wrapper, #curriculum .box..

경일게임아카데미 intro페이지 중 interior 영역 클론코딩하기 https://www.kiweb.or.kr/intro 경일게임아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아 www.kiweb.or.kr ▶ PC 화면일때 (max-width:1300px) ▶ @media only screen and (max-width:480px) 였을때 실습코드와 부연설명 더보기 .container { /* height: 100px; */ max-width: 1300px; /* max-width: calc(1300px + 6rem); 계속 1300px을 사용하고 싶을때 */..

경일게임아카데미 intro페이지 중 why? kyungil 영역 클론코딩하기 https://www.kiweb.or.kr/intro 경일게임아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아 www.kiweb.or.kr 실습코드와 부연설명 더보기 @keyframes slide { 0% { transform: translateY(0); } 6% { transform: translateY(-17.5%); } 33.3% { transform: translateY(-17.5%); } 39.3% { transform: translateY(-35%); } 66.6% { tran..

경일게임아카데미 intro페이지 중 review 영역 클론코딩하기 https://www.kiweb.or.kr/intro 경일게임아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아 www.kiweb.or.kr 실습코드 더보기 경일 게임 아카데미 개발자 취업,그 이상의 가치를 만들다! 능력으로 인정 받는 슈퍼신입으로 만들어드립니다.왕초보여도 상관없어요.제대로 하겠다는 마음만 가지고 오세요! 게임 부트캠프 #유니티3D #언리얼 #기획 #그래픽 #프로그래밍 디벨로켓 4.0 #메타버스기획 #메타버스개발 #블록체인 #가상증강 #웹개발 KYUNGIL REVIEW 여러분 선배들의..

경일게임아카데미 intro페이지 중 header 영역 클론코딩하기 https://www.kiweb.or.kr/intro 경일게임아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아 www.kiweb.or.kr 실습코드 경일게임아카데미 개발자 취업,그 이상의 가치를 만들다! 능력으로 인정 받는 슈퍼신입으로 만들어드립니다. 왕초보여도 상관없어요. 제대로 하겠다는 마음만 가지고 오세요! 게임 부트캠프 #유니티3D #언리얼 #기획 #그래픽 #프로그래밍 디벨로켓 4.0 #메타버스기획 #메타버스개발 #블록체인 #가상증강 #웹개발 ★ 오늘의 포인트와 남겨두기 ★ ※ git, gi..

목차 1. flex-box 2. grid 3. css animation 3-1 transform 3-2 transition 3-3 keyframe 4. media query 1. flex-box .flex-box { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; /* 가로에 대해서 정렬 */ justify-content: end; justify-content: space-around; /* 아이템하나를 기준으로 각자의 여백을 같은크기로 배치 justify-content: space-evenly; /* 모두 여백을 같은 크기로 배치 justify-content: space-between; /* 좌우 끝에 맞추고 같은 간격으로 배치 ..

목차 1. CSS 2. 다양한 선택자 2-1 주요 선택자 2-2 결합자 2-3 의사클래스/요소 3. display 4. position 5.그외에 5-1 text에 관한 css 5-2 background 이미지를 넣을때 5-3 overflow 5-4 길이/크기 단위 5-5 색상을 나타내는 방법 1. CSS - Cascading Style Sheets - index.css 파일 만들기 - 속에 입력해서 만들어둔 파일 연결하기 - 속에 태그를 만들어서 style을 적용할수도있음 - { } 속에 ;으로 구분지어서 적기 html,body { margin:0; padding:0; } 2. 다양한 선택자 2-1 주요 선택자 - * : 전체 선택자로 모든 엘리먼트에게 전부 적용함 - 유형선택자 : 엘리먼트 이름을 선..

목차 1. 2. Element와 속성 ② 3. 1. - 브라우저에게 전달할 포맷, 검색엔진등의 정보들을 적어둔다 - : html 문서의 인코딩 방식(유니코드) - : 화면상의 크기조절 설정 2. Element와 속성 ② - : 인용구로 " " 를 표현할때 사용 - : 인용구 - 속성(Attribute) : 엘리먼트의 시작 부분 (여는 태그) 엘리먼트명 다음에 넣어 사용함 → 대표적으로 id, class, style - : 하이퍼링크로 설정할때 사용함 (필수속성으로 연결할 페이지 주소를 입력해야함) → 연결할 페이지를 새창으로 열고 싶다면 target="_blank" - : 이미지를 넣을때 - : 동영상을 넣을때 - : 음악을 넣을때 → video와 audio 의 경우 속성으로 controls loop a..

목차 1. 브라우저와 HTML 2. VS Code 3. Element ① 1. 브라우저와 HTML - 파일(html)을 출력해 문서를 읽어서 출력해주는 뷰어 - 크롬, 파이어폭스, 오페라, 사파리, 엣지 - 모바일 브라우저로 '삼성브라우저' 도 있음 - HTML (Hyper Text Markup Language) - HTML 문서에는 태그 사용 - HTML에 작성된 문서가 웹 브라우저에 출력해서 보여짐 2. VS Code - Visual Studio Code 프로그램을 통해 코드를 작성 - Prettier : 문법에 맞게 사용하고 있는지 알수있음 - Live Server : 실시간으로 출력됨을 볼수있음 3. Element ① - 부모와 자식의 관계, 자식끼리는 형제관계 - 로 시작해서 로 끝남 - : 영..