꿈소년의 개발 이야기

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

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뷰포트 ..

DAY 13🔖 오늘 읽은 범위 : ⭐️01/21(수) 진도표 알림✅공부 내용: 09 이미지와 그러데이션 효과로 배경 꾸미기✅ 쪽수: 289~312쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**이미지와 그러데이션 효과로 배경 꾸미기배경 : 단순 색상 이나 이미지 사용. 그러데이션 넣기. 색 투명도 조절.배경색과 배경 범위 지정하기배경색 지정 : background-color배경색 : backgroud-color 로 지정.16진수, rgb 값, 색상 이름으로 지정 가능.이 속성은 예외로서 하위 요소로 적용되지 않음.모든 웹 문서 요소는 기본적으로 배경이 투명함. body 스타일로 지정한 문서 배경이 그대로 비치는 것.배경색 적용 범위 조절 : background-clip배경의 적용 범위 조절.종류..

DAY 12🔖 오늘 읽은 범위 : ⭐️01/20(화) 진도표 알림✅공부 내용: 08 CSS 박스 모델(2)✅ 쪽수: 262~287쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**여백을 조절하는 속성요소 주변의 여백 설정 : margin마진(margin) : 요소 주변의 여백박스 모델 4개 방향 적용.margin- 예약어로 특정 방향 지정./* 크기: 너비 또는 높이. px, em 단위. 백분율: 박스모델을 포함한 부모 요소 기준으로 너비 또는 높이를 퍼센트로 지정. auto: display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정. */margin: | | automargin 속성에서 속성 값을 여러 개 지정 가능. 값이 여러 개이면 top → right → b..

DAY 11🔖 오늘 읽은 범위 :⭐️01/19(월) 진도표 알림✅공부 내용: 08 CSS 박스 모델(1)✅ 쪽수: 240~261쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**CSS 박스 모델웹 문서의 내용을 박스 형태로 정의하는 방법.마진, 테두리, 패딩 등등의 개념 ⇒ CSS 에서 자주 사용하는 것으로 잘 기억하자.블록 레벨 요소와 인라인 레벨 요소박스 모델 나열 방법이 달라지는 기준.블록 레벨 요소태그를 사용해 요소를 넣을 때 혼자 한 줄을 차지하는 것.해당 요소 너비가 100% 임.양측에 다른 요소가 올 수 없음.ex) , , 등등인라인 레벨 요소한 줄을 차지 하지 않음.영역을 콘텐츠 만큼만 차지 함.나머지 공간에 다른 요소가 들어옴.ex) , , 박스 모델의 기본 구성블록 레벨 요소,..

DAY 10🔖 오늘 읽은 범위 : 🔥01/16(금) 진도표 알림👉🏻공부 내용: 07 텍스트를 표현하는 다양한 스타일(2)👉🏻쪽수: 212~238쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**텍스트 관련 스타일글꼴은 폰트와 관련된 것.텍스트 스타일은 글자와 단어, 단락에서 사용하는 스타일에 대한 것.글자 색 지정 : color 속성color: 색상 표시16진수 : #RRGGBB R: Red, G: Green, B: Blue ex) #0000FF == #00Fhsl, hsla : hue(색상), saturation(채도), lightness(명도), alpha(불투명도) 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시. ex) hsl(0, 100%, 50%), hsla(0, ..

DAY 9🔖 오늘 읽은 범위 : 🔥01/15(목) 진도표 알림👉🏻공부 내용: 07 텍스트를 표현하는 다양한 스타일(1)👉🏻쪽수: 195~211쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**텍스트를 표현하는 다양한 스타일글꼴 관련 스타일텍스트 스타일글자의 모양새를 지정하는 글꼴 스타일웹 문서에 표시되는 텍스트를 지정하는 문단 스타일font 로 시작하는 속성 ⇒ 글꼴과 관련이 있음.글꼴을 지정한다 = font-family/* 기본형 */font-family: | [, ]웹 문서에서 사용하는 글꼴 지정., , 태그 처럼 텍스트를 사용하는 요소에서 주로 사용.body { font-family: "맑은 고딕", 돋움, 굴림 }/* "맑은 고딕" 처럼 두 단어 이상으로 된 글꼴 이름은 큰따옴표..

DAY 8🔖 오늘 읽은 범위 :🔥01/14(수) 진도표 알림👉🏻공부 내용: 06 CSS의 기본(1)👉🏻쪽수: 170~193쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**스타일과 스타일 시트CSS; cascading style sheets스타일 : HTML 문서에 글꼴, 색상, 정렬, 각 요소의 배치 방법 같은 겉모습을 결정짓는 것HTML로 웹사이트 내용을 나열하고 → CSS 로는 웹 문서 디자인을 구성한다 ⇒ 웹 표준의 시작.내용과 스타일의 분리 ⇒ 서로 영향을 미치지 않는다.다양한 기기에 맞춰서 스타일이 바뀌는 문서 ⇒ 반응형 웹 디자인스타일 형식// 기본형태선택자 { 속성1: 속성값1; 속성2: 속성값2; }다양한 CSS 속성.스타일 규칙을 작성하는 방법세미콜론(;)으로 구분하여 ..

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, 부트스트랩 등리..