pycham을 설치하고, jetbrains에 가입했다.
스파르타 코딩클럽에서 준 코드 받아서 4개월간 무료로 사용할수 있는 라이센스를 얻었다.
이게 파이참을 사용하게 해주는 라이선스인가 보다. 파이썬이랑은 다른 건가..
항상 뭔갈 가입해두고 활용하지 않게 되어서 강의를 들은걸 다 잊어버리는데,
이번에는 기록을 해두려고 한다.
AWS에 가입하고 드디어 파이참을 열어서 코딩 시작.
첫 주는 HTML, CSS, Javascript기초문법 이렇게 배운다고 한다.
전체 강의 시간은 1시간 40분이 조금 넘는다.
예전에 워드프레스로 홈페이지를 만들어 본 적이 있다.
Html css를 약간 손볼 수 있는 구조로 되어있어서 찾아가면서 만들었던 기억이 있다.
학교 다닐 때도 HTML을 배운 적은 있었다.
Head, title, body, </> 이런 거는 그때도 했었다.
폰트 바꾸기, 크키바꾸기, 배경색 바꾸기 등등 홈페이지 만들기 위한 HTML언어는 조금 배웠었는데,
서버를 활용해서 실제 웹사이트까지 연결되는 건.. 못해봤다.
나름 코딩을 배운세대 인건가; ㅋㅋㅋㅋ
어쨌거나 워드프레스처럼 홈페이지를 만들 수 있는 플랫폼들이 생각보다 잘 되어있는 와중에
웹 개발 강의를 들어야겠다고 결심한 것은,
워드프레스에서도 역시 기본은 필요하기 때문이다.
그래서 용어의 정의나 일일이 찾아가면서 사투를 벌여야 했던 것들을 조금이나마 겉핥기식으로라도 알게 되면
조금 더 편해질 것 같다.
만들고 싶은 웹사이트의 형태가 있어야 수업을 듣는데 더 도움이 될 것 같다.
수업시간에 배운 것을 토대로 만들어 낼 수 있는 형태여도 좋겠다.
앱 개발 수업도 응용에 대해서 포기했기 때문에 일회성에 그치고 말았지만..
이번에도 그렇게 날려먹을 수 없기 때문에,
내가 필요로 하는 형태의 웹사이트가 있으면 좀 더 빨리 깊게 익힐 수 있을 듯하다.
1. HTML 기초
Html 기초 코드를 설명해주셨는데,
역시 어렴풋이 알던 것들의 정의가 명확하다 ㅠ
수업을 듣길 잘한 것 같다.
아직 1주차 초반 강의를 듣고 있지만… ㅋㅋㅋㅋ
물론 자주 안 쓰면 날려먹고 다시 찾고 있겠지…
그러라고 이 기록을 남긴다.
코드는 외우지 않고 복사해서 쓰는 것이라고 ㅋㅋㅋ
인간미 있는 강사님 ㅋㅋㅋ
코딩은 사실 조금만 찾아보면 쉽게 찾을 수 것들이 꽤 있지만,
이렇게 한번 정리해줄 필요는 있는 것 같다. 정말.
꿀팁
줄이 안 맞을 때 맞추고 싶은 부분 드래그해서 선택 후
Ctrl + Alt + L (window)
Commend + option + L (Mac)
누르면 줄이 맞춰진다.
윗줄과 구분을 지으려면 그 부분을 드래그로 선택해서 tap을 누르면 선택한 부분이 들여 쓰기 된다.
html에서는 로그인 페이지, 아이디와 패스워드 입력란을 만들어 보는 코드를 짜보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h1> 로그인 페이지 </h1>
<p> ID : <input type = "text"/> </p>
<p> PW : <input type = "text"/> </p>
<button> 로그인하기 </button>
</body>
</html>
2. CSS 기초
항상 강조하는 것이 외우려 하지 말고 찾아서 복사 붙여 넣기 해서 쓰라는 것.
그렇게 쓰다 보면 저절로 익혀지는 건가 보다.
지금 머릿속이 그렇다; 억지로 이게 뭐고 저게 뭐고를 구분하려다가는 그나마 남은 것도 다 섞여버릴 거 같아서,
일단 쓰라는 대로 쓰고 하라는 대로 하기로 했다.
CSS는 div로 묶어주는 것이 중요했다.
HTML이 body에 내용을 쓰는 거라고 하면,
CSS는 그보다 상단에 있는 head에서 Style을 적용시켜야 하기 때문에
body에서 div로 내가 입력하고자 하는 코드들을 묶어주는 것이 중요했다.
div class = 지정 값 <- 이런 형식으로.
그걸 style 아래에 쓸 때는 콤마를 쓰고 지정 값을 쓰면 됐다.
그리고, 스타일 양식 기입할 때는 항상 끝에 세미콜론(;)을 반드시 써줘야 했다.
연달아서 써야 하는 항목의 경우에는 마지막에만 써주면 됐다.
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
이렇게 쓰면,
배경색은 초록색으로 넓이는 300픽셀, 높이는 200픽셀인 배경화면이 만들어진다.
color는 글자의 색상으로 흰색으로 설정했고,
텍스트의 위치는 가운데로 지정한 것이다.
배경 이미지를 적용하고 싶다면, 하단에 그 이미지 링크를 붙이면 되는데,
이미지 사이즈와 위치를 조정해야 하므로
이미지를 넣을 때는 항상 3가지가 함께 간다고 생각하면 된다.
이미지, 이미지 사이즈, 이미지 위치.
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
마찬가지로 ; 를 절대 잊으면 안 된다.
바탕 이미지의 모서리를 둥글게 하고 싶다면,
Border-radius : 10px;이라고 적용하면 된다.
그리고 글자 주위 여백을 조율하고 싶다면,
margin과 padding을 사용해야 한다.
안쪽 여백은 padding
바깥 여백은 margin 이다.
현재는 위쪽 여백이 조금도 여유롭지 않은 상태인데
이미지 내부의 여백을 의미하므로 padding을 사용해서 공간을 주도록 한다.
그리고 위쪽 내부 여백이기 때문에
Padding-top을 쓴다
이제 이렇게 왼쪽으로 쏠려있는 이 로그인 페이지 덩어리들을
전체 페이지의 가운데에 오게 하고 싶다면,
이때는 바깥 여백을 활용해야 한다.
그전에 이 덩어리들이 함께 움직일 수 있도록
div로 다시 한번 묶어주는 작업이 필요하다.
<div class=“wrap”> 을 <body> 바로 밑에 써서 지금까지 있던 것들을 모두 안에 집어넣자.
이때 줄을 잘 맞춰준다.
초록 배경을 미리 깔아 두는 이유는 이래야 영역 지정이 어떻게 되는지 잘 보이기 때문이다.
가운데로 하고 나서 지우면 된다.
이제 가운데로 하기 위해서는 바로 margin을 쓰면 좋겠지만, 보다시피 꽉 차 있다.
초록 배경의 크기를 줄여서 양쪽 여백을 같게 만들어야 한다.
width: 300px;
margin : auto;
가로길이는 300픽셀로 이미지와 동일하게 하고,
마진은 양옆을 자동으로 맞춰주는 auto를 사용하면 된다.
....
사실 메모장에 이미지 캡처해가면서 노트 기록을 하느라 오래 걸리긴 했는데,
그걸 그대로 블로그에 옮기는 건 좀 아닌 거 같다.
어쨌거나 CSS 수업은 이렇게 들었고,
그다음은 부트스트랩 사용.
부트스트랩은 템플릿의 일종으로 내가 코드를 일일이 짜 놓지 않아도 코드가 잘 나와있다.
찾아서 복붙만 잘하면 웬만한 디자인은 할 수 있게 구성되어있다.
여기서 끝이 아니라, 모바일에서 매끄럽게 연동될 수 있도록 Max 값을 지정해주면 끝이었다.
3. 자바스크립트
html이 뼈대, CSS가 꾸미기 이면,
자바스크립트가 움직이게 해 줘야 우리가 보는 사이트의 형태를 갖출 수 있다고 한다.
자바와 자바스크립트는 코끼리와 바다코끼리의 차이라고 ㅋㅋㅋㅋ
파이썬으로 구동을 하건 뭘로 하건 결국 웹상에서 통용되는 단 하나의 표준언어는 자바스크립트인 걸로.
그래서 자바스크립트는 필수라고 한다.
자바스크립트는 style 아래에 script라고 기입하면서 명령한다
스크립트 안에 각종 명령어를 쓰는데,
사실 이것은
검사창에 들어갔을 때, 콘솔 탭에 있는 것과 똑같다고 한다
구글은 콘솔 탭을 만들어서 개발자들을 위해 스크립트에 쓴 내용을 콘솔 탭에 쓰면 바로바로 적용 되게 되어있다.
프로그래밍 언어를 배울 때는
5가지를 기억하면 된다.
변수, 자료형, 함수, 조건문, 반복문
변수 : 값을 담는 것
자료형 : 숫자냐 문자냐
함수 : hey 같은 거
조건문 : if else
반복문 : 반복 하기
변수
Let a를 2
Let b를 3이라고 하면
2+3을 입력할 경우 5가 도출된다.
Let first_name = ‘gildong’
Let last_name = ‘hong’
이라고 하고
first_name+last_name 이라고 치면
‘Gildonghong’ 이라고 뜬다.
a+last_name 이라고 하면
2hong 이라고 도출된다.
자료형
자료를 담는 방법을 알아야 된다고 하면
자료가 100개 있을 때 일일이 let이라고 지정해줄 수가 없다.
그래서 한 번에 정리하는 것을 알아야 한다.
두 가지 방법이 있다. (리스트(let), 딕셔너리(key, value))
먼저 리스트
우선 수박 참외 배 리스트가 있다고 치자
Let a_list = [ ‘수박’, ‘참외’, ‘배’]
a_list[1] 이라고 치면,
답은 참외이다.
이건 파이썬에서도 배운 건데..
컴퓨터는 0부터 시작한단다.
이진법도 십진법도 다 0부터 시작한다고 알면 컴퓨터와 소통하기 쉬울 듯.
어쨌거나 이 수박 참외 배 리스트에 감을 추가 하고 싶다면 코드를 다시 짜넣는것이 아니라,
a_list.push(‘감’)
이라고 쓴다.
그리고 a_list를 불러오면
수박 참외 배 감이 뜬다
그리고 b_list를 만들어 철수, 영희라고 지정하자
그런 뒤 a_list에 push 해주면,
수박참외배감array(2) 라고 뜬다.
이때 철수만 도출하고 싶다면,
a_list의 4번째의 0번째라고 지정해주면 된다.
헷갈리지 않게 잘 생각하자.
왜 4번째야5번째지?라고하는 순간 아차싶을 것이다.
딕셔너리
Let a_dict = {‘name’ : ‘bob’ , ‘age’ : 27}이라고 하면
a_dict[‘name’]이라고 했을 때
‘bob’이라고 도출이 된다.
이것이 왜 필요할까 봤더니
만약 주민등록번호는 이거고 나이는 이거다라고 쓴걸
도출해낼 때 …!
위 도식에서 name 은 key이고,Bob 은 value이다
key와 value의 원리.
Key:value
let을 사용하는 list가 순서를 중요하게 생각했다면 dict는 그럴 필요는 없다.
추가하고 싶다면,
a_dict[‘height’] = 180이라고 쓴다.
a_dict를 불러오면,
Name:bob age: 27 height:180 이 쭉 나열된다.
그 외 split 명령어
쪼개서 나열하고 싶을 때 쓴다.
Split = 말 그대로 쪼개는 함수.
Let myemail = ‘sparta@gmail.com’이라고 지정을 한다 치자.
이때 @를 기점으로 메일을 쪼개려면,
Myemail.split(‘@‘)이라고 치면 된다.
그러면 sparta와 gmail.com 이 리스트화 되어 보인다.
gmail.com 만을 보고 싶다면,
Myemail.split(‘@‘)[1]
이라고 하면 된다.
0번째가 sparta, 1번째가 gmail.com 이므로,
여기서 gmail.com을 쪼개고 싶다면, . 을 중심으로 쪼개면 된다.
같은 값을 계속 누르고 싶다면 화살표 방향키 윗방향 키를 누르면 된단다.
My email.split(‘@‘)[1]. split(‘.’)
라고 하면 gmail과 com이 리스트화 되어 등장한다.
이런 식으로 코딩을 이어가면 된다고 한다.
함수
함수는 그냥 하는 것.
그러니까 이걸 쓰면 저걸 내뱉어라라고 명령하면 그대로 수행하는 것이다.
수학에서 함수도 x값을 넣으면 y 값을 도출해낼 수 있게 공식이 구성되듯..
이건 수학보다 더 쉽게
그냥 콘솔에서 명령하면, 웹사이트에서 결괏값을 보여주는 형태이다.
그 콘솔에서 명령을 하기 쉽게 파이 참에서 함수를 지정해두고,
콘솔에서는 그 함수만 치면,
웹사이트에서는 결과값이 툭튀어나오는 것이다.
조건문
만약에 is_adult(age) 함수를 만들었다고 치자.
If와 else를 쓴 조건문이 되겠다.
20이 넘으면 성인입니다 라는 알람이 뜨고,
20이 넘지 않으면 청소년입니다 라는 알람이 뜨게.
콘솔 창에 is_adult(20)이라고 치면,
20이 넘지 않았기 때문에 , 청소년입니다 라는 알람이 뜬다.
반복문
따라 썼던 for (let i = 0; i < a_list.length; i++)는 i가 0부터 시작해서 하나씩 커지면서 내용물을 실행시킨다는 의미이다. a_list.length a_list의 길이까지…
이때 a_list의 부분을 내가 불러온 데이터의 이름으로 갈아껴주면 된다.
if와 같이 써서 서울시 미세먼지 정보 값을 리스트로 볼 수 있었다.
마지막으로 1주 차에 배운 내용을 바탕으로
핑클의 팬명록을 만들어 보았다.
휴우…
2주 차도 기다려라..
총 강의 시간은 2시간이 채 안되는데, 실습을 하면서 따라가다 보니 꽤나 오래 걸린다.
게다가, 한번 듣고 바로 알겠는 내용이 아니어서 몇 번을 곱씹어봐야 하고..
그래도 재미있으니까 2주 차로 바로 넘어가야지; 벌써 좀 밀렸다..
SQL도 들어야 하는데.
'개발일지' 카테고리의 다른 글
| [내일배움단] SQL 데이터 분석 강의 3주차 (feat. 스파르타코딩클럽) (0) | 2022.08.10 |
|---|---|
| [강의 후기] 나는 개발자가 되고 싶은걸까? (0) | 2022.08.10 |
| [내일배움단] 웹개발 종합반 2주차 (feat. 스파르타코딩클럽) (0) | 2022.08.07 |
| [내일배움단] SQL 데이터 분석 강의 2주차 (feat. 스파르타코딩클럽) (0) | 2022.08.04 |
| [내일배움단] SQL 데이터분석 강의 1주차 (feat.스파르타코딩클럽) (0) | 2022.07.31 |
댓글