꿈소년의 개발 이야기

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

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..