1. | 1-1. 에디터 설치와 사용 | •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, | ||
1-2. HTML 태그 기초 | •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, | |||
1-3. CSS 기본 문법 | •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, | |||
1-4. Anchor태그, <a> | •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, | |||
1-5. Image 태그 <img> | •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, | |||
2. | 2-1. 클래스(class), 아이디(id) | •클래스 (class)
•아이디 (id)
• 태그
•CSS 적용하는 방식들 |
||
2-2. <div> 태그 | •클래스 (class)
•아이디 (id)
• 태그
•CSS 적용하는 방식들 |
|||
2-3. CSS 적용하는 방식들 | •클래스 (class)
•아이디 (id)
• 태그
•CSS 적용하는 방식들 |
|||
2-4. 코멘트 달기(주석 처리하기) | •클래스 (class)
•아이디 (id)
• 태그
•CSS 적용하는 방식들 |
|||
2-5. 크롬 개발자 도구 | •클래스 (class)
•아이디 (id)
• 태그
•CSS 적용하는 방식들 |
|||
3. | 3-1. 텍스트 색상, 텍스트 굵기 | •코멘트 달기 •크롬 개발자 도구 •텍스트 스타일링 •폰트 설정 • 태그 | ||
3-2. 텍스트 정렬 | •코멘트 달기 •크롬 개발자 도구 •텍스트 스타일링 •폰트 설정 • 태그 | |||
3-3. 폰트 설정, <span>태그 | •코멘트 달기 •크롬 개발자 도구 •텍스트 스타일링 •폰트 설정 • 태그 | |||
4. | 4-1. 중간 점검 프로젝트 - Figma, 이미지 찾아넣기 | 프로젝트 실습 | ||
5. | 5-1. Box Model 개념 소개, Margin/Padding의 차이 | •Box Model 개념 소개 •Margin, Padding의 차이 •Margin, Padding 설정 •Overflow•Border •박스 꾸미는 몇가지 방법들 •Box-sizing •배경 이미지 넣기 | ||
5-2. Margin/Padding 설정, Overflow, Border | •Box Model 개념 소개 •Margin, Padding의 차이 •Margin, Padding 설정 •Overflow•Border •박스 꾸미는 몇가지 방법들 •Box-sizing •배경 이미지 넣기 | |||
5-3. box-sizing | •Box Model 개념 소개 •Margin, Padding의 차이 •Margin, Padding 설정 •Overflow•Border •박스 꾸미는 몇가지 방법들 •Box-sizing •배경 이미지 넣기 | |||
5-4. 배경 이미지 넣기 | •Box Model 개념 소개 •Margin, Padding의 차이 •Margin, Padding 설정 •Overflow•Border •박스 꾸미는 몇가지 방법들 •Box-sizing •배경 이미지 넣기 | |||
6. | 6-1. 선택자 (1) | •선택자 •스타일 상속 •명시도 | ||
6-2. 선택자 (2) | •선택자 •스타일 상속 •명시도 | |||
6-3. 스타일 상속, 명시도 | •선택자 •스타일 상속 •명시도 | |||
7. | 7-1. Display속성, inline-block 특징 | •Display 속성 •inline-block 특징 •다양한 링크의 모습 •수평 방향 가운데 정렬 | ||
7-2. 다양한 링크의 모습 | •Display 속성 •inline-block 특징 •다양한 링크의 모습 •수평 방향 가운데 정렬 | |||
7-3. 수평 방향 가운데 정렬 | •Display 속성 •inline-block 특징 •다양한 링크의 모습 •수평 방향 가운데 정렬 | |||
8. | 8-1. Flexbox container (1) | •Flexbox 이해 •Flexbox container 설정 •justify-content •align-items | ||
8-2. Flexbox container (2) | •Flexbox 이해 •Flexbox container 설정 •justify-content •align-items | |||
8-3. justify-content | •Flexbox 이해 •Flexbox container 설정 •justify-content •align-items | |||
8-4. align-items | •Flexbox 이해 •Flexbox container 설정 •justify-content •align-items | |||
9. | 9-1. Flex 아이템 설정 | •Flex 아이템 설정 •flex-grow •flex-shrink •flex-basis | ||
9-2. Flex-grow | •Flex 아이템 설정 •flex-grow •flex-shrink •flex-basis | |||
9-3 Flex-shrink | •Flex 아이템 설정 •flex-grow •flex-shrink •flex-basis | |||
9-4. Flex 실습 | •Flex 아이템 설정 •flex-grow •flex-shrink •flex-basis | |||
10. | 10-1. 미디어 쿼리 활용 | •반응형 웹 •미디어 쿼리 활용 | ||
10-2. 실습 | •반응형 웹 •미디어 쿼리 활용 | |||
11. | 11-1. position 종류, position:relative | •Position 종류 •position: relative •position: fixed •position: absolute | ||
11-2. position: fixed | •Position 종류 •position: relative •position: fixed •position: absolute | |||
11-3. position: absolute | •Position 종류 •position: relative •position: fixed •position: absolute | |||
12. | 12-1. 웹사이트 기획 | •웹사이트 기획 •웹사이트 디자인 •Netlify로 내보내기 •웹사이트 평가하기 | ||
12-2. 웹사이트 디자인 | •웹사이트 기획 •웹사이트 디자인 •Netlify로 내보내기 •웹사이트 평가하기 | |||
12-3. 웹사이트런칭 - Netlify로 내보내기 | •웹사이트 기획 •웹사이트 디자인 •Netlify로 내보내기 •웹사이트 평가하기 |