## 주제 - 웹 개발 입문을 위한 프론트엔드 기초 학습 ## 목표 - 부트스트랩을 이용한 나만의 웹 페이지 만들기 ## 커리큘럼 ### Part I: HTML 1. HTML 기초 2. HTML 리스트와 테이블 ### Part II: CSS 3. CSS 기초 4. CSS Box 모델 ### Part III: Bootstrap 5. Bootstrap 기초 6. Bootstrap 레이아웃 7. Bootstrap 나만의 웹 페이지 만들기 I 8. Bootstrap 나만의 웹 페이지 만들기 II ## 대상 + '웹 개발을 배워볼까?' 고민 중인 당신! ## 시간 및 장소 + 협의 ## 연락처 + 카톡: chaesam + 메일: sehongpark@cloudstudying.kr
# HTML 시작하기 ## 쪽지시험 1. **HTML**이란? - https://goo.gl/2hiBDs 2. HTML의 구성 요소(elements)인 **태그**(tag)와 태그의 **속성**(attribute)이란? - https://goo.gl/ScrBN5 3. 웹 페이지의 기본 구조는? `head`태그와 `body`태그의 차이? - https://goo.gl/f6CpGK ## 실습내용 ### 1. 음식 ![Imgur](https://i.imgur.com/VcWxstm.png) ### 2. 쇼핑 ![Imgur](https://i.imgur.com/4GRLKGC.png) ## 확인하기 1. `title` 태그와 `h1` 태그의 차이는? 2. 머릿글에 따른 문단을 작성하려면? 3. 이미지를 불러오려면? 4. 다른 페이지로 이동시키려면? ## 피드백 - 아쉬운 부분 이야기 - 어떻게 개선해 갈지? - 좋았던 점 나누기
# HTML 리스트와 테이블 ## 쪽지시험 1. HTML 태그 중 `<ol>`과 `<ul>`의 차이는? 2. HTML 태그인 `<table>`을 구성하는 핵심 태그들은? ## 실습내용 ### 이상형 ![Imgur](https://i.imgur.com/lBEsFzC.png) ### 영화 ![Imgur](https://i.imgur.com/3c2FkCL.png) ## 확인하기 ## 피드백 - 아쉬운 부분이 있다면? - 어떻게 개선하면 좋을까? - 좋았던점 나누기!
# CSS와 셀렉터 ## 사전 과제 아래 질문에 대한 답변을 조사하여 간략히(각 100자 이내) 답변하시오. 1. CSS란 무엇인가? 2. CSS의 장점은? 3. CSS 박스모델에 대해 설명하시오. ## 실습 과제 ### 나를 소개합니다 ![Imgur](https://i.imgur.com/lWnGxbU.png) ### 뼈대코드 `first-css.html` ``` <!DOCTYPE html> <html> <head> <title>My First CSS!</title> <link rel="stylesheet" href="custom.css" /> </head> <body> <h1>나를 소개합니다</h1> <p>나는 겐지.. 고독한 사나이지..</p> <img src="https://goo.gl/BFX4PW" /> <h2>좋아하는 음식</h2> <ol> <li>치 킨</li> <li>보 쌈</li> <li>샐러드</li> </ol> <p> <a href="http://naver.com">네이버로 이동!</a> <a href="http://google.com">구글로 이동!</a> <a href="http://facebook.com">페이스북으로 이동!</a> </p> </body> </html> ``` `custom.css` ``` body { /* default styling */ background: gray; } h1 { /* default styling */ background: black; color: white; /* css-box */ padding: 0; border: 3px solid white; margin: 5px 10px; } p { /* default styling */ color: rgb(255, 255, 255); /* css-box */ padding: 10px 23px; border: 3px solid white; margin: 5px 10px; } img { /* default styling */ /* css-box */ } h2 { /* default styling */ /* css-box */ } ol { /* css-box */ } li { background: pink; } a { /* default styling */ /* css-box */ } ```
# 부트스트랩(bootstrap) ## 사전 과제 아래 질문에 대한 답변을 HTML & CSS를 사용하여 작성하시오. 1. 부트스트랩이란? 2. 부트스트랩의 장점 ## 실습 과제 아래 예시 페이지를 작성하시오. ### A. 스타터 Template #### 샘플 ![Imgur](https://i.imgur.com/5WYQFTc.png) #### 힌트 - navbar (https://getbootstrap.com/docs/4.3/components/navbar/) ### B. 점보트론 #### 샘플 ![Imgur](https://i.imgur.com/S4G1sWD.png) #### 힌트 - jumbotron (https://getbootstrap.com/docs/4.3/components/jumbotron/) ### C. 레이아웃 #### 샘플 ![Imgur](https://i.imgur.com/DUh6Caw.png) #### 힌트 - layout (https://getbootstrap.com/docs/4.3/layout/overview/) - grid (https://getbootstrap.com/docs/4.3/layout/grid/)