꿈소년의 개발 이야기

DAY 22🔖 오늘 읽은 범위 : ☃️2/3(화) 진도표 알림❄️공부 내용: 15 자바스크립트와 첫 만남❄️ 쪽수: 486~506쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**자바스크립트의 역할웹의 요소를 제어한다.스타일의 변경이나 움직임 제어.ex) 메뉴 - 하위 메뉴 노출, 탭 구성, 회원 가입, 상품 주문, 입력 정보 유효성 체크, 마우스나 키보드 동작 제어 반응 등등웹 애플리케이션사용자와 실시간 정보 처리.다양한 라이브러리React, Angular, Vue.jsD3.js, DOM 조작JQuery서버 개발Node.js : 자바스크립트로 백엔드 개발을 할 수 있도록 만듬.기존 서버 개발 언어는 PHP, 자바, 닷넷이나 자바스크립트로 서버개발 영역을 확대함.웹 브라우저와 자바스크립트웹 브라우..

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주축 배치하..

DAY 14🔖 오늘 읽은 범위 :⭐️01/22(목) 진도표 알림✅공부 내용: 10 반응형 웹과 미디어 쿼리✅ 쪽수: 315~340쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**반응형 웹 알아보기반응형 웹 디자인화면 크기가 다양해짐. 모바일 기기.기존 웹 사이트 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시할 수 있음.웹 요소를 화면 크기에 맞게 재배치하고 표시 방법만 바꾼다.모바일 기기를 위한 뷰포트뷰포트(Viewport) : 스마트폰 화면에서 실제 내용이 표시 되는 영역.뷰포트는 태그를 이용해서 태그 사이에 작성한다. content 속성을 이용해 뷰포트 속성과 속성값을 지정함.종류설명가능한 값기본값width뷰포트 너비.device-width 크기브라우저 기본값 height뷰포..