꿈소년의 개발 이야기

스터디 그룹에 대한 정보를 얻은 게 아마도 1월이였던 것 같다.X 에서 알게 되서 디스코드에 들어와서, 책 확인한 후 구매한 다음에 인증 받아서 스터디 참가 신청한 게 엊그제 같은데...이렇게 오늘 마무리까지 하게 됐다. 나는 풀스택 개발을 해야 하는 상황이라 준비가 좀 필요했다.15년 경력의 앱 개발자였지만 시대는 바뀌고 나도 변화해야 한다.한번도 생각해본 적도 없고, 들여다 볼 생각도 안한데다가 대학 졸업 이후로 본 적도 없는 HTML, CSS, JS 를 다시 하려고 해도이미 기억이 없는 나에게는 그냥 하는 건 시간 낭비가 크다고 판단했다.원래 나는 기초 위에 쌓아 나가는 형태를 좋아하는지라, 그렇게 하지 않으면 내 궁금증 때문에 계속 찾아볼 것이고...그러면 그 시간이 너무 오래 걸릴 테니, 차라리..

DAY 30🔖 오늘 읽은 범위 : 📢2/13(금) 마지막 진도표 알림▶️공부 내용: Do it! 실전 프로젝트 - 넷플릭스 사이트 따라 만들기▶️쪽수: 679쪽[QR코드]😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**디자인 기획실제 서비스를 바탕으로 디자인 기획하기구조 해석 → 구성 계획으로 진행.개발 환경 만들기헤더 영역 만들기배너 영역, 멤버십 영역 만들기선택 가이드 영역 만들기FAQ 영역 만들기푸터 영역 만들기영역마다 사용할 id 들을 미리 생각해 두기. class 보다는 id로 앵커 메뉴에 사용하므로 크게 묶는 영역에는 id 를 지정하는 것이 좋음.구현 실습 진행https://github.com/dreamboy1339/Bitflix🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**..

이지스리퍼블리싱에서 제공하는 웹 분야 도서 로드맵입니다.도서 로드맵이지만, 웹 개발 분야 로드맵과 일맥 상통합니다. 웹 개발자로 나아가실 분들에게 도움이 되실 겁니다.이미지를 누르면 이지스리퍼블리싱 웹 분야 도서 로드맵에 대해 좀 더 자세한 내용을 볼 수 있습니다. 👍

DAY 7🔖 오늘 읽은 범위 :🔥01/13(화) 진도표 알림👉🏻공부 내용: 05 입력 양식 작성하기(2)👉🏻쪽수: 152~167쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**Input 태그 주요 속성autofocus : 입력 커서를 자동으로 갖다 놓기placeholder : 힌트 표시이름 연락처readonly : 읽기 전용 필드.required : 필수 입력 필드 지정.Input 태그 이외 폼 태그들textarea : 멀티 라인 입력 텍스트 영역.종류설명cols텍스트 영역 가로 너비. 문자 단위.rows텍스트 영역 세로 길이. 줄 단위. 넘치면 스크롤 막대 생김. Memo select, option : 드롭다운 목록select 속성종류설명size화면에 표시할 드롭다운 항목 개수 지..

DAY 6🔖 오늘 읽은 범위 :🔥01/12(월) 진도표 알림👉🏻공부 내용: 05 입력 양식 작성하기(1)👉🏻쪽수: 125~151쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**폼 삽입폼입력 양식 = ‘폼’폼의 동작 ⇒ 데이터베이스 기반 동작.폼 형태는 HTML, 입력된 정보는 서버 프로그래밍을 이용하게 됨. 태그폼 요소폼 태그 속성method : 입력한 내용을 서버에 어떻게 넘길 것인가? ⇒ ‘get’ or ‘post’get : 데이터 전달 크기 256byte ~ 4Kbyte. 주소 표시줄에 내용이 노출 됨.post : 크기 제한 없음. 입력 내용이 노출되지 않음.name : 자바스크립트 폼 제어하는 경우, 지정되는 폼의 이름.action : 내용을 처리 해 줄 서버 프로그램 지정.ta..

DAY 5🔖 오늘 읽은 범위 :🔥01/09(금) 진도표 알림👉🏻공부 내용: 04 웹 문서에 다양한 내용 입력하기(2)👉🏻쪽수: 101~123쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**이미지 삽입하기scrset 속성이미지 용량이 크거나, 해상도에 따라 최적화해서 표시해야 할 때.이미지 정보를 여러 개 알려줘서 이미지를 적절하게 표시하게 함.사용 조건 : 너비와 화면 픽셀 비율w 서술자 : “파일 이름 너비” 형식. ex) small.png 500w, large.png 1000wx 서술자 : 장치의 픽셀 비율. ex) sky-1.png 1x, sky-2.png 2x💡픽셀 비율 값 알아내기~~www.mydevice.io → 2026년 1월 9일 기준으로 동작하지 않음.~~“추가로 알게..

DAY 4🔖 오늘 읽은 범위 :🔥01/08(목) 진도표 알림👉🏻공부 내용: 04 웹 문서에 다양한 내용 입력하기👉🏻쪽수: 81~106쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**다양한 HTML 태그 익히기텍스트 입력하기제목을 나타낸다. 태그범위 : ~ 💡웹 접근성 고려 태그는 한 페이지에 1개만 사용한다.제목은 h1 부터 h6 까지 순서대로 사용한다.텍스트 단락 태그, 줄 바꾸기 태그텍스트를 적절하게 단락으로 묶어 표시 ⇒ 내용이 길어져서 한 줄로 표시할 수 없을 경우, 자동으로 줄이 바뀜.원하는 위치에서 줄 바꾸기 ⇒ 💡\ 태그와 \ 태그 차이점 - \을 2번 사용해서 \ 태그 사용하는 것처럼 흉내낼 수 있으나, - **실제 단락이 만들어진 게 아니라서, CSS 를 사용..

DAY 3🔖 오늘 읽은 범위 :🔥01/07(수) 진도표 알림👉🏻공부 내용: 03 HTML 기본 문서 만들기👉🏻쪽수: 53~79쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**HTMLHyper Text Markup Language.tag ⇒ 꼬리표.웹 브라우저에 보여줄 내용에 마크업 하고 문서끼리 링크하는 것.HTML 구조HTML 문서 구조 웹 개발 기초 HTML CSS 자바스크립트 html 태그에서 lang="ko" 로 할 경우, “한국어로 된 문서”로 검색 결과 범위를 제한함.화면 낭독기에서 맞춤 언어로 진행 할 때도 영향을 줌. My Blog Blog Po..

DAY 2🔖 오늘 읽은 범위 :🔥01/06(화) 진도표 알림👉🏻공부 내용: 02장 웹 개발 시작하기👉🏻쪽수: 31~51쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**웹 개발을 위해 공부해야 할 기술기본영역HTML건물의 기초, 벽, 지붕 등의 구조.웹 문서 표준. HTML에 맞는 표기법 사용해야 함.CSS건물 색칠하기, 창문 디자인, 내부 인테리어 작업.HTML로 만든 문서를 꾸미거나 사용하기 편리하게 배치할 때 사용. 반응형 웹 디자인을 만들려면 CSS 공부해야 함.자바스크립트엘리베이터 기능, 시스템 에어컨 기능.웹 사이트 동작이나 기능을 개발할 때 사용하는 프레임워크. 사용자 상호 작용.깃/깃허브코드 관리.프런트엔드영역제이쿼리, D3.js, 부트스트랩 등리액트, 앵귤러, 뷰 등🔍라..

DAY 1🔖 오늘 읽은 범위 :🔥01/05(월) 진도표 알림👉🏻공부 내용: 01장 웹은 어떻게 움직일까?👉🏻쪽수: 17~29쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**학습 목표인터넷 연결 방식.클라이언트와 서버 동작 구조.웹 개발에서 자주 사용하는 용어.학습 결과웹 표준의 중요성.웹의 동작 방법.웹 개발을 위한 기본 용어.웹의 형태웹 사이트SNS, 커머스 같은 사이트는 제공하는 서비스에 맞는 장치와 기능이 함께 제공되는 복잡한 사이트.이런 웹 사이트의 여러 장치와 기능을 만드는 것 = 웹 개발.방문자에게 일방적으로 정보를 전달하는 웹 사이트는 단순함.플랫폼으로서의 웹웹 개발과 표준웹사이트 개발 + 애플리케이션으로서의 웹 + 플랫폼으로서의 웹웹 개발의 표준 ⇒ HTML, CSS, 자..