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

JAVA 369게임만들기

369게임을 만들어보았다.
일의 자리와 소수점첫번째자리를 나누어서 처리했다.

변수 input는 사용자가 scanner를 통해 입력하는 숫자이다.
변수 remainder는 숫자를 10으로 나눈뒤 소수점첫째짜리를 3,6,9인지확인한다.

함수 divideTen()는 10으로 나눠서 369인지 체크하는 반복되는 코드이므로 밖으로 뺐다.
함수를 어디로 빼야하는지몰랐는데 main함수밖이면서 class안으로 빼야하는 것이었다.

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

public class game369 {
	public static void main(String[] args) {
		Scanner sc = new Scanner(System.in);
		System.out.println("1~99까지 정수를 입력해주세요");
		int input = sc.nextInt();
		int remainder = input%10;  //소수점첫번째자리체크

		if(remainder == 3){
			divideTen(input);
		}else if(remainder == 6){
			divideTen(input);
		}else if(remainder == 9){
			divideTen(input);
		}
	}

	private static void divideTen(int input){
		if(input/10 == 3 || input/10 == 6 || input/10 == 9){ //1의자리체크
			System.out.println("박수짝짝");
		}else{
			System.out.println("박수짝");
		}
	}
}

강사님 코드는 아래와 같다.
박수치는 횟수를 카운드해서 if조건문으로 박수2번이면 박수짝짝을 입력하는 함수이다.

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

public static void main(String[] args) {
	Scanner sc = new Scanner(System.in);
	System.out.println("1~99까지 정수를 입력해주세요");
	int num = sc.nextInt();
	int digit10 = num/10; //1의자리체크
	int digit1 = num%10; //소수점첫째자리체크

	int clapCnt = 0;//박수횟수

	if(digit1%3 == 0 && digit1 !=0){ clapCnt++; } //else가 필요없다. 변수가 0일때도 카운트되기때문에 꼭 제거해야한다.
	if(digit10%3 == 0 && digit10 !=0){ clapCnt++; } //변수가 0일때도 카운트되기때문에 꼭 빼줘야한다.

	if(clapCnt == 2){
		System.out.println("박수짝짝");
	}else if(clapCnt == 1){
		System.out.println("박수짝");
	}
}

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

1. 새로운 프로젝트 생성하기 : django-admin startproject 새로운프로젝트명

장고 설치가 완료되면 django-admin 명령어를 사용할 수 있다.
django-admin startproject fc_community를 통해 fcdjango_venv 아래에 fc_community 프로젝트가 만들어지고 안에 기본적인 내용들이 자동생성된다. 짜라란~

2. app생성하기 : django-admin startapp 새로운앱명

django-admin startapp board명령어를 통해 fcdjango_venv 아래에 board라는 새로운 앱이 생성되어지고 models과 view게층이 자동적으로 생성된다.

3. project와 app의 차이점

그렇다면 startproject명렁어와 startapp명령어의 차이점이 무엇일까?

위의 두가지 명령어로 자동생성된 파일들을 보자.

1번 빨간색은 startproject명렁어를 통해 자동생성된 파일들이다.
2번 파란색은 startapp명령어를 통해 자동생성된 파일들이다.

• 프로젝트는 앱 한개 이상을 담을 수 있고 관련된 configuration도 함께 담아 하나의 웹사이트를 구성한다.

• 앱은 뷰계층과 모델게층을 묶어서 제공하며 하나의 웹앱기능만 담당한다. 또한 app은 프로젝트 A, B, C, D등등 동시에 여러 프로젝트에 포함될 수 있다.

4. templates생성

MTV모델링을 하기 위해서는 템플릿폴더를 생성해줘야한다.
템플릿은 어디에나 만들어도되지만 보통 앱안에 만든다.
앱폴더명을 우클릭한 뒤 새로운 폴더를 누른 뒤 폴더이름은 templates라고 생성한다.
장고에서 사용하는 템플릿엔진이 사용될때 이 폴더가 기본적으로 작동한다.
그러니 app을 만든 뒤 항상 templates폴더도 생성할 것!
세트로 기억하자 세트!

5. 만든 app을 프로젝트에 등록하기

만든 앱들이 자동적으로 프로젝트에 등록되면 정말 좋겠지만 그렇지않다.
따라서 프로젝트에 만든 앱을 등록시켜 연결이 되게끔 만들어줘야한다.

startproject명령어로 프로젝트를 생성하면 프로젝트폴더안에 동일한 이름의 폴더가 하나 더 생성된다.
여기서 만든 앱들을 등록시킬 수 있다.
프로젝트명과 동일한 파일명을 클릭하면 여러 파일 중에 settings.py가 있다.
클릭후 Application definition를 찾아보면 이미 installed된 앱 목록이 나온다.
장고에서 기본적으로 제공해주는 앱으로 아래 코드에서 django.contrib로 시작하는 6개가 바로 그 앱들이다.
이 코드 아래에 새로 만든 app을 추가해줘야한다.
꼭 등록을 해줘야 모델이라든지 뷰등을 사용할 수 있게 된다.
절대 까먹지말자!

나는 board와 fcuser앱 두개를 만들었으므로 두개를 아래 코드처럼 추가해줬다.

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

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'board',
    'fcuser'
]

6. Class생성

user를 관리할 수 있는 앱을 만들어보자.

1
2
3
4

class Fcuser(models.Model):
    username = models.CharField(max_length=64, verbose_name="사용자명")
    password = models.CharField(max_length=64, verbose_name="비밀번호")
    registered_dttm = models.DateTimeField(auto_now_add=True, verbose_name="등록시간")

• CharField는 문자열을 담을 수 있는 필드이다.

• registered_dttm에서 dttm은 실무에서 자주 사용되는 약어로 dateTime의 약자이다

• auto_now_add=True 는 fcuser라는 객체가 저장되는 시점에 자동으로 현재시간을 데이터로 넣게된다.

장고는 클래스만 만들면 데이터를 생성하고 삭제하는데에 있어서 별도의 지정이 필요가 없다.
클래스 하나로 모델이 완성되버린 것이다! 디폴트값이 적용되어 바로 출력되기때문에 매우 편리하다.

7. class Meta

테이블명을 바꿀때는 아래 코드를 사용한다.
class Meta:라는 클래스안의 클래스를 통해서 장고프레임워크에게 내가 원하는 것을 전달할 수 있다.

테이블명을 바꾸는 이유는 이해도를 높이기 위함도 있지만 기본적으로 장고에서 제공되는 테이블명과 구분되어야하기 때문에 테이블명을 바꿔주는 것이 좋다.

1
2
3
4
5
6
7

class Fcuser(models.Model):
    username = models.CharField(max_length=64, verbose_name="사용자명")
    password = models.CharField(max_length=64, verbose_name="비밀번호")
    registered_dttm = models.DateTimeField(auto_now_add=True, verbose_name="등록시간")

    class Meta:
        db_table = "자신이 원하는 테이블명"

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

1. 프레임워크 VS 라이브러리

자주 사용되는 코드를 체계화하여 쉽게 사용할 수 있도록 도와주는 코드 집합이다.
라이브러리와 혼동될 수 있지만 규모가 훨씬 크며 프레임워크는 프로젝트의 기반이 된다.
건축에 비유를 해본다면 구조를 만드는 골조가 프레임워크고, 그 외 자재들이 라이브러리가 된다고 할 수 있다.
웹 개발에 필요한 기본적인 구조와 코드(클래스, 함수등)가 만들어져있다.

• 기본적인 구조와 코드 예시 : URL파싱, 세션관리, 요청파싱, 응답 생성, 데이터베이스연동, 관리자페이지, 비즈니스로직, 데이터정의 등등

웹프레임워크가 위와 같이 다양한 일을 한다면 개발자는 무엇을 해야할까?

개발자는 비즈니스 로직과 데이터 정의를 중점으로 해야한다.
필요한 것들만 중점적으로 하고 나머지는 프레임워크를 이용하면 된다.

2. Django란

장고는 3가지의 계층을 이루고 있다.

• 모델 계층
• 뷰 계층
• 템플릿 계층

이는 MVC라고 하는 개발방법론(패턴)에 기반한 코드구조이다.

3. 모델 계층

모델 계층은 앞에셔 얘기했던 프레임워크의 다양한 기능(URL파싱, 세션관리, 요청파싱, 응답 생성, 데이터베이스연동, 관리자페이지, 비즈니스로직, 데이터정의)중에 데이터베이스와 연동되는 기능을 담당한다.

기본적으로 데이터베이스를 사용하려면 SQL이라는 별도의 문법을 사용해야한다.
하지만 Django에서는 모델 계층의 클래스를 연결만해주면 함수를 사용해서 SQL을 생성할 수 있다.
간략하게 클래스를 생성하면 SQL문법으로 자동으로 table을 생성해준다.

세상-편하다!

4. 뷰 계층

앞에서 얘기했던 프레임워크의 다양한 기능(URL파싱, 세션관리, 요청파싱, 응답 생성, 데이터베이스연동, 관리자페이지, 비즈니스로직, 데이터정의)중에 비즈니스 로직에 해당된다.
이 비즈니스 로직은 개발영역으로 개발자가 역량을 쏟아야하는 부분이다.

뷰 계층에서 개발자가 비즈니스 로직을 작성하면 프레임워크가 URL파싱, 요청파싱, 응답관리등을 해준다.

위의 이미지처럼 한줄코드만 작성해주면, path뒤의 url로 변수등을 이용하여 요청사항을 쉽게 입력할 수 있다.

5. 템플릿 계층

디자이너에게 친숙한 문법을 제공한다.
HTML을 기반으로 HTML코드안에서 반복문등을 사용할 수 있는 계층이다.

6. Django를 위한 패키지 설치

장고를 가상환경에서 설치하고 실행하고자한다.

1. virtualenv 설치하기 : pip3 install virtualenv

사용하는 에디터에서 터미널을 열고 pip3 install virtualenv 명령어를 입력해준다.
pc 한대에서 여러 프로젝트를 진행할때 버전이 다른 프로그램들을 사용하면 프로젝트왔다갔다할때마다 패키지를 재설치해줘야하는 번거로움이 있다. 따라서 프로젝트별로 패키지를 관리하는 공간이 분리되어야한다.
그러한 환경을 제공해주는 것이 가상환경이다.

가상환경을 제공해주는 패키지는 다양하지만 virtualenv로 진행 할 예정이다.

2. 가상환경 폴더만들기 : virtualenv 새로운파일명

패키지를 설치하면 새로운 명령어인 virtualenv를 사용할 수 있다.
virtualenv 새로운 파일명명령어로 새로운 프로젝트를 생성해준다.
vs code의 익스플로러에 자동으로 프로젝트가 생성된 것을 확인할 수 있다.

3. Django설치 : pip3 install django

1. 가상환경안에 들어가기
   장고를 설치하기전 가상환경안에 들어가야한다.
   가상환경안에서 설치해야 패키지관리가 가능하다.

터미널에서 cd 가상환경을 설치한파일경로\Scripts\activate명령어를 입력한다.
내 경우 cd Fastcampus Python\Django\fcdjango_venv\Scripts>activate 로 입력했는데 vs code에서는 activate 명령이 현재 위치에 있지만 이 명령을 찾을 수 없습니다.라는 명령어가 반복적으로 떠서 그냥 명령프롬프트 cmd에서 진행했다.

참고로 cmd키는 방법 : window key + r로 실행창을 띄운 뒤 cmd검색하면 끝!

가상환경에 들어가게되면 line 제일 앞부분에 (fcdjango_venv)가 적히고 그 뒤에 주소가 적힌다.

꼭 (fcdjango_venv)를 확인하고 Django를 설치하자.

2. 장고설치하기
   가상환경안이란걸 확인 후 pip3 install django명령어를 입력해주면 Django가 Successfully installed asgiref-3.2.9 django-3.0.7 pytz-2020.1 sqlparse-0.3.1 성공적으로 설치된다.

7. 가상환경들어가는 순서

1. cmd에서 code라고 명령어를 입력하면 vs code가 오픈된다.
   • 그냥 vs code를 더블클릭해서 오픈됨.
2. vs code의 terminal에서 가상환경을 설치한 폴더로 이동한다.

CUI환경 VS GUI환경

GUI(Graphic User Interface)

문자가 아닌 그래픽 위주로 이루어진 방식을 말하며 현재의 우리가 쓰고있는 환경을 말한다.
운영체제에서 작업할때 명령어 대신 아이콘을 더블클릭하여 사용하는 등 그래픽으로 데이터를 처리하는 환경이다.

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

1. git 버전관리

버전관리는 필수이다.
버전관리를 이용하면 아래 두가지 장점이 있다.
표준처럼 사용되고 있는 버전관리 프로그램에는 git이 있다.

1. 어떤 부분이 변경되었는지 변경전후의 소스코드를 비교하여 볼 수 있다.

2. 시간의 순서대로 변경한 내용을 확인할 수 있다.
   • 특정코드를 누가 수정했는지 사용자가 적혀있어서 바로 확인할 수 있다

2. git관리영역 세가지

1. 작업디렉토리 Working directory : 현재 편집중인 파일이 저장되는 영역.

2. 임시구역 Staging area : 저장소에 저장할 변경사항을 임시적으로 보관하는 영역.

3. 저장소 Repository : 지금까지의 모든 변경된 작업내역이 영구히 저장되는 영역.

저장되는 순서는

1. 소스코드를 편집 후

2. git add ‘경로’ 명령어로 임시구역에 보관한 뒤

3. git commit 명령어로 repository에 저장한다.

3. vs code로 git commit하는 방법

1. 소스코드를 저장한다.

2. git init 명령어 또는 vs code의 source control에서 저장한 소스코드를 불러와서 git과 소스코드를 연결한다. changes 아래에 변경된 소스코드가 보이지않는 경우 소스코드파일명을 검색해서 연결하면 된다.

3. stage change 혹은 +버튼을 눌러서 임시구역에 보관한다.

4. ctrl+enter로 repository에 저장한다.

즉, 소스코드를 변경한 뒤 commit을 하고 싶다면
일단 소스코드를 변경한 뒤 저장을 누른다. -> vs code의 stage change 혹은 +버튼을 누른다. -> 커밋메모를 입력한 뒤 ctrl + enter를 누른다.
위의 세단계가 기본중의 기본이다.

여기서 commit이란 두가지의 의미가 있다.

• 스테이징영역의 변경사항을 레포지토리에 저장하는 행위

• 변경사항을 묶어주는 단위 : commit을 변경사항이 있을때마다 할 수 있고 또는 모든 변경사항을 다 해준뒤 한번에 commit할수도있다.

4. vs code의 확장프로그램extensions 다운

효율적인 git버전관리를 위해서 vs code의 익스텐션에서 아래 두가지익스텐션을 다운로드한다.

1. GitLens : 소스코드옆에 바로 누가 언제 변경했는 지 알려주는 프로그램

2. Git History : 지금까지 commit된 히스토리를 보여주면서 언제 누가 고쳤는 지 알려주는 프로그램

5. Git History extension 사용방법

vs code의 Source Control에서 ctrl + shift + p 를 누른 뒤 git view history를 검색한다.

commit의 history가 최신순으로 나타나게된다

확인하고싶은 commit을 누른뒤 Compare against previous version을 클릭하면 commit전의 소스코드와 commit후의 소스코드를 비교하여 보기편하게 알려준다.

6. 위의 사항을 git bash로 하기

1. 먼저 git bash를 열어주고 소스코드가 있는 주소로 이동한다.

2. git status : commit이 되지 않은 변경사항을 확인한다

3. git add 소스코드파일명 : 변경한 소스코드파일명을 add해준다. 이 명령어로는 잘 진행되었는지 진행사항체크하기가 어렵기때문에 다시 스테이터스를 확인해줘야한다.

4. git status : commit이 완료되었는지 확인한다.

5. git commit -m “메모내용입력” : commit명령어를 통해 스테이징영역에 보관해둔 소스코드를 레포지토리에 저장한다. -m “메모내용입력”은 생략가능하나 앞으로의 history관리를 위해 간단한 변경사항내용을 적어주면 좋다.

7. git 원격 자동저장설정하기

1. vs code의 Source Control에서 ctrl + shift + p 를 누른 뒤 git add remote를 클릭한다

2. 원격저장할 레포지토리 주소를 붙여넣는다.

3. 이름은 origin입력한다.

4. 점점점(…)을 클릭하여 push를 해준다

5. 참고로, 역으로 웹 레포지토리에서 수정한 내용을 vs code로 받아보고싶을때는 ctrl + shift + p를 누른뒤 git pull을 입력하면 된다

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

1. form태그안의 input태그

input type="" 의 종류는 엄청 많다.

그중에서 아래 코드를 가지고 몇가지 속성과 함께 예시를 알아보자.

1
2
3
4
5
6
7
8
9

<form action="test.jsp" method="POST">
	<label for="id">ID <input type="text" id="id" minlength="6"><br></label>
	<label for="pw">Password <input type="password" id="pw"><br></label>
	<label for="idNumber">Identification Number(without -)<input type="password" maxlength="13" size="20"><br></label>
	<textarea name="memo" id="" cols="50" rows="10"></textarea>
<hr>
<input type="submit" value="입력한대로 제출">
<input type="reset"> 
</form>

1. label for=””와input id=””는 꼭 일치시켜준다

2. input type=”password” maxlength=”13” size=”20”

   • type=”password”는 type=”text”랑 동일하나 외부에 암호화되어 보여진다.
   • maxlength=”13”속성으로 전화번호나 주민등록번호등 최대길이가 지정되어있는 정보들을 데이터 입력길이 지정해줄수있다.
   • size=”20” 는 input에 쓰여진 글자의 숫자를 새고 그만큼 size를 늘리는 방식이다.
   • size속성의 경우 한글 및 영문, 폰트크기에 따라서 size가 달라지기 때문에 width값이 정확하지 않기때문에 잘 사용하지않는다. 보통 css로 크기작업을 해준다

3. input type=”submit”

   • value속성을 적어주지 않으면 브라우저마다 기본 이름이 나온다
   • 기본이름 크롬 : 제출 / 익스엑스 : 퀴리전송
   • 기본이름을 바꾸고싶으면 value=”입력한대로 제출” 이렇게 바꿔주면 버튼안의 글자가 입력한 내용으로 바뀐다

4. input type=”reset”

   • value속성을 적어주지 않으면 브라우저마다 기본 이름이 나온다
   • 기본이름 크롬 : 초기화 / 익스엣지 : 초기화
   • 기본이름을 바꾸고싶으면 value=”입력한 내용 초기화” 이렇게 바꿔주면 버튼안의 글자가 입력한 내용으로 바뀐다

5. 위의 input type="submit"와 input type="submit"은 form태그안에 위치해있을때 사용가능하다!

1
2
3
4
5
6
7
8

<h1>파일전송</h1>
<label for="ph">증명사진</label> <input type="file" value="너의파일" name="" id="ph">

<h1>검색어 삭제</h1>
<label for=""></label><input type="search" name="" id="" value="검색어삭제">

<h1>히든</h1> 숨은데이터전송
<label for=""></label> <input type="hidden" name="membership" id="" value="gold">

6. input type=”file”

   • 로컬 컴퓨터의 파일을 선택하는 기능을 하는 파일전송버튼을 생성한다.
   • 기본벨류값은 “파일전송”이고 value=”너의파일”이렇게 지정해줘도 보여지는 글이 바뀌지않는다.

7. input type=”search”

   • 검색창을 입력하는 기능은 하지 않고 입력된 검색어를 한꺼번에 삭제해주는 버튼을 만들어주는 기능을 한다. 유저에게 유용한 기능이다

8. input type=”hidden”

   • hidden타입은 문서상에 출력되지않는다. 그럼 어디다 쓸까? DB를 다룰때 주로 사용된다.

2. form태그안의 textarea태그

닫힘태그가 꼭 필요하다.
속성들도 꾸미기이기때문에 최근에는 속성을 사용하는대신 css에서 크기를 조작한다.

• 속성
  • cols=”” : 가로길이 ex)cols=”10” : 10줄이 들어가는 크기의 길이
  • rows=”” : 세로길이 ex)rows=”5” : 5열이 들어가는 크기의 길이

1

<textarea name="textarea" cols="50" rows="10"></textarea>

3. form태그안의 button태그

버튼태그의 타입에는 4가지 종류가 있다

1. type=”submit”
   type을 적지않아도 기본으로 적용되는 디폴트값이다

1
2

<button type>제출</button>
<button type="submit">제출</button>

2. type=”button”
   그냥 일반 버튼이다. 따라서 onclick=””으로 function이나 url을 연결할수있다.

1

<button type="button">그냥버튼</button>

3. type=”menu”
   타입을 메뉴라고 주게되면 minlength=””를 적용하였을때 안내메세지를 띄어주는 신통방통한 기능이다
   그런데 구글링해보니 많이 사용하지 않는 타입속성이었다.
   왜지?
   나는 좋은데… 아무튼 잘 사용하지 않는 속성인 것 같다.

1

<button type="menu">메뉴</button>

4. type=”reset”
   입력했던 값을 초기화시키는 버튼이다.

1

<button type="reset">리셋</button>

4. input="button"태그와 button태그의 차이점

input="button"태그와 button태그는 submit을 수행하기에 기능적으로 동일하다.
그렇다면 왜 나눠져있을까?

button태그를 사용하면
버튼안에 이미지를 함께 넣거나 버튼글자의 형태(굵기,기울기등)를 바꾸거나 웹아이콘을 넣는 등의 활용도가 높다.

참고링크 : web icon 사용방법

참고링크 : web icon 종류

따라서 요즘에는 input="button"보다는 button태그를 더 많이 사용한다.

참고링크 : input type=”submit” vs button 비교

5. 드롭다운리스트 Dropdown List

dropdown list는 항목이 많을때 선택할 수 있게끔 아래로 내려오는 목록형식으로 나타내는 태그이다.
공간절약형 객관식이다.

드롭다운 리스트를 이미지로 먼저 만나보자.

위의 4가지 형태를 어떻게 html 태그로 만들수있을까?

1. 기본형

1
2
3
4
5
6
7

<select name="과목" id="">
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JSP" selected>JSP</option>
	<option value="JAVA">JAVA</option>
	<option value="직업기초">직업기초</option>
</select>

기본적으로 적은 순서대로 출력된다
selected 속성 : checked 속성처럼 selected를 주면 HTML이 아닌 JSP를 먼저 출력할 수 있다.

2. multiple 적용

드롭다운리스트는 다중선택이 가능할까?

예스예스예스!

select태그에 multiple속성을 추가해주면 된다.
사용할때는 ctrl를 누르고 다중선택을 하면 표시가 된다.
선택된채로 출력되는 selected도 적용가능하다

1
2
3
4
5
6
7

<select name="과목" multiple>
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JSP" selected>JSP</option>
	<option value="JAVA">JAVA</option>
	<option value="직업기초">직업기초</option>
</select>

3. size 적용

드롭다운리스트는 다중선택되진않지만 박스리스트형태로 출력하고싶다면?

속성 size="n"을 추가해주면 된다.
항목 n개가 보이는 상자형으로 출력된다.

1
2
3
4
5
6
7

<select name="과목" size="10">
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JSP" selected>JSP</option>
	<option value="JAVA">JAVA</option>
	<option value="직업기초">직업기초</option>
</select>

4. optgroup label=”” 적용

만약 optgroup마다 selected를 추가해주면 어떻게 될까?

selected가 다 출력되는 것이 아니라 selected속성이 들어간 제일 마지막(순서가 제일 아래인)태그 하나만 선택된채로 출력된다.

1
2
3
4
5
6
7
8
9
10
11

<select name="과목">
	<optgroup label="오전수업선택">
		<option value="HTML" selected>HTML</option>
		<option value="CSS">CSS</option>
	</optgroup>
	<optgroup label="오후수업선택">
		<option value="JSP" selected>JSP</option>
		<option value="JAVA">JAVA</option>
		<option value="직업기초">직업기초</option>
	</optgroup>
</select>

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

1. JAVA format string

자바 format string은 System.out.printf(“”,)를 이용하여 나타낸다.

주요한 변환코드는 아래와 같다.

포맷스트링으로 자릿수도 표현할 수 있다.

2. Random 숫자 뽑기

• Random 라이브러리 : 무작위 숫자를 생성하기 위해 Random 객체를 사용해야하기때문에 import해야한다.

• null : 아무 값이 없다. 예약어이고 실제 값은 맨 뒤에 위치해있다.

  • 실무에선 null보단 “”로 String을 초기화시켜준다.
  • 왜냐하면 보통 DB에서 데이터를 가져와서 사용하는 경우가 많은데 null로 초기화해버리면 생각하지 못한 에러가 발생할 수 있기때문이다.

• nextlnt(n); : 매서드로 0 ~ (n-1)사이의 무작위 정수를 생성한다.

아래 코드는 0부터 99중에 랜덤숫자를 뽑아서 50이상이면 큰수로 출력하고 그 이하면 작은수로 출력한다.

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

import java.util.Random;

public static void main(String[] args) {
	String result = null;
	Random myRandom = new Random();

	System.out.println("----- 큰수 작은수체크");

	int num1 = myRandom.nextInt(100); //0 ~ 99사이의 정수
	if(num1 >= 50){
		result ="큰 수";
	}else{
		result ="작은 수";
	}
	System.out.printf("%d는 %s이다.%n", num1, result);
}

2. 상황별 반복문 추천

반복문은 크게 3가지 종류가 있다.
for 문, while 문, do ~ while문!

상화별로 추천하는 반복문이 있다.

• for 문 : 반복해야하는 횟수가 지정될 경우 유리

  • ex) 10번 먹으세요

  • 1 2 3

    for(초기화;조건식;증감식){ 조건식이 true일때 실행할 문장 }

• while 문 : 반복횟수보다는 상황에 의한 반복을 정의할 경우 유리

  • ex) 다 먹으세요

  • 1 2 3 4

    while(조건식){ 조건식이 true일 경우 실행할 문장 증감식; }

• do ~ while문 : while작업 중 최소 한 번은 실행해야 할 작업이 있는 경우 유리

  • ex) 한 번 먹어보고 맛있으면 다 먹으세요, 홈페이지의 메뉴 (꼭 한번은 실행되어져야하기때문에)

  • 1 2 3 4 5

    초기화; do{ 조건식이 true일때 실행할 문장 증감식; } while(조건식);

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

1. 설명글 보이지 않게 스타일링

위의 이미지처럼 설명글을 보이지않게 처리하기위해서는 두가지방법이 있다.

1. display: none;

2. visibility: hidden;

1
2
3
4

.mailing-form > lable{
    display: none;
    visibility: hidden;
}

적용시키면 아래 이미지와 같이 설명글은 보이지않게 된다.

이렇게해도 설명글은 보이지 않지만, 스크린리더와 같이 보조기기를 사용하는 사용자들을 위해 웹접근성을 고려한 스타일링을 할 수 있다.

1
2
3
4
5
6
7
8

.mailing-form > lable {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden; /*크기에 넘치는 내용은 숨겨짐*/
    margin: -1px;/*음수마진 가능*/
    clip: rect(0,0,0,0);/*상하좌우를 자를 수 있음*/
}

• overflow : hidden;의 경우 안에 있는 데이터가 흘러넘치는 경우 과감하게 넘치는 내용을 숨겨버리는 역할을 한다.

• margin : -1px; 마진은 음수로도 줄 수 있다.

• clip : rect(0,0,0,0); 앞으로도 사용될지 안될지 잘 모르는 속성이긴 하지만 현재로선 스크린리더 지원에 가장 적합한 속성이다. 상하좌우를 숫자만큼 남기고 자를수있다. 현재 아예 안보이게 만들고싶으므로 모든 숫자를 0으로 설정했다.

2. 버튼태그를 input 태그안에 넣기

위에서 가져 온 이미지를 이번엔 input태그와 button태그에 초점을 맞추어 다시 한번 더 보자.

스타일링을 위해 버튼태그를 어떻게 하면 input태그안에 넣을 수 있을까?
position속성으로 가능하다.

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

.input[type="email"]{
    width: 100%;
    border: 1px solid #44b78b;
    border-radius: 4px;
    height: 5rem;
}

.mailing-form-btn{
    position: absolute; /*input속성안에 위치해야하기때문에 그렇다면 기준은? mailing-form->mailing form에서 relative*/
    top: 0;
    right: 0;
}

.mailing-form{
    position: relative;
}

1. .input[type=”email”]{}의 의미는 input태그중에 type속성을 email로 가지고 있는 모든 태그들을 선택하는 타입선택자이다.

2. input태그에 width: 100%;를 주게되면 안에 들어오는 btn크기에 맞게 100%가 된다.

3. 버튼태그를 input태그안으로 넣기위해선 position값을 주어야한다. bhn태그는 position : absolute;로 주고 버튼태그의 기준인 form태그로 잡고 form태그의 position : relative;를 준다.

위의 태그를 적용하면 아래 이미지처럼 input태그안에 button이 들어간 것을 확인할 수 있다.
하지만 디자인으로서 아쉽다.

1
2
3
4
5
6
7
8
9

.mailing-form-btn{
    position: absolute;
    top: 30%;
    right: 10px;
    border: 0;
    background-color: white;
    color : #44b78b;
    cursor: pointer; /*닿으면 커서를 손가락모양 포인터로 변경시킴*/
}

4. top과 right를 input의 오른쪽중앙에 오도록 크기를 조절하면 된다

5. cursor는 button태그에 닿으면 커서가 화살표모양에서 손가락모양으로 변화하게끔 해주는 속성이다.

   • progress; 로딩모양의 커서로 변한다.
   • row-resize : 가로선 크기를 변화시켜주는 모양의 커서로 변한다.
   • 등등 많다.

코드를 적용한 이미지이다.
input태그안에 button태그가 조화롭게 잘 배치되어있고 커서모양도 submit위에 위치할때 손가락모양으로 변하는 것을 확인할 수 있다.

3. main의 side content 레이아웃 스케치

1. div.container-side-cta : 클릭을 유도하는 다운로드 요소가 배치되어있기에 a태그를 이용해서 버튼처럼 표현할 수 있다.

2. 다운로드 밑에 more로 추가설명링크가 있으므로 이것또한 a태그로 마크업해주면 된다. 그리고 > 부분은 가상요소를 이용하여 출력하면된다.

3. 최근 뉴스가 나오는 부분은 그 부분 전체로 완결성을 가지고 있으므로 article태그로 작성하면된다.

4. news의 날짜와 작성자가 출력되는 부분은 meta태그로 span, time 이용하여 작성하면된다.

5. 위의 2번과 마찬가지이므로 class를 이용하여 같이 스타일링하고 다른 부분만 id를 이용하여 적용한다.

6. 정의부분이기때문에 dl태그와 dt태그를 세트로 이용하면 된다.

4. 가상요소사용하여 “>” 만들기

아래 코드를 적용하면 바로 > 가 추가됨을 확인할 수 있다.

1
2
3

.more::after {
	content : ">";
}

5. nth-chird()

nth-child()는 괄호안에 오는 숫자에 따라 선택되어지는 값이 다르다.

• nth-child(8) : 8번째 요소를 선택하게 된다.
• nth-child(n+6) : 6번째 이후의 모든 요소들을 선택하게 된다.

더 궁금한 사항은 아래 링크를 참고하면 비쥬얼적으로 잘 나타나있어 이해하기 쉽다.

참고링크 : nthmaster

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

1. if문에 return;의 역할

return : 문제발생시 다른 조건을 실행하지않는다. -> 지금 문제를 먼저 해결
예를들어 회원가입페이지의 필수항목인 아이디를 입력하지않았다면 그 다음 항목인 비밀번호는 아예 체크하지않겠다는 의미가 된다.

아래 태그는 if조건문이 연달아 있다.
첫번째 if는 아이디를 입력했는지 체크하는 조건이고 두번째 if는 비밀번호를 입력했는지 체크하는 조건문이다.

여기서 return;의 역활에 집중해보자.
아이디를 입력하지않았다면 비밀번호를 체크할 필요도 없다.
따라서 첫번째 if문에서 아이디가 없을시 return;를 주어 뒤의 비밀번호를 아예 체크하지않고 function이 종료된다.

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

function check(){
	if(inputId.length > 0){
		alert("사용자 ID : " + inputId + "\n" + userInfo.memo.value);
	}else{ // 아이디 입력값이 없을때
		alert("사용자ID를 입력하세요");
		document.userInfo.id.focus();
		return;	
	} 

	if(inputPw == ""){ //비밀번호 입력값이 없을 때
		alert("비밀번호를 입력하세요")
		document.userInfo.pw.focus();
	}
}

check();

2. 라디오 Radio 태그

라디오버튼은 동일한 name을 써야 한 그룹으로 묶인다.
value를 꼭 작성해주어여한다.

checked=”checked” 또는 checked라고 속성을 주면 해당 속성에 틱 된 상태로 출력된다.
만약 여러 태그를 다 checked한 경우, 제일 마지막 태그의 속성이 틱 된 상태로 출력된다.

아래 코드는 성별체크하는 라디오버튼이다.

1
2
3
4
5
6
7
8

<fieldset> //테두리생성되는 태그
	<form action="#" name="fr" method="get">
	<label> 성별 체크 : </label>
		<input type="radio" name="gender" value="여"> 여성
		<input type="radio" name="gender" value="남"> 남성
	<input type="button" value="성별체크유무" onclick="checkRa();">
	</form>
</fieldset>

여기서 성별을 틱하지않고 성별체크유무 버튼을 클릭하게되면
성별을 선택하라는 알림 팝업이 뜨고 난 뒤 focus()를 주는 checkRa() 함수를 만들어보자.

1
2
3
4
5
6
7
8
9

function checkRa(){ 
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
		womyn.focus();
	}
}

알림창은 잘 뜨지만 focus()는 티가 나지않는다
이럴때 enter를 눌러보면 여성라디오버튼에 굵은 검정테두리를 통해 focus가 됨을 알 수 있다.

enter를 안누르고 티나게 하는 방법은 없을까?
기존에는 보였으나 브라우저가 업데이트되면서 그런것같다는게 강사님의 의견.
w3school에서도 동일한 현상이 나타나는 것을 보니 방법이 없나보다..

3. 체크박스 checkbox 태그

라디오버튼과 다른 점은 중복체크가 가능하다는 점이다.
또한 체그해지도 가능하다

내 코드

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
28
29
30
31
32
33
34
35

function checkRa(){ //라디오버튼체크유무
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
//			womyn.focus(); //동일코드
//			document.forms["fr"].elements["gender"][0].focus(); //동일코드
		document.getElementsByName('gender')[0].focus();
	}else{
		checkRa = true;
	}
}

function checkCh(){ //체크박스체크유무
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
	}else{
		checkCh = true;
	}
}


function checkboth(){ //라디오버튼과 체크박스 둘다 체크했는지 확인
	console.log(checkRa == true)
	console.log(checkCh == true)
	if(checkRa == true && checkCh == true){
		return true;
	}else{
		return false;
	}
}

강사님 코드 => 다음시간에 다시

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
28
29
30
31
32
33
34
35
36

function checkRa(){
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
			womyn.focus();
	}else{
		checkRa = true;
	}
}

	function checkCh(){ //내코드
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
	}else{
		checkCh = true;
	}
}


function checkCh(){ //강사님코드
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
		return;
	}

	checkRa();
	document.fr.submit();
}

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

1. a태그 버튼처럼 만들기

a태그를 css를 이용하여 버튼처럼 보이게 만들 수 있다.
또 가상클래스 hover를 이용하여 마우스를 올렸을때 색상변화를 주어 선택된 것처럼 보이게 만들어 더욱 버튼같은 느낌을 연출할수있다.

참고로 cta란 Call To Action의 약자로서 클릭유도라는 의미를 가진다.
hero-section자체가 클릭유도를 하는 곳이기때문에 실무에서도 cta로 사용한다고 한다.

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

.cta{
    color: white;
    width: 300px;
    font-weight: 400;
    margin: 0 auto 60px;
    display: block;
    padding: 20px 50px;
    border-radius: 8px;
    background: #44b78b;
}

.cta:hover{
    background: #51be95;
}

아래 이미지는 위의 태그를 적용하여 a태그를 버튼처럼 보이게 만든 것이다.

2. 수평선만들기

border를 이용해서 원하는 곳에 수평선이든 수직선이든 다 그릴 수 있다.

1
2
3
4
5

.hero-section{
    padding: 50px 0;
    text-align: center;
    border-bottom: 1px solid #000000;
}

아래 이미지는 위의 태그를 적용하여 수평선을 만든 모습이다

3. 메인콘텐츠마크업

Django사이트의 메인콘텐츠를 어떻게 구성되어있는 지 확인하고 큰 스케치를 그려보자.

Stay in loop의 경우 중요한 부분이므로 h2로 작업하고 바로 밑의 설명은 여백이 있는 p태그로 진행하면 된다.

Using Django 와 Contributing to Django는 메일링 서비스이므로 중요한 영역이고 동일하게 float처리를 한 것으로 보인다.
따라서 h3로 작성하고 이름에는 a태그를 주어 관련된 링크로 이동시킬 수 있도록해야한다.

제출하는 곳은 form태그를 사용한다.

form태그 밑에는 설명영역을 한번 더 추가하면 끝! 설명영역은 구분될 수 있도록 여백이 있는 p태그를 이용하면 된다

4. 다양한 form태그 종류와 사용법

form이란 사용자의 서버에 전송하는 방법이다. 보통 어디에 활용할까?

• 로그인 : 아이디/비밀번호를 입력시
• 회원가입 : 개인정보를 입력시
• 블로그나 게시판 : 글작성이나 파일전송시

그렇다면 form태그는 어떻게 생겼을까?

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

<form action="/url입력" method="post">
	<div>
		<label for="next">텍스트 필드</label>
		<input type="text" id="text"/>
	</div>
	<div>
		<label for="checkbox">체크박스</label>
		<input type="checkbox" id="checkbox"/>
	</div>
	<div>
		<label for="radio">라디오버튼</label>
		<input type="radio" id="radio"/>
	</div>
	<div>
		<label for="search">검색</label>
		<input type="search" id="search"/>
	</div>
	<div>
		<label for="textarea">텍스트 영역</label>
		<input name="textarea" id="textarea"/>
	</div>
	<button>전송버튼</button>
</form>

1. form의 action속성 : form태그로 입력받은 전체 내용을 어디에 보낼 것인지를 결정한다. 즉, 사용자가 입력한 데이터를 전송할 서버의 URL를 입력하면 된다.

2. form의 method속성 : form태그로 입력받은 전체 내용을 어떻게 처리한 것인지를 결정한다 즉, 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다. method는 기본적으로 get과 post방식을 지원한다.

   • get : action에 입력한 URL에 파라미터의 형태로 전송.
   • post : header의 body에 포함해서 전송.(보통 새로운 글등록할때 post방식사용)
   • delete : 정보를 삭제함.
   • put : 정보 전체를 수정 또는 정보 전체를 대체함.
   • patch : 정보 일부 부분 수정함.
   • 참고링크 : 제로초 HTTP 메서드

3. form태그 사이에는 텍스트 필드, 라디오 버튼, 체크 박스와 같은 컨트롤을 생성하는 태그들이 들어가줘야한다.

4. label태그는 input태그가 무엇인지 설명해주는 태그로 lable태그를 사용하게 된다면 항상 세트로 lable태그와 input태그를 사용해야한다. 그리고 lable태그의 for속성에는 꼭 input태그의 id값과 동일한 값이 설정되어야한다.

이를 실습페이지에 적용해보자.
input과 button태그를 아래 이미지와 같이 생성한다.

placholder속성을 이용하면 사용자에게 어떤 걸 적어야하는 지 알려줄수있고 사용자가 입력하는 순간 사라지는 가이드라인이라고 생각하면 된다.

그리고 나면 아래 이미지와 같이 적용된 것을 확인할 수 있다.