꿈소년의 개발 이야기

스터디 그룹에 대한 정보를 얻은 게 아마도 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 21🔖 오늘 읽은 범위 :☃️2/2(월) 진도표 알림❄️공부 내용: 14 트랜지션과 애니메이션❄️ 쪽수: 451~483쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**웹 요소를 움직이기예전에는 자바스크립트로 처리 했으나, 지금은 CSS 로 가능함.트랜스폼 알아보기물체의 크기나 형태를 바꾸는 것 = Transform요소의 이동, 회전, 왜곡 등등 비교적 단순함이 있음.transform 속성과 트랜스폼 함수 사용기본형 : transform: 함수웹 요소를 이동 시키는 함수 : translate() .photo { transform: translate(50px,100px); }2차원 트랜스폼 : x, y 좌표 기준으로 수평 및 수직 방향 이동3차원 트랜스폼: x, y, z 좌표 기준. z축은..

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

DAY 20🔖 오늘 읽은 범위 :☃️01/30(금) 진도표 알림❄️공부 내용: 13 CSS 고급 선택자(2)❄️ 쪽수: 415~449쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**가상 클래스와 가상 요소사례 : 메뉴의 몇번째 항목 지정 하는 경우, 단락의 첫번째 글자만 지정하는 경우 등등.사용자 동작에 반응하는 가상 클래스 선택자사용자가 특정 동작을 할 때, 스타일이 바뀌도록 만들고 싶은 경우 사용함.자주 사용하는 가상 클래스 선택자 : LoVe HAte:link : 방문하지 않은 링크에 스타일 적용.:visited : 방문한 링크에 스타일을 적용.:hover : 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용.:active : 웹 요소를 활성화 했을 때 스타일 적용.:focus : 웹 ..

DAY 19🔖 오늘 읽은 범위 :☃️01/29(목) 진도표 알림❄️공부 내용: 13 CSS 고급 선택자(1)❄️ 쪽수: 398~414쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**연결 선택자둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정하는 것.조합 선택자; 콤비네이션 선택자; 콤비네이션 셀렉터;하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자하위 요소 : 특정 요소를 기준으로 그 안에 포함 된 요소.자식 요소 : 현재 요소 기준으로 바로 한 단계 아래 요소.손자 요소 : 자식 요소 한 단계 아래.하위 선택자 descendant selector부모 요소에 포함된 하위 요소를 모두 선택. 자손 선택자.하위 선택자는 상위 요소와 하위 요소를 공백으로 구분.자식 요소 ..

DAY 18🔖 오늘 읽은 범위 :☃️01/28(수) 진도표 알림❄️공부 내용: 12장 되새김 문제❄️ 쪽수: 393~395쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**12장 되새김 문제그리드 템플릿 열을 정의하는 속성 : grid-template-columnsrepeat() 함수 역할 : 정의된 횟수만큼 열이나 행을 반복 생성.그리드 항목을 템플릿 영역에 배치할 때 사용하는 : grid-areagap 속성 : 그리드 레이아웃에서 항목 간의 간격을 설정.CSS 그리드 레이아웃에서 minmax() 함수의 목적 : 열이나 행의 최소 및 최대 크기를 설정하기 위해CSS 그리드 레이아웃 : display 속성에 grid 값을 설정함.CSS 그리드 레이아웃 : auto-fill 은 빈 공간을 남기고, ..

DAY 17🔖 오늘 읽은 범위 :☃️01/27(화) 진도표 알림❄️공부 내용: 12 CSS 그리드 레이아웃으로 배치하기❄️ 쪽수: 373~392쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**격자 형태로 요소를 배치할 수 있음.플렉스 박스 레이아웃과 함께 사용 가능함.CSS 그리드 레이아웃 사용하기CSS 그리드 레이아웃 용어그리드 항목을 배치할 때 가로와 세로 방향 모두 사용함.플렉스 항목은 1차원 이나, CSS 그리드 레이아웃은 2차원 적임.배치할 항목을 컨테이너로 묶어야 함.구조부모 요소 : 그리드 컨테이너자식 요소 : 그리드 항목 또는 셀(cell)가로 방향 : 행(row)세로 방향 : 열(column)간격CSS 그리드 레이아웃 항목을 배치하는 속성그리드 컨테이너 지정 : display 속..

DAY 16🔖 오늘 읽은 범위 :☃️01/26(월) 진도표 알림❄️공부 내용: 11장 되새김 문제❄️ 쪽수: 370~371쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**플렉스 컨테이너 기본 방향 : 수평 배치플렉스 컨테이너 정의 : display:flex;플렉스 항목 수평 방향 나열 속성 : flex-direction: row;플렉스 항목 세로축 중앙 정렬 : align-items: center;align-content 속성 : 여러 줄로 된 플렉스 항목 사이의 간격을 지정함.align-self 속성 : 특정 플렉스 항목의 세로 정렬을 지정.flex-shrink 기본값은 1모든 플렉스 항목은 동일한 크기로 설정 되지 않음. 🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**8 문제 중에..

DAY 15🔖 오늘 읽은 범위 :⭐️01/23(금) 진도표 알림✅공부 내용: 11 플렉스 박스 레이아웃으로 배치하기✅ 쪽수: 342~369쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**플렉스 박스 레이아웃웹 요소를 가로로 배치하다가 화면에 가득 차면 아래로 내려서 다시 옆으로 배치하는 방식.배치 방향, 정렬 방법 지정 가능. 웹 요소 간격 조정 가능.플렉스 박스 레이아웃 구조플렉스 컨테이너 flex container : 부모 박스. 적용할 대상을 묶는 요소.플렉스 항목 flex item : 적용할 대상.주축 main axis플렉스 항목 배치하는 기본 방향.기본값은 “왼쪽 → 오른쪽” 수평 방향 배치.배치 시작 위치 : 주축 시작점배치 종료 위치 : 주축 끝점교차축 cross axis주축 배치하..