[웹제작 강의] 2주차 세부 계획안: CSS 개념 및 스타일링

📌 2주차 세부 계획안: CSS 개념 및 스타일링

📅 주당 강의 횟수: 매주 2회, 각 1시간 30분 진행
🕒 강의 시간: 총 3시간 (1시간 30분 × 2회)
(요일 및 정확한 시간은 관계자와 협의 후 확정)

 

 

---

📌 2주차 1회차 강의 (1시간 30분)

🎯 학습 목표

• CSS의 기본 개념을 익히고, 웹페이지에 스타일을 적용하는 방법을 학습한다.
• CSS의 선택자와 속성을 이해하고, 기본적인 스타일링을 적용할 수 있다.
• 은성 업무용 웹사이트(eunsung.biz)의 CSS 코드 구조를 분석하고, 기존 스타일을 이해한다.

📅 강의 진행 계획

시간 강의 내용 실습 활동 비고

15분	CSS 개요 및 스타일 적용 방법	- CSS 개념 및 역할- CSS 적용 방법 (inline, internal, external)	HTML 문서에 직접 CSS 적용해보기
20분	CSS 기본 선택자 학습	- 태그 선택자, 클래스 선택자, 아이디 선택자- 그룹 선택자, 전체 선택자	선택자를 활용하여 HTML 요소 스타일링 실습
20분	CSS 속성 및 기본 스타일링	- 색상(color), 배경(background), 테두리(border)- 글꼴(font), 정렬(text-align)	웹페이지에 다양한 스타일 속성 적용
25분	은성 웹사이트 CSS 분석 (기초)	- 은성 업무용 웹사이트의 CSS 코드 분석- 주요 스타일 요소 확인	브라우저 개발자 도구(F12) 활용하여 CSS 코드 탐색

📌 1회차 과제

✅ CSS를 적용한 기본 스타일 페이지 만들기

• 배경색, 글꼴, 테두리, 정렬 등을 적용한 간단한 HTML 페이지 작성

✅ 은성 웹사이트의 스타일 분석 리포트 작성

• 주요 CSS 스타일 요소 분석 및 설명 작성
• 개발자 도구(F12)를 활용하여 주요 스타일 속성 캡처 후 정리

---

📌 2주차 2회차 강의 (1시간 30분)

🎯 학습 목표

• CSS의 박스 모델과 배치 방법을 익혀 웹페이지의 레이아웃을 조정할 수 있다.
• 은성 업무용 웹사이트(eunsung.biz)의 CSS 레이아웃을 분석하고, 유사한 구조를 구현한다.

📅 강의 진행 계획

시간 강의 내용 실습 활동 비고

15분	CSS 박스 모델 이해	- 박스 모델의 개념 (margin, border, padding, content)- 요소 크기(width, height) 설정	박스 모델을 활용한 간단한 레이아웃 실습
20분	CSS 배치 방법 (display, position, flexbox)	- display 속성 (block, inline, inline-block, flex)- position 속성 (static, relative, absolute, fixed)	요소를 배치하는 다양한 방법 실습
25분	은성 웹사이트 레이아웃 분석 및 구현	- 은성 웹사이트(eunsung.biz)의 레이아웃 구조 분석- 주요 레이아웃 요소 구현	기존 웹사이트의 레이아웃을 참고하여 클론 제작
25분	CSS 레이아웃 실습	- 은성 웹사이트의 스타일을 반영한 기본 레이아웃 제작	CSS를 활용한 실전 웹페이지 레이아웃 설계

📌 2회차 과제

✅ 박스 모델을 활용한 카드 UI 만들기

• 박스 모델을 활용하여 간단한 카드 UI 스타일링
• 박스 크기, 여백, 패딩을 조정하여 UI 구성

✅ 은성 웹사이트의 기본 레이아웃 클론 제작

• 은성 웹사이트의 메인 페이지 또는 서브 페이지 중 하나를 참고하여 유사한 레이아웃 구현
• HTML & CSS를 활용하여 기본적인 배치 적용

---

📌 2주차 학습 정리 및 기대 효과

• CSS의 기본 문법과 선택자를 익혀 웹페이지에 스타일을 적용할 수 있다.
• 박스 모델과 배치 속성을 활용하여 HTML 요소를 효과적으로 배치할 수 있다.
• 은성 업무용 웹사이트(eunsung.biz)의 스타일링 구조를 분석하고, 이를 응용하여 유사한 디자인을 구현할 수 있다.

---

📌 3주차부터는 JavaScript를 활용하여 동적인 기능을 추가하는 방법을 학습하며, 실제 웹사이트에서 사용되는 인터랙션을 구현하는 연습을 진행할 예정입니다.

🚀 PPT 가로 형식으로 정리하여 활용할 수 있도록 구성할 예정이니, 추가 요청이 있으면 알려주세요! 😊