[스파르타코딩클럽] 덕담 공유 코딩 패키지

• program/스파르타코딩클럽

[스파르타코딩클럽] 덕담 공유 코딩 패키지

oujin 2022. 1. 29. 14:56

728x90

[수업 목표]

HTML, CSS의 기초 지식을 이해한다.
모바일 대응 가능한 페이지를 완성한다.
나만의 웹페이지를 완성한다!

[목차]

01. 오늘 배울 것

1. 서버/클라이언트/웹의 동작 개념
<aside> 👉 크롬 창에서 보이는 웹페이지는 어떤 원리로 보여지는 것일까요? 원리를 알기 위해서, 일단 해킹부터 해보죠! (응?)
- 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서" → "그려주는" 것입니다. 즉, 브라우저는 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일을 한답니다.
- 그런데 이 HTML파일에는 세 가지가 섞여 있으니, 바로바로!<aside> 💡 오늘 우리가 만드는 것은, 이 HTML 파일이에요. 이것을 스파르타 서버에 올리고, 친구들이 볼 수 있게 할 것이랍니다.</aside>
- → 올리는 것은 대신 해드릴게요! 웹개발 종합반을 들으면 직접 할 수 있어요!
- 뼈대: HTML, 꾸미기: CSS, 움직이기: Javascript 랍니다.
</aside>

02. 준비하기

1. Visual Studio Code (VS Code)
<aside> 👉 한글을 편하게 쓰려면? → 워드, 한컴 과 같은 프로그램을 쓰는 것처럼</aside>
- [코드스니펫] - VS Code 다운로드
- <https://code.visualstudio.com/download>
- 윈도우: 추가 작업 없이 설치 완료
- 맥북: 마우스 오른쪽 클릭 후 '열기'를 클릭해두기
  1. 위 링크에서 Visual Studio Code를 다운로드 받습니다.
  2. Visual Studio Code파일을 더블클릭하여 실행합니다.
  3. 아래와 같은 메시지가 뜹니다. **[Finder에서 보기]**를 클릭합니다.
  4. Visual Studio Code를 우클릭하고, [열기] 를 누릅니다.
  5. 한번 더 **[열기]**를 누르시면 설치가 끝납니다! 이제부턴 그냥 여실 수 있습니다!
코딩을 할 때도 마찬가지!
1. 결과물 구경하기
<aside> 👉 나만의 덕담 공유 사이트를 만들어 볼 예정입니다!
- [코드스니펫] - 결과물 예시
- <http://spartacodingclub.shop/free_newyear_2022>
- 클라이언트 ↔ 서버 통신을 간단히 이해해볼 수 있어요!
- 모바일 대응 가능한 웹페이지를 만들어봅니다.
- 공유를 위한 밑작업과, 모바일 버전 처리까지 빠르게 다~ 해볼게요!
</aside>

03. HTML 기본 내용

1. HTML 기초
- HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
- head 안에 들어가는 대표적인 요소들: meta, script, link, title 등</aside>
- <aside> 👉 페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. 나중에 body 작업을 하면서 필요한 정보들을 넣어보겠습니다.
- body 안에 들어가는 대표적인 요소들!
  - [코드스니펫] - HTML 기초
  - 나는 구역을 나누죠 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.h3~h6도 각자의 역할이 있죠. 비중은 작지만..
    a 태그입니다: 하이퍼링크
    img 태그입니다:
    input 태그입니다:
    button 태그입니다:
    textarea 태그입니다:
    - bullet point!1
    - bullet point!2
  - h2는 소제목입니다.
  - 나는 문단이에요
  <aside> 👉 이 외에도 아주 많으며, 개발자들도 모두 외우고 있지 않습니다. 필요할 때마다 찾아서 넣어보세요! 코딩은 구글링이 필수랍니다!<aside> 👉 잠깐! 정렬의 중요성 코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. VSCode에선 ctrl+K+F(맥은 cmd+K+F)로 자동정렬이 가능하답니다!
- </aside>
- </aside>

04. CSS 기본 내용

1. CSS 기초
- 무언가를 꾸미려면, 일단 가리켜야 가능한 일! 자주 쓸 CSS들을 미리 배워볼게요.[주의] 계~속 나올거니까, 외우지 못해서 걱정하지 마세요! 코딩 절대로 외우는 것 아닙니다! 찾아서 쓰는 거예요!
  1. 태그를 바로 가리켜서 꾸며주기
  2. h1 { color: red; }
  3. 이름표를 붙이고 꾸며주기
  4. .test { color: green; font-size: 50px; }
- </aside>
- <aside> 👉 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다.

05. 오늘 쓰일 CSS 공부하기

CSS 응용

오늘 쓸 CSS만 공부해도, 원하는 모양을 만들 수 있습니다!</aside>

우선 example2.html 파일을 만들고, 기본 html 구조를 잡읍시다

우선 div로 구역을 나눠주고 실습할게요!

<div class="box">
    <div>첫 번째 구역</div>
    <div>두 번째 구역</div>
</div>

눈에 보이지 않았던 '구역'에 사이즈를 주고, 색을 칠해줍니다!

.box {
    background-color: green;	
	  width: 800px;
	  height: 800px;
		color: white;
}

첫 번째 구역(red)과 두 번째 구역(blue)에도 사이즈를 주고 색을 칠해볼게요!

.first {
    background-color: red;
		width: 300px;
		height: 300px;
}
.second {
    background-color: blue;
		width: 400px;
		height: 400px;
}

한걸음 더 나가볼까요?

배치도 살짝 바꿔보고, (display: flex)

.box {
    background-color: green;
    color: white;

    width: 800px;
    height: 800px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.first {
    background-color: red;

    width: 300px;
    height: 300px;
}

.second {
    background-color: blue;
    width: 400px;
    height: 400px;
}

margin으로 둘 사이의 간격을 살짝 띄어주면 끝!

.box {
    background-color: green;
    color: white;

    width: 800px;
    height: 800px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.first {
    background-color: red;

    width: 300px;
    height: 300px;

    margin-bottom: 20px;
}

.second {
    background-color: blue;
    width: 400px;
    height: 400px;
}

<aside> 👉 반복해서 알려드립니다 - 외우지 마세요! 코딩은 찾아보면서 하는 것!

06. 본격 만들기 시작!

1. 결과물을 보고 계획세우기
<aside> 💡 일단 만들기 전에, 어떻게 만들지 계획을 세우는 것이 중요합니다.
- 결과물 보기
- 결과물을 분석해볼까요!
  1. 우선 배경이 있고,
  2. 위에 타이틀이 있고,
  3. 그 밑으로 아이템들이 있고,
  4. 마지막에 떠다니는 버튼이 있네요!
- 배경 div 만들어보기
  1. index.html 파일을 만들고 본격적으로 시작해볼게요!
  2. 먼저, <title>덕담하나 주면 안잡아먹지</title> 을 채워보아요.
  3. 본격적으로 배경이 될 div를 만들어 넣어봅시다!
  4. .background { background-color: green; width: 400px; height: 800px; } <div class="background"></div>
</aside>

07. 배경 채우기

1. 그림으로 배경 채우기
1. 준비된 그림으로 배경을 채워봅니다!
  - [코드스니펫] 배경 이미지
  - <https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>
```
.background {
    background-color: green;
    width: 400px;
    height: 800px;

    background-image: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>');
    background-position: center;
    background-size: cover;
}
```
2. 배경을 가운데로 옮겨봅시다!
3. .background { background-color: green; width: 400px; height: 800px; background-image: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>'); background-position: center; background-size: cover; margin: auto; }
4. 모바일로 보기!
5. → 350 x 700 으로 맞춰서 보기!
6. 배경을 화면에 꽉 차게 해보기
7. .background { background-color: green; width: 100vw; height: 100vh; background-image: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>'); background-position: center; background-size: cover; margin: auto; }
8. 가로 길이 : 늘어나는 최대치를 주기
9. .background { background-color: green; max-width: 450px; width: 100vw; height: 100vh; background-image: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>'); background-position: center; background-size: cover; margin: auto; }
10. body의 짜투리 여백을 없애기→ 오늘 쓸 h1태그, p태그도 함께 여백을 없애줄게요!
11. body, h1, p { margin:0; padding:0; }
12. → HTML 태그의 기본적인 여백을 없애줘야 편하답니다!
13. 완성!

08. 제목 채우기

1. 제목 div 구상하기
<aside> 💡 먼저, 무얼 어떻게 만들지 전략을 세워봅시다!
- 만들 것 보기 & 전략 세우기
- 빨간색 큰 div로 묶고, 그 사이에 작은 것들을 위치시키면 어떨까요?→ 그리고 가운데 정렬은? display:flex 를 써보겠습니다.
- → div, h1, p, span 태그를 써 볼거예요!
</aside>
1. 제목 div 만들기
1. div 구조 잡기
2. <div class="title"> <h1>덕담 하나 주면 안 잡아먹지!</h1> <p>범규 님이 받은 덕담: <span>2개</span></p> </div>
3. 꾸며볼까요? - title부터
4. .title { background-color: green; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 5vh; }
5. h1 : 덕담 하나 주면 안 잡아먹지! 배경이 있는 글자를 만들어볼까요?
6. .title > h1 { font-size: 22px; background-color: white; padding: 8px 16px; border-radius: 16px; margin-bottom: 16px; }
7. p : 받은 덕담을 텍스트로 보여줍시다!
8. .title > p { font-size: 18px; } .title > p > span { font-size: 22px; }
9. 마지막으로 배경색을 없애고, 글씨색을 더하면 끝!
  - [코드스니펫] 글씨색
  - #3f3732
```
.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-top: 5vh;

    color: #3f3732;
}
```
10. 완성!

09. 폰트 바꾸기

1. 폰트 적용하기
<aside> 💡 폰트를 적용하면 ‘확’ 달라질거예요! 🙂
1. 폰트 import 하는 방법
  - [코드스니펫] 폰트 코드
  - @font-face { font-family: 'Cafe24Ssurround'; src: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff>') format('woff'); } * { font-family: 'Cafe24Ssurround'; }
2. 그대로! 붙여넣으면 끝!
```
@font-face {
    font-family: 'Cafe24Ssurround';
    src: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff>') format('woff');
}

* {
    font-family: 'Cafe24Ssurround';
}
```
3. → url 부분만 바꿔 넣으면, 내가 가진 폰트 파일로 보여지게 할 수 있답니다.
</aside>

10. 떠다니는 버튼 만들기

1. 덕담쓰기 버튼 만들기
<aside> 💡 먼저, 무얼 어떻게 만들지 전략을 세워봅시다!
- 만들 것 보기 & 전략 세우기
1. 버튼 div 만들기
2. <div class="btn">바구니에 덕담 남기기</div>
3. 우선 모양을 만들기→ font-size: 18px;
```
.btn {
    width: 300px;
    height: 50px;
    background-color: #3f3732;

    color: white;

    font-size: 18px;
    border-radius: 10px;

    cursor: pointer;
}
```
4. → 커서 모양도 바뀌게!
5. → width: 300px; height: 50px;
6. 글씨를 가운데 오게 하기
7. .btn { width: 300px; height: 50px; background-color: #3f3732; color: white; font-size: 18px; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; }
8. 버튼을 가운데에 떠다니게 하기
9. .btn { width: 300px; height: 50px; background-color: #3f3732; color: white; font-size: 18px; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; bottom: 16px; left: calc(50% - 150px); }
</aside>

11. 덕담 아이콘 넣기

1. 아이콘 넣어보기
<aside> 💡 아이콘을 넣기 전에, 생각해볼 것
1. 아이콘은 언제 붙여지는 것일까요?⇒ 우리는 아직 서버를 안 배웠으니, 남기기 / 붙이기 기능은 스파르타가 만들어두었어요.
2. ⇒ 그치만, 아이콘이 어떻게 붙나 간단히 연습만 해볼게요!
3. ⇒ 네, 사실은 서버에서 데이터를 받아와서 → 자동으로 붙이는 것이랍니다.
4. 아이콘을 붙일 박스를 만들고 → 아이콘 붙이기
  - [코드스니펫] 아이콘
  - <https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/object3.png>
```
.box > img {
    width: 70px;
}
```
5. 아이콘을 원하는 곳에 배치하기
6. .box > img { width: 70px; position: absolute; left: 50%; bottom: 50%; }
</aside>
1. 아이콘에 alert 붙여보기
<aside> 💡 아주 짧게 javascript를 체험해보겠습니다!아래 코드를 써볼까요?
</aside>

12. 스파르타 JS 붙이기

1. 이제 스파르타 JS를 붙여볼까요?
<aside> 💡 서버에 저장하고, 가져오고.. 하는 작업을 모두 해두었답니다. ⇒ 더 궁금하다면 “웹개발 종합반”을 들으세요!
- [코드스니펫] 스파르타 JS
<aside> ✅ 스파르타 JS가 담고 있는것
1. 덕담 기록하기
2. 덕담 불러와서 ⇒ 아이콘 만들어 붙이기
3. 참고! ⇒ 덕담 테스트는 마음 껏 하셔도 됩니다. 실제로 업로드 될 때는 지워집니다!
</aside>
</aside>
1. 기존의 img는 깔끔하게 지워주기!

.box > img {
    width: 70px;
    
    position: absolute;
    cursor: pointer;
}

<div class="box">
</div>

13. 공유를 위한 기초작업

1. 카카오톡, 페이스북에 공유하기
<aside> 👉 아래와 같은 이미지+텍스트 경험 모두 있으시죠!
- [코드스니펫] - og태그 넣기
- og:image, og:title, og:description 을 미리 세팅해두면,
- 카카오톡, 페이스북 등이 공유할 때 가져간답니다. 일종의 약속!
</aside>

14. 배포해보기

<aside> ✅ 아직 백엔드를 배우지 않은 여러분들을 위해! 스파르타가 배포 기능을 만들어두었어요! (배포 기능이 궁금하다면 → 웹개발 종합반에서!)

</aside>

1. 배포하고, URL 받기
<aside> 👉 자, 이제 드디어! 내 웹페이지를 배포해보는 시간입니다!
- [코드스니펫] - 배포하기URL
- <http://spartacodingclub.shop/upload_deokdam>
</aside>
1. 전체 코드

    
    

    
    
    

    
        let mycode = '1f3870be274f6c49b3e31a0c6728957f';

728x90

'• program > 스파르타코딩클럽' 카테고리의 다른 글

[CSS 기본내용] html:5 문법4 (제목만들기) (0)	2022.01.29
[CSS 기본내용] html:5 문법3 (배경채우기) (0)	2022.01.29
[CSS 기본내용] html:5 문법2 (0)	2022.01.29
[CSS 기본내용] html:5 문법1 (0)	2022.01.29
[HTML 기본내용] VS code에서 html 파일생성/ 기본틀 (0)	2022.01.29

현재글[스파르타코딩클럽] 덕담 공유 코딩 패키지

오우진

[스파르타코딩클럽] 덕담 공유 코딩 패키지

01. 오늘 배울 것

02. 준비하기

03. HTML 기본 내용

04. CSS 기본 내용

05. 오늘 쓰일 CSS 공부하기

06. 본격 만들기 시작!

07. 배경 채우기

08. 제목 채우기

09. 폰트 바꾸기

10. 떠다니는 버튼 만들기

11. 덕담 아이콘 넣기

12. 스파르타 JS 붙이기

13. 공유를 위한 기초작업

14. 배포해보기

'• program > 스파르타코딩클럽' 카테고리의 다른 글

'• program/스파르타코딩클럽'의 다른글

티스토리툴바

[스파르타코딩클럽] 덕담 공유 코딩 패키지

01. 오늘 배울 것

02. 준비하기

03. HTML 기본 내용

04. CSS 기본 내용

05. 오늘 쓰일 CSS 공부하기

06. 본격 만들기 시작!

07. 배경 채우기

08. 제목 채우기

09. 폰트 바꾸기

10. 떠다니는 버튼 만들기

11. 덕담 아이콘 넣기

12. 스파르타 JS 붙이기

13**. 공유를 위한 기초작업**

14**. 배포해보기**

'• program > 스파르타코딩클럽' 카테고리의 다른 글

'• program/스파르타코딩클럽'의 다른글

관련글

티스토리툴바

13. 공유를 위한 기초작업

14. 배포해보기