사실 html은 이전 직장에서 홈페이지 유지보수 관련 하여 한달정도 맡아 진행했다.

학부생때도 제일 좋아했던 프로그램 언어이기 때문에 강의듣는 동안 큰어려움 없이 스무스하게 넘어갔다.

아직은 초반 이라 그런 부분이 있겠지만 그래도 자신있다.

 

이번 강의에선 html의 기본 구조와 기초 테그 및 CSS에 대해 다뤘다.

따로 복습하려고 글로 정리하고싶지만 사실상 너무 기초적인것이라 생각해 따로 정리하진 않으려고한다.

 

추가로 사용해보지 못했던 Bootstrap을 배웠다.
html 디자인 템플릿은 요즘 워낙 인터넷에 오픈소스가 많아 응용하면 좋을 것 같다.
점점 이 언어는 코딩을 처음 시작하려는 분들에게 다루기 쉬운 언어가 되가는 것 같다.

https://getbootstrap.com/

 

또 구글 웹폰트를 처음 이용해봤는데 너무 간편했다.

상업적으로 사용이 가능한지는 모르겠지만 한글지워되는 폰트가 다양하게 있다.

https://fonts.google.com/

 

이번 강의를 들으며 느낀게 이전에는 html이 제일 재밌었는데 이젠 별로 재미가 없다..
왜그런진 모르겠지만 워밍업 정도로 배우며 탄력 붙기시작하면 자바스크립트, 파이썬에 몰두 하려고한다.

 

[1]  변수

let? var?
이전 자바스크립트를 공부할때는 var로 변수 선언을 했지만 요즘 보니 let을 쓰는거 같다.
var = 구식, let = 신식으로 생각 하면 될꺼같다.
변수 선언은 데이터를 담을 박스를 선언하는것과 같다.

박스에 숫자를 넣든 문자를 넣든 데이터를 넣는데는 변수 선언이 필요하다.
간단한 예시를 통해 알아보자.

let num = 1004 // num이라는 변수를 선언함과 동시에 숫자 1004를 집어넣는다.

여기서 num은 변수 이름이다.

=(등호) 기준으로 오른쪽의 데이터를 왼쪽 변수에 넣는다. 라고 이해하면 된다.

 

문자도 넣어보자

let text = 'apple'

text란 변수에 apple이란 글자 데이터를 넣었다.

 

각 변수들을 출력해보자

let num = 1004
let text = 'apple'
console.log(num)
console.log(text)

아래처럼 출력되는것을 확인할 수 있다.

1004
apple

좀더 만들어보자

let num = 1004
let num2 = 1004
let text = 'apple'
let text2 = 'love'

숫자끼리 글자끼리 각각 더하면 어떻게 될까

let num = 1004
let num2 = 1004
let text = 'apple'
let text2 = 'love'
console.log(num+num2)
console.log(text+text2)

아래와 같다.

2008
applelove

그렇다면 숫자 + 문자는?

let num = 1004
let num2 = 1004
let text = 'apple'
let text2 = 'love'
console.log(num+text)
console.log(num2+text2)
1004apple
1004love

이처럼 숫자가 글자로 자동 변환되어 출력된다.

 

[2] 리스트(배열)

간단한 예시를 보자

let list = []

리스트는 [ ] 로 선언한다.
리스트에 데이터를 넣어보자

let list = [1,2,3,4,'apple']

리스트에 데이터를 추가해보자

let list = [1,2,3,4,'apple']
list.push('love')

출력값은

[1, 2, 3, 4, 'apple', 'love']

각 자리의 순번은

0: 1
1: 2
2: 3
3: 4
4: "apple"
5: "love"

원하는 자리 1과 2사이에 'black'이라는 글자를 넣어보자
1번 자리에 추가하면 된다.

let list = [1,2,3,4,'apple']
list.splice(1,0,'black') 1번 자리에 넣기
[1, 'black', 2, 3, 4, 'apple']
0: 1
1: "black"
2: 2
3: 3
4: 4
5: "apple"

원하는 자리의 데이터을 바꿔보자

2번 데이터를 black로 바꿔보자

let list = [1,2,3,4,'apple']
list.splice(2,1,'black')
[1, 2, 'black', 4, 'apple']
0: 1
1: 2
2: "black"
3: 4
4: "apple"

 

[3] 딕셔너리(객체)

리스트와 비슷하다.

let dict = {'name':'Bob','age':21}

dict라는 딕셔너리 변수 선언
오른쪽 데이터는 딕셔너리에 들어가는 데이터들이며 'name' 과 'Bob' 그리고 'age' : 21은 각각 매칭되어있다.
매칭된 값을 출력해보자

let dict = {'name':'Bob','age':21}
dict.name
'Bob'

위와 같이 출력된다. 같은 원리로 dict.age 하면 21이 출력된다.
그렇다면 새로운 데이터를 넣어보자

let dict = {'name':'Bob','age':21}
dict['height'] = 188 // heigt 데이터 넣기
{name: 'Bob', age: 21, height: 188}

위와 같이 출력된다.

 

리스트 & 딕셔너리를 같이 써보자

names = [{'name':'bob','age':20},{'name':'carry','age':38}]
0: {name: 'bob', age: 20}
1: {name: 'carry', age: 38}

위와 같이 출력되며 방대한 데이터를 정리하기에는 필연적인 문법인것같다.
나중에 심화로 들어가면 어려워질것같다.

[4]  함수

 함수는 특정 기능을 하는 변수같은 것이다.

function 함수이름(안에 쓰일 변수들) {
   함수 기능
}
함수이름(함수로 보낼 데이터);

숫자 2개를 더해주는 함수를 만들고 이용해보자

function sum(num1, num2) {
	console.log('num1: ', num1, ', num2: ', num2);
	return num1 + num2;
}
let result = sum(10,10)
console.log(result)

result란 변수를 선언하였고 여기엔 sum(10,10)을 넣는다.
sum(10,10)은 sum이란 함수에 10,10데이터를 넣고
데이터를 리턴받는다.

함수를 살펴보면 받은 2개의 데이터를 각각 num1, num2로 선언하고
두개를 각각 출력한뒤 더한값을 return 해준다. 

'코딩 > 기타' 카테고리의 다른 글

[HTML] 1. html 기본 구조에 대해...  (1) 2022.08.30
[Start] Day-1 첫 시작...  (1) 2022.08.29

거의 2년 반만에 코딩을 다시 접하게 되었다...
학부생 수준의 전공지식을 가지고 있었지만 막상 공부를 준비해보니
비전공자 수준인 것 같아 걱정이 많이 된다...
비전공자 보단 습득은 빠르겠지만 막막하다..

주위에 개발자 지인도 많고 시간을 자유롭게 사용할 수 있게 온라인 교육을 택했고
국비지원이 가능한 강의를 택했다.

 

해당 온라인 강의 사이트에서 2가지를 신청 히였으며
1. 앱 개발(자바스크립트, 리액트 네이티브, Expo, 파이어 베이스)
2. 웹 개발(HTML, CSS, 자바스크립트, jQuery,  Ajax,  API, Python, 크롤링, mongoDB, AWS)
이렇게 2가지 이다.

강의 수준은 비전공자에게 맞춤된 듯한 수준이다.
기초를 알려주지만 응용하는 심화단계는 알려주지 않은듯하다...
언어의 문법이 중요한 만큼 개인 시간을 좀 더 투자하는것이 좋아 보인다.


별도로 파이썬도 공부하려고 한다.
파이썬은 유튜브 강의와 서적을 가지고 학습할 예정이다.

버텨보자....


+ Recent posts