HTML/CSS 스터디
4주
강남
입문
x 3
# HTML/CSS 스터디 입문
## 나만의 웹페이지!
딱 8시간만 투자하세요!
## 무엇을 배워야 할까?
HTML/CSS/JS를 배워야 합니다.
이들은 각각 문서를 만들고(HTML), 스타일링(CSS)을 하며, 기능(JS)를 부여합니다.
## 어디서부터 시작?
먼저는 HTML로 다양한 문서를 만들어보세요.
(좋아하는 음식, 영화, 아이돌 등..)
다음으로 CSS를 통해 위 문서들을 예쁘게 꾸며주세요.
(쌩얼 미인도 좋지만, 메이크업을 통해 다양한 연출이 가능하다면 더 좋겠죠?)
마지막으로 잘 만들어진 도구.
Bootrap을 사용하여 보다 빠르게 웹 페이지를 만들어 봅시다.
## 어렵지 않나?
노트북과 열정. 이 두 가지가 없다면, 어려울지도..
## 독학으로 공부하는건?
스스로 배움을 즐기신다면 독학도 추천드립니다.
단, 시행착오의 늪! 이를 조심하세요!
혼자 5시간 시행착오를 거치며 얻은 지식이, 단 몇 분만에 익힐 수 있는 것이라면?
(남은 4시간 30분동안 아르바이트를 해도 개이득..)
## 수업 마치면..?
- 개인 이력서를 만들 수 있습니다
- Bootstrap을 활용하여 나만의 웹 페이지를 만들 수 있습니다.
- Bootstrap 테마를 활용할 수 있습니다.
## 어떻게 공부해야..?
#### 로드맵 그리기
수많은 개념을 하나로 꿰어야 합니다.
단순하고 직관적인 이미지로 모든 개념을 통합하세요!
#### 실전적 학습
내가 좋아하는 아이돌, 음식, 영화 등...
일상을 투영한 웹 페이지를 만들어보세요!
#### 온라인 QnA
독학으로 공부할 때 가장 어려운 점! 내가 무엇을 모르는지조차 알지 못한다는 것입니다.
온라인 질의 응답을 통해, 레버리지 학습을 해보세요.
## 목표
- 국비 지원 교육 웹 프로그래밍 완전 정복!
- 웹 프로그래밍 학점 A+ 받기!
- 웹 디자이너 완벽 입문!
## 커리큘럼
1. HTML 기초
2. CSS 선택자와 박스모델
3. Bootstrap 나만의 웹 페이지 만들기
4. Bootstrap 테마 활용하기
5. 나만의 이력서 만들기
6. 스타벅스 따라하기
## 시간 및 장소
- 온라인 수업: 컴퓨터가 있는 곳, 시간 협의
- 오프라인 수업: 스터디룸 또는 카페(비용 개별 부담), 시간 협의
## 비용
- 온라인 코칭: 월 5만원
- 오프라인 수업(4회, 회당 2시간 기준 비용)
- 1인 수업: 30만원
- 2인 수업: 25만원
- 3인 수업: 20만원
- 4인 이상: 15만원
## 수업 문의
- 좌측 상단 참가 신청 후
- 아래 연락처로!
## 연락처
+ 카톡: chaesam
+ 메일: [email protected]
# HTML과 CSS
주어진 질문에 답하며, 학습 내용을 확인해봅시다.
## 웹 서비스 개요
+ 웹이란?
+ 웹 서비스의 동작원리를 설명하시오.
+ 프론트 엔드와 백 엔드는 어떤 차이가 있을까?
+ HTML/CSS/JS의 역할?
## HTML
+ HTML이란?
+ HTML의 기본 구조?
+ 기본 태그, 텍스트/미디어/링크/리스트/테이블을 설명하시오.
## CSS
+ CSS란?
+ CSS 셀렉터란?
+ CSS 박스모델이란?
## 실전 꿀팁
+ 유튜브 영상을 HTML 문서에 삽입하는법?
+ CSS를 HTML에 적용하려면 무엇을 해야 하나?
+ 구글링을 훈련해야 하는 이유?
# 부트스트랩
### 개요
+ 부트스트랩의 정의 및 장점은?
+ 스타터 템플릿이란?
+ 외부 CSS를 HTML 문서에 연결하는 법은?
### 연습
1. 아래 코드에서 jumbotron/btn/btn-primary의 역할을 설명하시오.
```
<div class="jumbotron">
<h1>Hello, world!</h1>
<hr />
<button class="btn btn-primary"></button>
</div>
```
2. 레이아웃을 잡기 위한 3가지 클래스, container/row/col을 설명하시오.
### 학습법
+ 부트스트랩 학습 순서는 아래와 같다. 각 영역 별, 제공 요소들을 살펴보시오.
+ 스타터 템플릿 설정 (https://bit.ly/2UxX9km)
+ 컴포넌트 학습 (https://t.ly/Nl1YW)
+ 레이아웃 연습 (https://bit.ly/3deNRCh)
+ 유틸리티 클래스 (https://bit.ly/3af27cc)
# 실전 코드 연습
주어진 질문에 답하며, 학습 내용을 확인해봅시다.
## Google 따라 만들기
1. 위 페이지를 만들기 위한 HTML을 구성하시오.
2. :nth-child() 선택자를 설명하시오.
3. flex 컨테이너의 역할은?
4. icon을 웹 페이지에 넣는 방법을 설명하시오.
5. :hover 선택자의 효과는?
## 부트스트랩 레이아웃
1. 컨테이너란 무엇이고, 그 역할은?
2. 하나의 row는 몇 col으로 구성되는가?
3. 반응형 웹이란 무엇인지 설명하시오.
4. 부트스트랩에서 sm, md, lg, ... 의 의미를 설명하시오.
5. row 안쪽에 row를 또 넣을 수 있는가? 있다면 그 목적은 무엇일지 예상하시오.