2020/12/19 - [공부, 자기개발] - [스파르타코딩클럽 : 나홀로 코딩 패키지] 사전 과제
2020/12/19 - [공부, 자기개발] - [스파르타코딩클럽 : 나홀로 코딩 패키지] 2일차 - 크리스마스 카드 만들기
아직 Tistory 사용이 미숙해서
1일차 강의 들으면서
정리한게 다 없어졌다 ㅎㅎ
...
정말 열심히 정리했고..
내가 처음으로 만든 과제물 만드는 과정도
복습을 위해
정말 열심히 적어놨는데ㅠㅠㅠ
다음에는 이런 실수를 절!대!
하지 말아야겠다.
24일부터 시작될 줄 알고
아무 생각없이 지내고 있는데
어제 띠링- 하고 다시 카톡이 왔다.
미리 메리크리스마스~! 인사를 해주며
'크리스마스 특집: 나홀로코딩' 무료특강을
지금부터 바로! 수강이 가능하다고
얼른 시작해보자는 내용이었다.
하지만 어제는 바빠서(정말?)
강의실 들어가서 진도표만
살짝 확인해주고 나오려는데
언제 공부를 할건지 '나와의 약속일'을
선택하라고 해서
학원을 가지 않는 !
토요일, 일요일로 선택을 하고
잤다.
그러고 오늘 아침이 바로 토요일.. !!
토, 일에 공부하기로 했으니까
해야겠지?
왠지 하게만드는 스파르타코딩클럽..
나를 움직이게 만들다니.
그렇게 시작된 1일차 수업 !!
단 2일이면 끝나는 즐거운 코딩 수업이라는데
48시간 안에 끝내라고 나에게 압박 아닌 압박감을 주고있다.
1일차
[수업 목표]
1. 서버와 클라이언트의 역할에 대해 이해한다.
2. HTML, CSS의 기초 지식을 이해한다.
3. Javascript 기초 문법을 익힌다.
[목차]
01. 오늘 배울 것
02. HTML, CSS 기본 내용
03. Quiz_간단한 로그인 페이지 만들어보기
04. CSS 기초
05. 자주 쓰이는 CSS 연습하기
06. 폰트 입히기
07. 숙제 설명
01. 오늘 배울 것
- 나홀로 코딩 패키지가 끝나면 만들게 되는 것 - 구경하기!
- 서버/클라이언트/웹의 동작 개념
캡쳐한 이미지라서 그렇지
실제로 보면 눈이 내리고
저 편지를 클릭하면
스타르타 온라인의 캐릭터가 나오고
편지가 나온다.
내가 이 패키지를 수강하게되면 뭘 만들게 되는지를
알려주니까 너무 좋다!
그리고 예쁘다!
얼른 만들어서 친구와 가족들에게 보내주고싶다
+
웹 페이지의 원리를 알기 위해서
네이버 실시간 검색어 1위를 내 이름으로 바꾸어보았다.
물론 이것은 내 화면에서만 바뀌고
새로고침을 하면 바로 원래대로 돌아온다.
우리가 보는 웹페이지는 모두 서버에 미리 준비해두었던 것을
받아서 -> 그려주는 것
즉, 브라우저가 하는 일은
1) 요청을 보내고
(어디로? 서버가 만들어 놓은 API라는 창구로)
2) 받은 HTML 파일을 그려주는 일
★ HTML : 뼈대
CSS : 꾸미기
Javascript : 움직이게
하는 것
(엄청 쉽게 설명을 해주신다)
02. HTML, CSS 기본 내용
3. HTML과 CSS의 개념
HTML : 구역과 텍스트를 나타내는 코드
CSS : 잡은 구역을 꾸며주는 것
->
HTML 코드라는 뼈대 내에
CSS 파일을 불러와서 적용
4. HTML 기초
크게 head와 body로 구성
<head> </head>
<body> </body>
여는 태그 닫는 태그
(여는 태그만 있는 것도 있다.)
- 요렇게 <> 꺽쇠 안에 들어가 있는 것들을 태그라고 한다.
head
: 페이지의 속성 정보를 담는다.
- meta, script, link, title 등
페이지의 속성을 정의하거나,
필요한 스크립트를 부른다.
즉, 눈에 안 보이는 필요한 것들을 담는 것
body
: 페이지의 내용을 담는다.
바탕화면에 'Xmas' 폴더를 만들고
사전 과제를 통해 미리 설치해 둔
Visual Studio Code를 실행
File - OpenFolder - 바탕화면에 만들어둔 'Xmas' 폴더 선택
Visual Studio Code에 추가된
Xmas에 'index.html'이라는 new file을 만든다.
그리고 아래와 같은 코드를 복사 -> 붙여넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
태그는 여기 나와있는 것 말고도
아주 많고, 개발자들도 모두 외우고 있지 않다고 한다.
따라서
태그같은 것들을 다 외울 필요는 없고
그때 그때 필요한 것들은 검색해서 찾아보고 가져와서 사용하거나
응용해서 사용하면 된다.
정렬
Ctrl + A로
모든 영역을 블럭 지정한 후
VSCODE에서는
Ctrl + K + F
(맥은 cmd + K + F)
키를 눌러서 자동으로 정렬이 가능하다.
코드의 정렬이 제대로 되어있지 않으면,
코드의 생김새를 파악할 수 없어서
류를 해결하지 무척 어려워진다고 한다.
03. Quiz_간단한 로그인 페이지 만들어보기
5. 간단한 로그인 페이지 만들기
위에 있는 HTML 기초 코드들을 적절히 조합해서
이것과 같은 로그인 페이지 만들기
따라해보니 정말 쉽다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>
04. CSS 기초
6. CSS 기초
배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-famliy
color
간격
margin : 나를 둘러싼 구역 외부의 여백
padding : 내 안쪽 여백
05. 자주 쓰이는 CSS 연습하기
7. 자주 쓰이는 CSS 연습하기
h1, h5,
background-image,
background-size,
background-position
color, width, height,
border-radius,
margin, padding
요거는 실제로 보면 웹 페이지 왼쪽에 치우쳐져 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | 로그인페이지</title>
<style>
.mytitle {
color: white;
width: 300px;
height: 200px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding-top: 40px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</body>
</body>
</html>
요거를 화면 가운데로 가져오려면
width를 주고
margin: auto; 를 사용해서
자동적으로 내 외부의
좌, 우 여백을 같게 만들어 주면
중앙에 위치하게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | 로그인페이지</title>
<style>
.mytitle {
color: white;
width: 300px;
height: 200px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding-top: 40px;
}
.wrap {
margin: 10px auto;
width: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</div>
</body>
</body>
</html>
06. 폰트 입히기
8. 구글 웹폰트 입히기
tps://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 웹폰트는 여기서 찾아서 사용하면 된다.
마음에 드는 폰트가 있으면 클릭하고
우측에 [+ Select this style] 클릭
link를 복사해서 head부분에 붙여넣기,
CSS를 복사해서 style 부분에 붙여넣기
* { font-family: 'Jua', sans-serif; }
* : 모든 부분에 적용하겠다는 뜻
07. 숙제 설명
버튼에 mybtn class를 지정하고
CSS 속성을 적용해서 예시 화면처럼 만들기
그러니까 함께 만든 요 페이지를
요렇게 만들어주면 된다.
배운 것들을 이용해서 아래쪽의 버튼만 수정해주면 되는 것
힌트 : width 300px, height 50px, background-color brown
자 이제 직접 해보면!
이것이 바로 내 결과물이다.
밑에 버튼만 바꾸면 되는거였는데 나는 추가적으로
텍스트 입력하는 칸 길이가 맘에 안들어서
인터넷 검색으로 찾아낸 방법으로 길이를 줄이고
PW가 입력되는 부분은 PW답게 !
문자를 입력하면 안보이도록
password 형태로 바꿔주었다.
그리고 과제 제출 완료.
오후! 이렇게 1일차가 끝났다.
결고물을 보니 뭔가 그럴듯해 보인다.
물론 복붙의 결과이긴 하지만
처음 접해보는 사람들이
하나씩 따라하고
과제를 하면서
아 HTML과 CSS는 이런거구나~
하고 맛을 보기에 아주 좋은 강의 같다.
그리고!
필요한 코드나 사이트 같은 것들을
직접 복사해서 붙여넣거나
아니면 파일로 되어있는 경우에
내려받아서 복사하고 붙여넣고 하는 번거로운 과정 없이
강의 재생 화면 바로 아래에 버튼만 누르면
필요한 코드나 url 같은 것들이 자동으로 복사가 된다.
오로지 강의에만 집중할 수 있는 환경을 잘 만들어준 느낌!
그리고 1일차 강의를 한번에 쭉~ 재생하는게 아니라
짧게 짧게 끊어서 하니까
지루한지도 모르겠고 차근차근
잘 따라할 수 있었다.
근데 갑자기 궁금해진 건데
우리가 제출한 이 과제를 전부 다 확인을 하시는걸까?
아무래도 무료 초단기 과정이다보니
확인을 안하실것 같기는 한데
혹시나 피드백이 온다면
정말 놀라울 것 같다!
아무튼 무사히 1일차 완료!
스파르타코딩클럽 첫인상
괜찮은걸?
'프로그래밍' 카테고리의 다른 글
| [컴활1급 따기] 컴퓨터활용능력 1급 필기 합격 후기, 독학 방법 (0) | 2020.12.23 |
|---|---|
| [스파르타코딩클럽 : 나홀로 코딩 패키지] 2일차 - 크리스마스 카드 만들기 (0) | 2020.12.19 |
| [스파르타코딩클럽 : 나홀로 코딩 패키지] 사전 과제 - 크리스마스 카드 만들기 (0) | 2020.12.19 |
| 2개월만에 자격증 3개(컴활1급, 한능검 심화, 토익) 따기 - 2. 결과 (0) | 2020.12.10 |
| 2개월만에 자격증 3개 따기 - 1. 계획/준비 (0) | 2020.12.07 |