파이썬 인강 자기계발 챌린지 22회차 미션

이때까지 배운 HTML와 CSS를 가지고 Django 사이트를 만들어보는 실습을 해보자.
참고링크 : Django

1. 전체 페이지 레이아웃잡고 마크업하기

먼저 홈페이지를 보고 레이아웃을 잡고 미리 스케치하는 것이 좋다.
그래야 안 헷갈리고 필요한 태그들만 사용하여 깔끔한 마크업이 가능하기때문이다.

지난 포스팅에서 Django홈페이지 전체를 스케치한 이미지이다.

전체 홈페이지를 가장 큰 세가지부분으로 나눈다

1. Header
2. main
3. footer

그 뒤로 안에 있는 요소들을 스케치한 뒤 그대로 마크업하면 된다!
간단한 작업처럼 보이지만 깔끔하게 잘 만들기 여건 어려운 것이 아니다.
나도 강사님처럼 척보면 척하고 짜임새있게 짜고 싶다.

2. Header 전체구상

먼저 첫번째 큰 부분인 Header부분이다.
안을 보면 logo와 navigator로 나눌 수 있다.
logo안은 이미지태크와 링크를 넣어 이미지를 누를때마다 홈으로 돌아가게끔 구현할 것이다.
navigator는 ul태그로 만들어서 li태그에 a태그를 넣어 li태그를 누를때 관련 페이지로 이동할 수 있도록 구현할 것이다.

1. logo

   • logo
     • img + link to home

2. navigator

   • list
     • li + link to overview page
     • li + link to download page
     • li + link to documentation page
     • li + link to news page
     • li + link to community page
     • li + link to code page
     • li + link to issues page
     • li + link to about page

스케치를 보고 그대로 html를 작성해주면 좋다.
위의 이미지처럼 class 이름까지 지정해서 하면 훨씬 편하고 빠르게 마크업할수있다.

li태그와 a태그는 묶어서 총 8번 작성해야한다.
이때 효율적으로 코드를 작성할 수 있는 방법이 있다.

1
2
3
4
5
6
7
8
9
10
11
12

 (li>a)*8
 
 
 // 출력값은
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

li태그 안에 a태그를 만들고 전체를 곱하기 8번해서 총 8개의 태그를 만들게 된다.
참~ 쉽죠?

3. max-width 속성과 min-width속성

브라우저의 크기를 조절할때, 브라우저가 일정한 크기에 도달할 경우 더이상 콘텐츠의 크기도 같이 줄어들거나 늘어나지 않는다.
이러한 속성을 max-width와 min-width라고 한다.

브라우저 전체 넓이가 1060px이 되면 더 이상 줄어들지 않도록 지정하고 1400px이 되면 더 이상 늘어나지않도록 지정해보자.

이를 위해서 먼저 생각해야할 것이 어느 부분에 max-width와 min-width를 적용시킬 것인 가이다.

브라우저 전체 넓이가 일정크기보다 작아지면 모든 요소들이 다 작아지다가 멈춰야하므로 body에 min-width를 주면 된다.

반면 브라우저 전체 넓이가 일정크기보다 커지면 header는 크기와 상관없이 양옆에 컬러가 계속 칠해져있어야하므로 container를 주어 container태그안에 max-width속성을 적용하여 디자인을 유지할 수 있다.

1
2
3
4
5
6
7
8

body{
    min-width: 1060px;
}

.container{
    max-width: 1400px;
    margin: 0 auto 0 auto;
}

4. margin과 padding의 단축속성

margin과 padding값을 주는 데는 총 4가지 단축 방법이 있다.

1. { margin: 0 auto 0 auto}
   이렇게 4개가 나열되어 있는 경우의 순서는 top right botton left순이다.

2. { margin: 0 auto 10px }
   이렇게 3개 값이 나열되어 있는 경우에는 순서가 첫번째값은 top, 두번째 값은 left와 right 그리고 마지막 값은 bottom이다

즉 { margin: 0 auto 10px } 는 { margin: 0 auto 10px auto} 와 동일한 값을 가진다.

3. { margin: 0 auto }
   이렇게 2개가 나열되어 있는 경우의 순서는 첫번째값은 top botton에 적용 두번째 값은 left와 right에 적용된다.

즉 { margin: 0 auto } 는 { margin: 0 auto 0 auto} 와 동일한 값을 가진다.

4. { margin: 10px }
   이렇게 1개 값만 있는 경우는 어디에 값이 적용될까?
   정답은 모든 곳에 적용된다.
   다시말해 10px이 top right botton left에 각각 적용된다.

즉 { margin: 10px } 는 { margin: 10px 10px 10px 10px } 와 동일한 값을 가진다.

5. display: inline-block;

display속성에 inline-block을 넣어보자.

1
2
3
4
5
6
7

.nav{
    text-align: right;
}

.list-items{
    display: inline-block;
}

아래 이미지를 순서대로 본다면 1번에는 적용되지 않은 순수한 모습에서
위의 코드를 적용한 후 3번을 본다면 예쁘게 오른쪽으로 카테고리가 일렬로 배열되어 있는 것을 확인할 수 있다.

6. position: absolute; 와 relative; 적용

가장 헷갈리는 position속성을 적용하기 전후를 비교해보자.

position : relative;로는 어떠한 값도 바꿀 수 없다.
그 밑에 꼭 top, bottom, left, right의 값을 통해 어디를 얼만큼 이동할 것인지 정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13

.container{
    max-width: 1400px;
    background-color: red;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; //normal flow의 속성에 변화가 있는 것이 아니기때문에 화면에 출력될때 변화가 없다
}

.logo{
    position: absolute;
    top: 0;
    left: 0; 
}

1번은 위의 태그를 적용하기 전의 모습이고 container클래스에 position: relative;를 적용하고 logo클래스에 position: absolute;를 적용을 하면 아래 이미지의 3번으로 화면에 출력된다.

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 배열객체(Array)

내장객체 중에서 가장 활용도가 높은 것은 배열객체이다.
연속된 공간에 여러개의 데이터를 저장하는 객체이다.
배열에 들어있는 데이터를 요소(Element)라고 부른다.
배열의 index는 0부터 시작한다. 그리고 마지막 index는 (배열의 크기 - 1)이다.
배열의 요소는 변수처럼 사용가능 -> 주로 반복문에 활용해서 사용한다.
JS의 경우 모든 데이터타입을 한 배열안에 넣기 가능하다.

1

let arr = [1,2,"Hello", true, 3];

2. for ~ in 구문

변수의 값을 0부터 배열 객체의 개수만큼 반복하는 구문.
자동적으로 배열 객체의 길이를 계산한다.

1
2
3
4

for(let i in arr){
	document.write( arr[i]+ " ")
}
//출력값은 1 2 Hello true 2 JS

3. array.join();

요소들을 출력할 때 사이에 입력하여 출력하는 방법은 join()을 쓰면 쉽게 해결된다

1
2

document.write(arr.join(" "))
//출력값은 1 2 Hello true 2 JS

위의 출력값과 아래의 출력값의 차이는 딱 하나이다.
마지막 요소에 스페이스의 입력유무이다.
join()의 경우 마지막요소에 입력되지 않으니 더욱 유용하다

1
2

document.write(arr.join(","))
//출력값은 1,2,Hello,true,2,JS

4. array.reverse();

배열안의 요소를 역순으로 출력하고 싶다면 반복문을 먼저 생각해볼수있다.
반복문을 이용하면 임시값에 뒷요소부터 넣어서 반복할 수 있다.
하지만 array에 좋은 내장함수가 있다.
바로 reverse()이다
reverse()는 배열의 순서를 반대로 처리한다.

1
2
3
4

arr1 = [1,2,"hi", "a", "A", "가", "나"];
document.write(arr1.reverse())

//출력값 나,가,A,a,hi,2,1

기본적으로 콤마(,)가 함께 출력된다.
이 콤마를 없애고 싶다면 reverse후에 join을 하면 된다

1
2

document.write(arr1.reverse().join(" "))
//출력값 나 가 A a hi 2 1

5. array.sort();

낮은 순자부터 높은 숫자로 오름차순으로 출력한다.

1
2
3
4

arr2 = [1,2,"hi", "a", "A", "가", "나"];
document.write(arr2.sort())

//출력값 1,2,A,a,hi,가,나

파이썬 인강 자기계발 챌린지 21회차 미션

1. Reset보단 normalize

기본값으로 설정된 css가 레이아웃을 잡을때 불편함을 초래하기도 한다.
이에 reset을 시켜주는 코드들이 생겨났다.
하지만 reset코드들은 오래된 것들이 많아 요즘 유용하게 쓰이는 기본값까지 초기화시켜버리기떼문에 효율적이지 못하다.

따라서 최근에는 normalize를 더 많이 사용한다.

Normalize.css 파일에 들어가서 다운로드를 누르면 css 파일이 나오고 해당 파일 코드를 전체복사하여 내 프로젝트에 normalize.css로 새로운 파일을 만들어 전체붙여넣기해준다.
normalize.css안에는 주석으로 해당 코드들이 어떤 역할을 하는지 자세하게 알려주어 필요한 코드만 사용할 수 있고 필요하지 않는 코드들은 삭제하기만 하면 된다.

2. 기본 box-sizing 잡기

레이아웃의 에러를 최소화하기 위해서는 box-sizing을 border-box로 하는 것이 좋다.
여기서 *는 모든 영역에 적용한다는 뜻이다.
*::before와 *::atfer는 숨은 영역을 뜻한다.

1
2
3
4
5
6

*, 
*::before,
*::atfer {
	box-sizing : border-box;
}
 box-sizing을 border-box

3. 레이아웃짜기 hero-section

웹페이지를 구성할 레이아웃을 짜본적이 없어서 혼자서 웹페이지를 만들때 수정을 엄청 많이 하게 된다.
그래서 다른 사람은 어떻게 짜는 지 궁금했는데 강사가 자신이 왜 이렇게 레이아웃을 짜게 되었는지 설명을 해줘서 좋았다.

hero-section을 처음 듣게되었는데 이는 해당 웹페이지가 중요시하는 콘텐츠를 먼저 배치하고 링크를 걸어두는 것이다.

아래 이미지는 강사님이 장고사이트의 레이아웃을 분석한 것이다.

4. Pseudo-class 가상클래스 (hover, active, focus 등 )

가상클래스를 사용하여 마우스가 올라가있거나, 활성화되어있거나, 키보드로 선택되었을 때 css요소를 적용할 수 있다.
예를 들면 아래 태그는 a태그에 마우스가 올라가있거나, 활성화되어있거나, 키보드로 선택되었을때 배경색상 변경하는 코드이다.

• hover : 마우스가 올라가 있는 경우
• active : 활성화되어 있는 경우
• focus : 키보드로 선택되어있는 경우

1
2
3
4
5
6

a : hover,
a : active, 
a : focus {
/* a 요소에 
background-color : orange;
}

5. Pseudo Element 가상요소

없는 태그를 css로 넣어줄수도 있다.
아래는 h2태그에 가상의 태그인 >를 넣는 태그이다.
가상태그는 html에서 드래그를 하려고해도 드래그가 되지 않는다.
말그대로 가상태그이기 때문이다.

1
2
3

h2 ::before{
	content : " > "
}

아래 이미지는 h2태그에 가상의 태그인 손가락이모티콘을 표현했다.

6. Cascading 캐스캐이딩

캐스캐이딩은 폭포라는 의미를 가지고 있다.
웹페이지의 디자인이 아래 3가지 디자인과 결합할 수 있기때문에 그 결과값이 내가 예상한대로 나오지 않을 수 있다.

• 웹브라우저의 기본 디자인
• 브라우저 사용자의 디자인
• 그리고 웹페이지 저자의 디자인

따라서 선택자 구체성 점수를 매겨서 우선순위를 잘 파악하고 있어야한다.

7. 선택자 구체성 점수

선택자와 요소에 따라 아래와 같이 다른 값을 매기고 이를 더해주면 어느 것이 더 우선순위인지 확인 할 수 있다.

• HTML태그의 style속성 사용 : 1000점
• ID선택자 : 100점
• CLASS선택자와 가상클래스 : 10점
• TAG선택자와 가상요소 : 1점

사용한 태그가 위의 4분류중 어디에 속하는 지 잘 모르겠는 경우에는 구체성 계산기에 접속하여 궁금한 태그를 복사 붙여넣기하면 된다.
계산기가 자동적으로 사용된 아래 세가지

• ID선택자 갯수
• CLASS선택자와 가상클래스 갯수
• TAG선택자와 가상요소 갯수

를 알려준다 그걸 기준으로 위의 점수표와 함께 계산하면 된다.

파이썬 인강 자기계발 챌린지 20회차 미션

nomal flow에서 벗어나 복잡한 방식의 레이아웃을 하는 방법에 대해 알아보자.
크게 두가지 속성으로 사용할 수 있다.

• float

• position

1. float

float로는 정교한 레이아웃을 작성할 수 있다.
float는 이름그대로 띄우는, 뭔가 떠있는 배치이다.

먼저 비교를 위해 아무것도 적용안된 레이아웃을 보자.
일반적인 단락을 나눈 줄글의 형태이다.
가로로 나눠진 단락을 세로로 나누고싶을때 float가 유용하다.

이제 float는 left와 right로 줄 수 있는데 아래 이미지는 float : left;로 적용한 모습이다.
아래 이미지에서 알 수 있듯이 해당 태그가 왼쪽으로 띄어지고 밑에 배치되었던 줄글이 태그옆으로 옮겨지면서 자연스럽게 흘러내려가는 형태를 취하고 있다

여기서 footer가 조금 아쉽다.
column 3개에만 float : 30%;씩 적용해주었는데 10%가 남다보니 footer의 위치가 어색하게 되어버렸다.
따라서 column들만 float left로 주고 footer는 하단에 배치하고싶다면 아래와 같이 clear : both; 속성을 넣어주면 된다.

clear는 left, right, both 의 값을 선택할 수 있고 해당 사이드에 float정렬을 취소한다.
따라서 현재상황에서는 clear : left; 또는 clear : both; 로 같은 결과값을 출력할 수 있다.

짜잔- 세상 깔끔하다!

2. position

1. static

postion 속성의 default 값이다.
HTML 태그 순서에 따라 화면에 출력된다.

2. relative

원래 위치를 기준으로 상대적인 위치를 지정해줄 수 있다.

position : relative;로는 어떠한 값도 바꿀 수 없다.
그 밑에 꼭 top, bottom, left, right의 값을 통해 어디를 얼만큼 이동할 것인지 정할 수 있다.
여기서 중요한 점은 태그의 원래 위치는 변하지 않는다는 것이다. 없어지지 않고 기억되어져 있다.

하트의 위치에서 top과 left에 100씩 값을 주어서 하트가 글 위로 오게되었다.
여기서 쉽게 헷갈릴 수 있는 점이 있다.
바로 하트가 top과 left로 100씩 움직이는 것이 아니라, top과 left에 100씩 빈 공간을 준다고 생각하면 된다.
빈 공간만큼 원래 태그는 밀려나게된다.

3. absolute

relative와 비슷하지만 차이점이 있다면 relative는 원래 태그자리를 빈공간으로 유지하는데 반해, absolute 원래 태그자리를 없애버리고 상대적인 위치에 위치한다.
absolute는 상위태그를 기준으로 상대적인 위치를 정한다.

4. fixed

absolute와 상대적인 위치를 가진다는 것은 비슷하지만 상위태그기준이 아닌 veiwport(웹페이지가 보이는 화면)을 기준으로 뷰포인트의 특정 위치에 태그를 고정한다. 따라서 스크롤을 내려도 태그는 같은 위치에 고정되어있다.

3. css선택자 우선순위

선택자는 총 3종류가 있다.

id선택자 > class선택자 > tag선택자

만약 id와 tag에 둘다 css값이 적용되어 있으면 id클래스가 우선이므로 tag값에 덮어씌어져서 id 클래스값이 출력되게 된다.

ITWILL학원 : 3강 WEB(HTML, CSS) BY 김영희

테이블 칸 합치기

• colspan = “n” : 세로방향으로 합치는 속성
• rowspan = “n” : 가로방향으로 합치는 속성

칸합치는 속성은 항상 th나 td에서 이루어지지 tr에서는 절대 사용하지않는다!

rowspan을 생각할때는 빨래줄(tr)에 빨래(td나th)가 걸려있다고 생각하면 편하다
기준을 몇번째 tr인지 확인한 뒤 빨래줄에 빨래를 걸면 아래로 내려오듯이 td가 내려와있다고 생각하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table>
	<tr>
		<th colspan="2">칸 합치는 속성</th>
	</tr>
	<tr>
		<th>가로방향</th>
		<th>세로방향</th>
	</tr>
	<tr>
		<td>colspan="n"</td>
		<td>rowspan="n"</td>
	</tr>
	<tr>
		<td colspan="2">n개의 칸을 하나로 합치는 속성</td>
	</tr>
</table>

가로방향 합치기와 세로방향합치기가 동시에 나오는 예시는 아래와 같다
rowspan을 위에서 말했던 빨래감예시를 들어 설명해보면, 첫 번째 tr의 빨래줄의 마지막 td에 아래 빨래감이 3개가 걸려야한다.(즉 3칸을 합친다)
따라서 첫번째 tr의 두번째 td에 rowspan=”3”를 해준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table>
    <tr>
        <td colspan="2">a</td>
        <td rowspan="3">b</td>
    </tr>
    <tr>
        <td>c</td>
        <td rowspan="2">d</td>
    </tr>
    <tr>
        <td>e</td>
    </tr>
    <tr>
        <td colspan="3">f</td>
    </tr>
</table>

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. Date객체

Date 객체의 특징

• 년,월,일 지정해서 객체를 사용
• 0부터 11까지를 1월부터 12월로 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//참고로 today는 2020년 6월 12일이다.
let today = new Date();
document.write(today+"<br>")

let day = new Date(2020,0,1); //month숫자를 0에서부터 세기때문에 1월1일은 0,1이 되어야함 
document.write(day+"<br>")

let day1 = new Date(2020,1,1); //2월1일
document.write(day1+"<br>")

let day2 = new Date(2020,0,1,11,30,5); //년,월,일,시,분,초 지정해서 객체사용가능
document.write(day2+"<br>")

let day3 = new Date(2020,0,1,11,61,5); //분에 61분을 적으면 자동으로 1시간이 올라감
document.write(day3+"<br>")

let day4 = new Date("2020/1/1") //년,월,일만 가능. 시분초불가. 월을 나타낼때 0부터가 아니라 1부터 시작
document.write(day4+"<br>") 

// 출력값 순서대로
Fri Jun 12 2020 11:14:44 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Sat Feb 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 11:30:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 12:01:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)

변수에 저장한 date객체를 가져와서 사용해보자
요일출력하는 getDay()의 경우 0(일)부터 6(토)까지를 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//참고로 today는 2020년 6월 12일이다.
let today = new Date();

document.write(today.getFullYear() +"<br>") //년출력 year말고 fullyear써야함
document.write(today.getMonth() +"<br>")  //월출력 (0부터 11까지)
document.write((today.getMonth()+1) +"<br>") //알아보기쉽게 1을 추가해서 사용
document.write(today.getDate() +"<br>") //일출력
document.write(today.getDay() +"<br>") //요일출력

// 출력값 순서대로
2020
5
6
12
5

숫자로 들어온 요일을 글자로는 어떻게 바꿀수있을까?
여러가지 방법이 있다

1. Array의 index 활용
   요일이 숫자로만 출력되어 아쉬운 경우에는 변수에 넣어 index를 이용하여 아래처럼 금요일 이렇게 출력되게 할수있다

1
2
3

let today = new Date();
let week = new Array('일', '월', '화', '수', '목', '금', '토')
document.write(week[today.getDay()] + "요일 <br>")

2. 제어문사용 (if나 switch)
   if나 switch를 통해 일일히 조건을 걸어 나열할수있다
   if는 많이 써보았으니 switch를 써보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function getToDay(day) {
	switch (day){
	case 0 : 
		document.write('일요일')
		break;
	case 1 : 
		document.write('월요일')
		break;
	case 2 : 
		document.write('화요일')
		break;
	case 3 : 
		document.write('수요일')
		break;
	case 4 : 
		document.write('목요일')
		break;
	case 5 : 
		document.write('금요일')
		break;
	case 6 : 
		document.write('토요일')
		break;
	}
}

getToDay(today.getDay())

2. 디데이 계산하는 함수 구하기

Date()객체를 활용하여 디데이를 계산한느 함수를 구해보자
Date()객체에서는 사칙연산이 적용되는데 단위가 밀리초로 출력된다

• 밀리초 = 1/1000초
• 1초 = 1000msc
• 1분 = 60 * 1000
• 1시간 = 60 * 60 * 1000
• 하루 = 24 * 60 * 60 * 1000

1
2
3
4
5
6
7
8
9
10

function calculator(year, month, day){
	let today = new Date();
	let lastday1 = new Date(year,(month-1),day) //컴터는 0월부터계산하니까 사용자입력값에서 1을 빼줌
	console.log(lastday1)
	let result =  (lastday1 - today) / (24 * 60 * 60 * 1000);
	document.write(Math.ceil(result) + "일 남았습니다 <br>")
}

calculator(2020,12,31); //202일 남았습니다
calculator(2020,06,14); //2일 남았습니다

ITWILL학원 : 8강 JS기초 BY 정규태강사

1.객체 Object

1. 정의

자바스크립트는 객체기반의 언어
객체는 기능, 속성을 포함하고 있는 것
추상화된 객체를 사용할때 속성은 변수를 사용해서 표현하고 기능은 함수(매서드)를 사용해서 표현한다
자바스트립트에서는 객체를 직접 만들어쓰지않고 만들어진 객체를 활용한다
하지만 자바는 자주 직접 만들어서 사용한다

1
2
3

let phone = new Object();  //여기서 phone은 참조변수
phone.모델명 = "아이폰"
phone.on(); //전원켜는 기능 실행

위의 phone을 참조변수라고 한다

2. 객체종류

• 내장객체
  • 자바스크립트엔진에 포함되어있는 객체
  • String : 문자를 처리하는 객체
  • Date : 날짜를 처리하는 객체
  • Array : 배열을 처리하는 객체
  • Math : 수학을 처리하는 객체
  • 등등

• 브라우저 객체모델(BOM : Browser Object Model)
  • 브라우저에 계층적으로 내장되어 있는 객체
  • 즉 단계가 있는 객체
  • window
  • screen
  • location
  • history
  • navigator
  • document
  • 등등

• 문서 객체 모델(DOM : Document Object Model)
  • HTML 테그의 문서구조 + CSS
  • IE8이하의 버전에서 호환성이 떨어지기에 잘 안쓰게 된다 -> 대신 jQuery문서객체모델을 사용

2. 내장객체

1

let 참조변수 = new 생성변수();

new : 객체(instance)를 생성하는 연산자이다 -> 메모리에 올려서 사용할 수 있도록 준비

3. tv 채널up/down 함수만들기

tv 채널 up과 down이 되는 함수를 만들어보자
채널은 1부터 500까지 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function chUp(){
	if(tv.ch >= 1 && tv.ch < 500){
		tv.ch ++;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}else if(tv.ch == 500){
		tv.ch = 1;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}else{
		tv.ch += 1;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}
}
}

실행시마다 채널이 다운되는 함수는 아래와 같다

1
2
3
4
5
6
7
8
9
10
11
12

function chDown(){
	if(tv.ch == 0){
		tv.ch = 500;
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}else if(tv.ch == 1){
		tv.ch = 500
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}else{
		tv.ch -= 1;
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}
}

tv.ch가 499일때 두 함수를 호출해보면

1
2
3
4
5
6
7

chUp() // 499 -up-> 500
chUp() //500 -up->501 ->1
chUp() //1 -up->2
chDown() // 2 -down->1
chDown() // 1 -down->500
chDown()  // 500 -down->499
chDown()  // 500 -down->499

4. new 를 쓰고 안쓰고의 차이

new 연산자는 생성자함수이다.
생성자란 객체를 생성할때 초기화하는 것이다.

new를 쓰고 안쓰고의 차이가 뭘까? => 사용법의 차이가 있다(변수에 담아서 사용유무)

1. 객체를 생성할때 new 연산(생성자함수)를 해야하는 객체

   • 날짜객체 : Date()
   • 변수를 생성해서 객체를 담아서 사용

     1 2 3

     let day = new Date(); //변수에 담아서 사용 day.속성 //이렇게 사용해야함

2. new연산 없이 사용가능한 객체

   • 수학 : Math 객체 => Math.floor(버림), Math.round(반올림), Math.ceil(올림), Math.max(여러값비교해서 최대값), Math.min(여러값비교해서 최소값), Math.abs(절대값), Math.random(0부터 1사이에 있는 실수를 랜덤하게 출력)

     • 가장 자주 사용하는 것은 random이다
     • Math.floor(Math.random() *10)로 0부터 10까지의 랜덤양수를 출력한다

   • 숫자 : Number 객체

   • 문자 : String 객체

   • 배열 : Array 객체

   • 바로 사용가능

     1	Math.floor(); //변수에 담지않아도 바로 사용가능

파이썬 인강 자기계발 챌린지 19회차 미션

1. font-size

폰트 사이즈를 지정하는데 크게 가지방식이 있다.
직접 수치를 입력하는 방식과 상위요소 기준 상대적수치를 적용하는 방식 그리고 상속값을 적용하는 방식이다.

1
2
3
4
5

{
font-size : 15px; //직접 입력.
font-size : 1.5rem; //상위요소 기준 상대적 수치.
font-size : inherit; //상속값 위의 태그의 폰트사이즈를 그대로 받는다.
}

em과 rem의 차이?

css다루다보면 em과 rem을 접하게 된다.
나는 항상 px이나 %단위로 직접 수치를 입력하여 지정하였는데 em, rem을 사용하면 상대적인 수치가 자동적으로 정해져서 훨씬 디자인이 깔끔하고 통일성있어보이기도 한다.
그렇다면 em과 rem의 차이는 무엇일까?
둘 다 수치를 직접적으로 입력하는 방식이 아니다.

• em : 상위요소의 크기에 비례.
• rem : 최상위 요소의 크기 즉, html 요소 크기에 비례.
• 참고로 html 요소 크기의 기본값은 웹브라우저 설정에서 정한 크기이며 보통 16px이다.

결국 둘의 차이점은 최상위요소의 크기인지 상위요소의 크기인지의 차이다.
언뜻 읽으면 큰 차이가 없을 것 같지만 만약 em의 상위요소가 또 다른 상위요소에 상속을 받았다면 원하는 크기로 지정이 어려울 수 있다. 왜냐면 em은 상속의 영향을 받기 때문이다.

따라서 rem을 쓰는 것을 더 추천한다. 다만 rem을 쓰면 사용자가 커스터마이징해놓은 사이즈를 무시해버려서 사용자의 가독성을 오히려 떨어뜨릴수있다.

따라서 적절한 곳에 em과 rem을 쓰는 것이 좋다

그럼 언제 rem과 em을 써야할까?

참고링크 : 종합 안내: Rem 그리고 Em, 언제 써야 할까

• em 단위는 최상위 요소에 지정된 폰트 크기 말고, 다른 특정 요소의 폰트 크기에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• rem 단위는 em 단위를 쓸 필요가 없고, 또 브라우저의 폰트 크기 설정에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• 폰트 크기 지정을 비롯해서 꼭 em 단위를 써야 하는 곳이 아니라면 rem 단위를 사용하십시오.
• media queries에도 rem 단위를 쓰세요.
• 다중 칼럼 레이아웃의 너비에는 em 혹은 rem을 쓰진 마십시오 - 대신 %를 쓰세요.
• 만약에 크기가 변할 경우 해당 요소의 레이아웃이 깨지는 걸 막을 수 없다면 em과 rem 모두 쓰지 마세요.

2. font-family

폰트패밀리는 글꼴집합이다.
만약에 폰트를 하나를 지정했다고 생각해보자.
이용자가 해당 폰트가 없으면 폰트를 기본값으로 표시되어진다.

• serif는 바탕체계열
• Sans-serif는 고딕체계열
• Cursive는 필기체계열
• monospace는 가로 폭이 동일한 글꼴

아래는 폰트패밀리예시이다

1
2
3

{
font-family : Arial, Georgia, Times, "Times New Roman", serif
}

위에서 말했듯이 이용자의 컴퓨터에 지정한 폰트가 설정되어 있지 않으면 기본값으로 표시된다.
이러한 경우에는 아예 웹 폰트를 사용하면, 이용자의 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있다.

웹폰트 사용 방법은 html에서 link태그로 삽입하면된다.

1
2
3
4
5
6
7
8
9
10

<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Londrina+Outline|Open+Sans+Condensed:300" rel="stylesheet">

<style>
  #font1{
	font-family: 'Open Sans Condensed', sans-serif;
  }
  #font2{
	font-family: 'Indie Flower', cursive;
  }
</style>

참고링크 : 웹폰트 생활코딩

3. font 한꺼번에 적용

위에서 사용했던 폰트스타일이외에도 다양한 폰트스타일을 한 줄 코드로 작성할 수 있다
중요한 점은 아래 순서대로 작성해야 제대로 적용이 된다

1

font : 폰트스타일 폰트웨이트 폰트사이즈 폰트패밀리

적용된 예시는 아래와 같다
표시를 한 순서대로

• 1번에는 폰트스타일
• 2번에는 폰트웨이트
• 3번에는 폰트사이즈
• 4번에는 폰트패밀리

4. font color

폰트 컬러지정은 그냥 color적어주면 된다

• rgba(0,0,0) : 숫자가 작을수록 어두운 색을 띈다 = 검정색 = #000000
• rgba(255,255,255) : 숫자가 높을수록 밝은 색을 띈다 = 흰색 = #ffffff

폰트의 투명도도 조절할 수 있다.
rgba색상코드에서 마지막에 0에서 1사이의 숫자를 정해주면 된다

• 0 : 완전투명
• 0.5 : 절반만 투명
• 1 : 불투명

1
2

color : rgba(0,0,0, 0.5)
// 검정색컬러에 절반만 투명

ITWILL학원 : 7강 JS기초 BY 정규태강사

1. 무한반복문

반복문이 무한으로 실행되는 반복문.
문제의 해결이 언제 끝날지 모르는 경우에 주로 사용.

예를 들어,사용자가 정답을 맞출때까지 실행하는 퀴즈프로그램을 만들었다고 생각해보자
-> 사용자가 언제 정답을 맞출수있을지 알수있을까?
-> 모른다. 따라서 계속해서 실행을 하고 있어야한다
-> 이때 무한반복문 사용
-> 답을 맞추면 끝나야하기때문에 보조제어문이 필요하다

• 실제예시 : 스마트폰의 지문인식

1
2
3
4
5
6
7
8
9
10
11

for(;;){
 console.log("무한반복")
};

for(;true;){};

for(let i=1;;i++){};

while(true){};

do {} while(true);

2. 보조제어문

• break문 : 가장 가까운 반복문 하나를 탈출하는 코드다
  • 즉 이중for문이면 둘 다 탈출하는 것이 아니라 가장 가까운 for문만 탈출하는 것이다
  • break;의 순서에 따라 결과값이 달라지므로 위치가 중요하다
  • 예를 들어 : ~까지만 해라

1
2
3
4
5
6
7
8
9
10
11
12

for(let i=1; i<=10; i++){
	document.write(i+" ");
	if(i%4 === 0) break;
} //1 2 3 4

// break문은 순서가 중요하다
// 순서에 따라 값이 다르게 나오기 때문이다

for(let i=1; i<=10; i++){
	if(i%4 === 0) break;
	document.write(i+" ");
} //1 2 3

아래는 for문의 조건식으 true인 무한반복문이다
무한반복문과 함께 쓰이는 경우는 아래와 같다

1
2
3
4

for(let i=1;true;i++){
	if(i === 10) break;
	document.write(i+" ")
}

• continue문 : 해당 경우를 실행하지않고 다음 경우를 실행하는 동작
  • continue조건은 빼고 반복문을 실행하는 동작.
  • 예를 들어 : ~를 빼고 진행해라!할때 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let sum=0,i=0

while(i<5){
	i++
	if(i==3)
		continue;
		sum=sum+i
	document.write("i값은 " + i + " sum값은 " + sum + "<br>")
 }
/* i값은 1 sum값은 1
i값은 2 sum값은 3
i값은 4 sum값은 7
i값은 5 sum값은 12 */

document.write("while문의 결과값 : "+sum) // 12

위의 두가지를 활용한 숫자퀴즈를 만들어보자

1. 특정숫자 미리 지정 (1부터 100까지 중에서)
2. 사용자로부터 입력 -> 미리 지정한 숫자와 큰지, 작은지 같은 지를 비교
3. 큰 경우 -> “입력된 값이 큽니다” 출력
4. 같은경우 -> “정답입니다 도전횟수는 땡땡입니다” 출력
5. 작은 경우 -> “입력된 값이 작습니다” 출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let quiz = Math.floor(Math.random()*100); //랜덤숫자만들기
console.log("랜덤숫자 정답은? "+ quiz)
let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

for(let count=1; true; count++){
	if(quiz > input){
		input = prompt("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요");
	}else if(quiz < input){
		input = prompt("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		input = prompt("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

강사님 코드는 아래와 같다
굳이 input을 for문 밖에 두는 것이 아니라 안에 두기만 하면 되는 거였다
괜히 일일히 input = prompt를 적었다… 띠용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let quiz = Math.floor(Math.random()*100);
console.log("랜덤숫자 정답은? "+ quiz)

for(let count=1; true; count++){
	let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

	if(quiz > input){
		alert("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz < input){
		alert("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		alert("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

3. Function 함수 : 일반, 익명

함수는 절차지향언어에서 사용되고 매서드는 객체지향언어에서 사용된다.
엄밀히 따지면 다른 개념이지만 크게 보면 동일하게 사용되기도 한다.
익명함수는 보통 변수에 넣어서 사용한다

• 변수 : 데이터를 저장해서 사용하는 곳
• 함수 : 실행문을 저장해서 사용하는 곳

1. 일반함수
   일반적으로 함수는 아래와 같이 선언과 사용한다.

1
2
3
4
5
6
7

//1. 일반함수 선언
fuction 함수명(매개변수){
	실행코드
}

//2. 일반함수 호출
함수명();

2. 익명함수
   익명함수의 선언과 사용은 아래와 같다.
   익명함수는 함수명이 없기때문에 변수이름으로 호출하면 된다.
   보통 익명함수는 1회성으로 주로 사용한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//1. 익명함수 선언
 변수 = fuction (매개변수){
	실행코드
}

//2. 익명함수 호출
변수명();

//3.예시

let fun1 = function (){
	document.write("하이")
}
fun1() //하이

4. 재귀함수

재귀함수란 다시 자기자신을 호출하는 함수이다.
재귀함수는 반복문없이 계속 반복된다 따라서 사용범위를 주의해서 사용해야한다
재귀함수는 일정크기만큼만 실행되고 자동적으로 멈춘다.

return을 이용해 함수를 탈출할수있다

1
2
3
4
5
6
7
8

//1. 재귀함수 선언
fuction 함수명(매개변수){
	실행코드;
	함수명(); //자신의 이름 또 호출
}

//2. 재귀함수 호출
함수명();

재귀함수를 활용하여 1~10까지 숫자를 나타내는 함수예제를 보자

1
2
3
4
5
6
7
8
9
10
11

let num=0;
function testFun(){
	if(num < 10){
		num++;
		document.write(num + " ")
		testFun();
	}else{
		return;
	}
}
// 1 2 3 4 5 6 7 8 9 10

강사님은 더 짧은 코드를 썼다
나는 왜 이 코드를 못했을까?

뭔가 더 간단해보인다.
무슨 코드가 더 좋은 코드일까?

가독성이 좋지만 긴 코드 vs 가독성이 조금 떨어지지만 짧은 코드

아직 잘 모르겠다. 아마 회사 분위기에 따라 다르지 않을까?

1
2
3
4
5
6
7
8
9
10

let num1 = 0;
function testFun2(){
	num1++;
	document.write(num1 + " ")
	if(num1 === 10){
		return;
	}
	testFun2();
}
// 1 2 3 4 5 6 7 8 9 10

5. 지역변수를 전역범위에서 쓰는 방법

지역변수를 전역변수처럼 쓸 수 있을까?
정답은 예스!
return을 이용한 예시를 보자

1
2
3
4
5
6
7
8
9

let number = 200;

function fun() {
	var number = 300;
	return number;
}

number = fun();
document.write(number) //300

number의 값은 200이 아니라 300이 나온다.
지역변수를 함수로 만들고 그 값을 전역변수 안에 넣었기 때문이다.

6. 내장함수

자바스크립트엔진에는 내장되어있는 함수들이 있다.

예시

• String(1)
• Number(“1”) => number는 정수와 실수를 합친 것으로 표현됨
• Boolean(0) =>
• alert(“경고창”)
• prompt(“질문”, “기본값”)
• confirm() => yes, no 결정
• parseInt() => 문자데이터를 정수데이터로 변경
• parseFloat() => 문자데이터를 실수데이터로 변경

ITWILL학원 : 6강 JAVA BY 윤미영강사

1. 리터럴(literal)

실제 값.
변수의 값이 변하지 않는 데이터(메모리 위치안의 값)이다.

참고링크 : 상수와 리터럴차이

2. byte + byte가 왜 에러날까

b1과 b2는 연산결과는 잘 나오지만 b3의 연산결과는 에러가 난다.

1
2
3
4
5
6
7

byte b1 = 10;
byte b2 = 20;
System.out.println(b1+b2); //30

byte b3 = b1+b2;
System.out.println(b3); //Type mismatch: cannot convert from int to byte

산술연산자는 기본적으로 int형이다. 그래서 type mismatch가 나타난다
int형으로 산술하면 잘~출력된다

1
2
3
4

int i1 = 100;
int i2 = 200;
int i3 = i1+i2;
System.out.println(i3); //300

3. int VS Integer

아래 데이터형의 차이점이 뭘까?

• int a; 기본데이터형
• Integer i; 참조데이터형
  • 라이브러리
  • 매서드사용가능

1
2
3
4
5
6

int a1 = 100;
Integer a2 = 100;

System.out.println(a2.toString()); //100
System.out.println(Integer.MAX_VALUE); //2147483647
System.out.println(Integer.MIN_VALUE); //-2147483648

4. void와 int차이

void와 int 매서드의 차이를 알아보자
public static 뒤에 void가 오기도하고 int등 다른 데이터타입이 올 수 있다.

• void의 의미 : myPrint가 가지고 있는 값이 없을때, 돌려줄값이 없을때 return이 없을때 사용.
• int의 의미 : 반대로 가지고있는 값이 있을때, 돌려줄값이 있을때. return과 함께 사용

1
2
3
4
5
6
7

public static void 매서드이름(매개변수){ //void 매서드 정의하기
	System.out.println("void 매서드")
}

public static int 매서드이름(int 변수명1, int 변수명2){ //int 매서드 정의하기
	return 변수명1 + 변수명2;
}