.posting-box {
width: 500px;
margin: 10px auto 30px auto;
border-style: solid;
border-radius: 5px;
padding: 25px;
}boder: 또는 border-style: ( 경계선의 스타일 )
border-radius: (사각형의 둥글림)
padding: (사각형 안쪽의 여백)
margin: 10px auto 30px auto는
Q. 무슨 뜻인지 모르겠네 ....앞의 숫자는 뭐고, 뒤에 auto는 왜썼지..?
A. 포스팅 박스의 위-오른쪽-아래쪽-왼쪽 순서대로(시계 방향대로) 적용시키고 싶은 margin을 적어준거임
border와 텍스트박스 등등 구글링을 통해서 css 소스를 얻는다!
Javascript편 (1-12)
onclick="hey()" (클릭을 하면 hey함수를 불러온다)
*코드를 수려하게 짜는것 보다도, 동작하게끔/깔끔하게 짜는 것이 중요하다.
왜 깨끗하게 코드를 짜는 것이 중요한지 필요성을 인식하며 짜는게 중요하다.
웹페이지에서 오른쪽 마우스 클릭하면 나오는 "검사"의 console탭은 개발자 도구창이다.
왜 있냐면, 파이참에서 만들고, 페이지 열어서 확인하고 하는 과정이 너무 귀찮고 번거롭기 때문에
개발자 도구에서 바로바로 코드를 확인해 볼수 있다.
ex) 웹페이지-검사-console탭 - hey() 를 써보면, 개발자가 코드에 hey함수를 잘 썼는지 알수 있다.
웹페이지가 바로바로 동작하기 때문
*변수, 자료형, 함수, 조건문, 반복문 만 알면 원하는 로직을 거의 만들수 있다.
let a=2 (a라는 박스를 꺼내서 2를 담았습니다.)라는 뜻.
따라서, let a+3 (= 2 + 3 )= 5
let 태그는 숫자열, 문자열도 담을 수 있다. let 변수는 값을 담는 박스이다.
" " (따옴표)는 문자열을 담는 함수이다.
변수의 이름을 지을때에는 (let 다음에 나오는게 변수의 이름)
남이 봐도 알아보기 쉽게 지어야 한다. 그래야 협업하고 수정하기 쉬움
(ex. let first_name , let last_name 등등)
*변수이름을 무작위로 짓거나 a,b,c,d 이런식으로 지으면
나중에 내가 봐도 무슨변수였는지 모른다.
*에러를 무서워 하지 말자!!! 최대한 읽어보고 익숙해지려고 노력해야 한다.
* 자료형 변수에는 리스트, 딕셔너리가 있다.
리스트 ( "순서"가 중요한 담기 ) let a_list = ["수박, 참외, 배, 딸기"]
리스트의 변수는 대괄호([])에 담는다.
딕셔너리 ( )
(ex. let a_dict = {'name':'bob', 'age':27 } )
- name과 age의 순서는 중요하지 않음. 하지만 뭐가 key인지 value인지는 알아야함.
- (let 태그로) 선언할때는 중괄호({ })로, 출력해볼때는(가져올때는) 대괄호([ ])로!
| *웹페이지 개발자도구 - console에 실습한 코드들. >let a_dict = {'name':'bob', 'age':27 } undefined >a_dict['name'] 'bob' >a_dict['age'] 27 >a_dict['height'] = 180 #위에서는 추가하지 않았던 키를 추가하기 위해 별도의 추가태그가 180 #필요하지 않다. 그냥 한번 선언 해두면 나중에 a_dict을 출력했을때 >a_dict #기존의 a_dict 안에 키가 추가되어 출력된다. {name: 'bob', age: 27, height: 180} |
* 딕셔너리와 리스트가 서로서로의 요소(factor)로 쓰일 수 있다.
| a_list = ['수박', '참외', '배', '감'] a_dict['fruits'] = a_list >a_dict['fruits'] = a_list * dict에 list를 fruits라는 요소로 집어 넣음. (4) ['수박', '참외', '배', '감'] >a_dict {name: 'bob', age: 27, height: 180, fruits: Array(4)} * dict에 name, age, height, fruits 라는 요소가 담김. >a_dict['fruits'][2] *dict의 fruits라는 요소에서 2번째가 '배' 임을 출력함. '배' |
| let a = 100 undefined a % 7 2 #a를 7로 나눈 나머지 = 2 a%8 4 a%3 1 # %(나누기)는 입력되고있는 트래픽을 나눌때 사용하거나, 짝수/홀수를 구분할때 쓰면 좋음. a < 150 true a > 200 false a == 100 true #맨 위에서 오른쪽 값을 왼쪽(a)에 넣을때 =(등호)를 한번 썼기 때문에, #'같다(same)'를 표현할때는 =(등호)를 2번 써준다. (==) a != 100 #'같지않다'의미의 부등호 != false |
| let myemail = 'sweethelen@kakao.com' undefined myemail.split('@') (2) ['sweethelen', 'kakao.com'] myemail.split('@')[1] 'kakao.com' myemail.split('@')[1].split('.') (2) ['kakao', 'com'] myemail.split('@')[1].split('.')[0] 'kakao' #Teacher said: 하나하나 코드를 분해해가면서 쓰는 습관을 들이려고 노력해야 한다. #.split (원하는 값을 기준으로 덩어리를 나눌때 쓰는 코드. ) ( .split(' ') 괄호의 ' '(따옴표) 안에 기준이 될 값을 넣는다. ) (ex. myemail.split('@') --> 골뱅이를 기준으로 덩어리를 나눠라) |
* 프로그래밍에서의 함수는 '정해진 동작'을 하는 것이다. (함수 = '부르면' '정해진 동작'을 한다.)
* DevTools > console 창에서 줄바꿈을 할때는 shift + Enter
* DevTools > console 창에서 썼던 태그를 clear console 한 후 빈창에 커서를 놓고
Pgup(↑) 키를 누르면 이전에 썼던 태그를 맨아래에서부터 올라가면서 보여준다.
Pgdown(↓) 키를 누르면 다시 아래로 내려오면서 보여줌.
--> 그 상태에서 코드를 수정할 수도 있다.
| function sum(num1, num2){ return num1 + num2 } ▶ 위 함수의 의미 : num1, num2를 받아서 더한 값을 return 해라 >let result = sum(2,3) undefined >result 5 ▶ 위 함수의 의미 : 2를 num1 에 , 3을 num3 에 넣어라. sum(2,3)을 변신시킨 값은 5이다. 따라서, return은 5가 나온다. |
* 함수에서의 "return"은 '끝내고 나를 변신시켜줘' 이다.
----------------------------------------------------------------------------------------------------------
* Teacher said : 조건문은 직관적이고 훨씬 쉽다.
| >let age = 24 undefined >if (age > 20) { console.log('성인입니다.') } else { console.log('청소년입니다.') } 성인입니다. ▶ 함수의 뜻 : age를 24로 선언한다. if 조건문에 age가 20보다 높으면 '성인입니다'를 출력하도록 하고, age가 20보다 작은 경우(else문) '청소년입니다'를 출력해라. ▶ 결과 : age를 24로 선언했으므로 age > 20은 참이므로 '성인입니다'가 출력됨. |
| >let sex = '남성' undefined >if (age > 20 && sex == '남성') { console.log('성인남성입니다.') } else { console.log('청소년입니다.') } 성인남성입니다. |
Or 조건문 ( || ) : shift + \(원화)키를 2번 누르면 or가 된다
| >let sex = '남성' undefined >if (age > 20 || sex == '남성') { console.log('성인남성입니다.') } else { console.log('청소년입니다.') } 성인남성입니다. |
* 가장 많이 쓰는 조건문의 구조 ( if / else if / else )
* 자주쓰는 반복문 패턴 (1)
| if (age > 20) { console.log('성인입니다.') } else if (age > 10) { console.log('청소년입니다.') } else { console.log('아동입니다.') } |
* 반복 조건문은 오타 작렬하는 곳이므로 오타주의!!
| >for (let i = 0; i < 10; i++) { console.log(i) } 0 1 2 3 4 5 6 7 8 9 ▶ 함수의 뜻 : i는 i가 0부터 10보다 작을때 i가 하나씩 높아진다. ▶ 결과 : 0부터 시작해 하나씩 높여가면서 10 미만이 될때까지 console.log(i)함수를 반복하여 출력함. 0부터 9까지 출력됨. |
| let people = ['철수','영희','민수','형준','기남','동희'] undefined people.length #선언한 리스트 'people'의 length(길이)가 나옴. (factor가 6개라고 할수 있음) 6 |
* 자주쓰는 반복문 패턴 (2)
| >let people = ['철수','영희','민수','형준','기남','동희'] undefined >people.length 6 >for (let i = 0; i < people.length; i++) { console.log(people[i]) } 철수 영희 민수 형준 기남 동희 ▶ 함수의 뜻 : 리스트를 한바퀴 돌아라 ▶ 결과 : 철수부터 동희까지 차례대로 출력됨. |
* 자주쓰는 반복문 패턴 (3)
| >let scores = [ {'name':'철수', 'score':90}, {'name':'영희', 'score':85}, {'name':'민수', 'score':70}, {'name':'형준', 'score':50}, {'name':'기남', 'score':68}, {'name':'동희', 'score':30}, ] undefined >scores[0] {name: '철수', score: 90} >scores[1] {name: '영희', score: 85} >scores[1]['score'] 85 |
| >scores (6) [{…}, {…}, {…}, {…}, {…}, {…}] >for (let i = 0; i < scores.length; i++) { console.log(scores[i]) } {name: '철수', score: 90} {name: '영희', score: 85} {name: '민수', score: 70} {name: '형준', score: 50} {name: '기남', score: 68} {name: '동희', score: 30} undefined >for (let i = 0; i < scores.length; i++) { console.log(scores[i]['name']) } 철수 영희 민수 형준 기남 동희 |
| for (let i = 0; i < scores.length; i++) { let name = scores[i]['name'] let score = scores[i]['score'] console.log(name,score) } 철수 90 영희 85 민수 70 형준 50 기남 68 동희 30 ▶ console.log(name, score) 의 뜻 : 이름과 점수를 출력해라. |
for (let i = 0; i < scores.length; i++) { let name = scores[i]['name'] let score = scores[i]['score'] if (score < 70) { console.log(name,score) } } 형준 50 기남 68 동희 30 ▶ console.log(name, score) 의 뜻 : 이름과 점수를 출력해라. |
위 예제들에 쓰인 함수: 딕셔너리들을 모아둔 리스트를 돌면서
필요에 맞는 딕셔너리를 if문으로 값을 찍어주는 것(출력해주는것)
'Helen's 개발일지' 카테고리의 다른 글
| Helen's 개발일지 (2021.11.27) (0) | 2021.11.27 |
|---|---|
| Helen's 개발일지 #1 (0) | 2021.11.24 |
