# 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 + 메일: sehongpark@cloudstudying.kr
# HTML과 CSS 주어진 질문에 답하며, 학습 내용을 확인해봅시다. ## 웹 서비스 개요 ![클라우드스터딩-자바-웹-서비스-개요](https://i.imgur.com/pUqn00V.png) + 웹이란? + 웹 서비스의 동작원리를 설명하시오. + 프론트 엔드와 백 엔드는 어떤 차이가 있을까? + HTML/CSS/JS의 역할? ## HTML ![클라우드스터딩-HTML](https://i.imgur.com/eX00vYj.png) + HTML이란? + HTML의 기본 구조? + 기본 태그, 텍스트/미디어/링크/리스트/테이블을 설명하시오. ## CSS ![클라우드스터딩-CSS](https://i.imgur.com/nbGacvM.png) + 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 따라 만들기 ![클라우드스터딩-HTML-CSS-구글-페이지](https://i.imgur.com/J51UkZj.png) 1. 위 페이지를 만들기 위한 HTML을 구성하시오. 2. :nth-child() 선택자를 설명하시오. 3. flex 컨테이너의 역할은? 4. icon을 웹 페이지에 넣는 방법을 설명하시오. 5. :hover 선택자의 효과는? ## 부트스트랩 레이아웃 ![클라우드스터딩-부트스트랩-card](https://i.imgur.com/G400jvI.png) 1. 컨테이너란 무엇이고, 그 역할은? 2. 하나의 row는 몇 col으로 구성되는가? 3. 반응형 웹이란 무엇인지 설명하시오. 4. 부트스트랩에서 sm, md, lg, ... 의 의미를 설명하시오. 5. row 안쪽에 row를 또 넣을 수 있는가? 있다면 그 목적은 무엇일지 예상하시오.