반응형

1. 개요 

- 추상화 (Abstraction) : 복잡한 세부사항을 숨기고, 주요한 기능에만 집중할 수 있게 해주는 개념

=> 변수 (Variable) : 값을 저장

1
2
3
first_name = "지수"
last_namte = "오"
full_name = last_name + first_name
cs

=> 함수(Function) : 명령들을 저장

1
print(1)
cs

=> 객체(Class)


2. 변수 ( 왜 변수는 추상화의 한 종류일까? -> 한 번 변수를 정의하고 나서 이후에 그것을 사용할 시, 변수 이름만 알면 되고 , 그 값 알 필요 없음


(1) 지정 연산자 (Assignment Operator) : 오른쪽에 있는 값을 왼쪽에 있는 변수에 지정해주는 역할

1
2
3
4
5
= 2 + 1
print(x) //3
 
= x + 1
print(x) //4
cs


=> 문자열 포맷팅, 변수 사용하여 아래와 같이 출력

1
2
3
4
5
6
7
8
# Hi, my name is jisu. I'm from Korea.
# My phone number is 010-1234-5678.
 
name = "jisu"
nationallity = " korea"
phone_number = "010-1234-5678"
 
print("Hi, my name is %s . i'm form %s. \n my phone_number is %s" %(name, nationallity ,phone_number ))
cs



3. 함수 기초


 -> 기본 구조

1
2
3
4
5
def 함수이름(파라미터): #header
 
    실행할 문장 1 #body
    실행할 문장 2
    실행할 문장 3
cs

 


파라미터가 없을 때는 함수이름()의 형식으로 함수를 불러올 수 있다.  

반면, 파라미터가 있을 때는 함수이름(파라미터1, 파라미터2, ...)의 형식으로 함수를 불러올 수 있다.


(1) 내장 함Built-in Function) : print / int /str


(2) 문자열 출력 함수 

1
2
3
4
5
6
7
8
#정의 
#header 
def hello():
    #body : 들여쓰기 하고 써야함 
    print("Hello world")
    print("welcome")
 
hello() #hello 라는 함수 돌리기
cs


(3) 파라미터 ( 들여쓰기 정도가 같은 명령들의 집합 : block -> 잘못되면 오류 발생)

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
def hello(name):
    print("Hello, %s!" % (name))
    print("Welcome to Codeit!")
  
hello("유재석")
hello("김태희")
 
def print_sum(a, b): #6
    print(a + b)
 
def print_product(a, b): #12
    print(a * b)
  
def print_residue(a, b): #1
    print(a % b)
  
def print_average(x, y, z): #10.0
    print((x + y + z) / 3)
 
print_sum(42)
print_product(34)
print_residue(133)
print_average(51015)
 
# 프로필을 출력하는 함수
def print_profile(name, age):
    print(name)
    print(age)
 
my_name = "김연우"
my_age = 45                   
print_profile(my_name, my_age)     
cs


4. syntatic sugar

-> 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 해주는 문법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 다음 두 줄은 같습니다
= x + 1
+= 1
 
# 다음 두 줄은 같습니다
= x + 2
+= 2
 
# 다음 두 줄은 같습니다
= x * 2
*= 2
 
# 다음 두 줄은 같습니다
= x - 3
-= 3
 
# 다음 두 줄은 같습니다
= x / 2
/= 2
 
# 다음 두 줄은 같습니다
= x % 7
x %= 7
cs


5. Optional Parameter

-> 파라미터의 기본값을 설정해두면 함수 호출 할 때 파라미터에 해당되는 값을 넘겨주지 않을 경우, 파라미터가 기본값을 갖게 됨

1
2
3
4
5
6
7
8
9
10
11
12
13
def myself(name, age, nationality = "한국"): #optional parameter은 모두 마지막에 아니면 에러
    print("내 이름은 %s" % name)
    print("나이는 %d살" % age)
    print("국적은 %s" % nationality)
 
myself("오지수"1)            # 기본값이 설정된 파라미터를 바꾸지 않을 때
-> 내 이름은 오지수
   나이는 1살
   국적은 한국
myself("랄라"1"미국")     # 기본값이 설정된 파라미터를 바꾸었을 때
-> 내 이름은 랄라
   나이는 1살
   국적은 
cs


6. 파라미터 연습 문제

1
2
3
4
5
6
7
8
9
10
#파라미터 연습 
 
#문자열 first_name(이름)과 문자열 last_name(성)을 파라미터로 받는 함수 print_full_name 쓰세요
 
def print_full_name(first_name, last_name):
    print(last_name, first_name,)
 
>> print_full_name("윤수","이")
 
// 이 윤수
cs


7. 거스름돈 계산기

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
#거스롬돈 계산기 
# 33,000원짜리 물건을 사기 위해 100,000원을 냈다면
# 50,000원 1장, 10,000원 1장, 5,000원 1장, 1,000원 2장과 같이 '가장 적은 수'의 지폐를 거슬러 주는 방식입니다.
 
# payment(지불한 금액)와 cost(가격)라는 파라미터 두개를 필요로 하는 함수 calculate_change를 쓰세요. 
# 이 함수는 거스름돈을 위해 50,000원짜리와 10,000원짜리, 5,000원짜리, 1,000원짜리가 각각 몇 장 필요한지 
출력해주는 역할을 합니다.
 
def calculate_change(payment, cost):
    change = payment - cost
    fifty_thousand_count = int(change/50000)
    change = change % 50000
    ten_thousand_count = int(change/10000)
    change = change % 10000
    five_thousand_count = int(change/5000)
    change = change % 5000
    one_thousand_count = int(change/1000)
    print("50000원 지폐: %d장" % (fifty_thousand_count))
    print("10000원 지폐: %d장" % (ten_thousand_count))
    print("5000원 지폐: %d장" % (five_thousand_count))
    print("1000원 지폐: %d장" % (one_thousand_count))
 
>>calculate_change(500000378000)
50000원 지폐: 2장
10000원 지폐: 2장
5000원 지폐: 0장
1000원 지폐: 2장
cs


반응형

'Language Study > Python' 카테고리의 다른 글

6. 모듈  (0) 2019.07.15
5. 제어문  (0) 2019.05.22
4. 추상화 심화  (0) 2019.05.08
2. 자료형  (0) 2019.03.30
1. Python 시작하기  (0) 2019.03.28
반응형

<개요>

 

1. 자료형 (Data type)

 

     1) 숫자 : 정수 (integer : -3, -2, -1, 0 , 1, 2, 3 ...) / 소수(floating point: 3.14, -7.3, 2.0)

 

     2) 문자 : "Hello", "World", "2" / ex) "hello" + 'world' => "helloworld" / "2" + '5' => "25"(이오)

 

     3) Boolean : True / False

 

 

 

2. 숫자형 (Numbers)

연산자
+덧셈 (addition)
-뺄셈 (subtraction)
*곱셈 (multiplication)
/나눗셈 (division)
%나머지 (modulo)
**거듭제곱 (exponentiation)


 
#덧셈
print(4.0 + 7.0->11.0
 
#뺄셈
print(2-4-> -2
 
#곱셈
print(5*3->15
 
#나머지
print(7%3->1
 
#거듭제곱
print(2**3.0->8.0
 
#나눗셈
print(7/2->3.5
print(6/3-> 2.0
print(7.0/2-> 3.5
print(6.0/2.0-> 3.0
 
#사칙연산 순서
print(2+3*2->8
print(2*(2+3)) ->10
 
#정수형 간의 연산 값은 정수로 나옴
#소수형 간의 연산 값은 소수로 나옴
#정수 + 소수 라면 = 소수 값
#나눗셈 기본 값은 소수값
 
 
cs


3. 문자열

1) 문자열 만드는 방법 : 

'do you want to take cs101?'
"do you want to learn python?"
'코드잇'
"오지수"
 
cs


2) 문자열을 만드는 방법 다양한 이유 -> 문자열 내에  ' 또는 " 를 포함시키고 싶을 때에는, 서로 다른 인용부호 사용

' "" '

" ' ' "


#틀린 예
print('i'm exited to learn python!')
#맞는 예
print("i'm exited to learn python!")
cs


$ python hello.py
i'm exited to learn python!
cs


3) 덧셈을 이용해 문자열 합치기 : 문자열에서 + 은 왼쪽 문자열과 오른쪽 문자열을 이어 연결하라는 의미

print("hello" + "world")
 
language = "파이썬"
print("우리가 배울 것은 " + language + "!")
 
print("3" + "5")
cs


$ python hello.py
helloworld
우리가 배울 것은 파이썬!
35
cs

4) 곱셈을 이용해 문자열 반복하기 : 문자열에서 *은 왼쪽문자열을 오른쪽의 수만큼 반복하라라는 의미

fly = "날아라"
print("떴다 떳다 비행기!")
 
print(fly * 2)
cs

$ python hello.py
떴다 떳다 비행기!
날아라날아라
cs


4. 형변환(type conversion/ type casting) : 논리적으로 가능한 경우에만 가능 진짜 순수 문자열은 숫자로 바뀔 수 없자나용?

#숫자형 -> 숫자형
print(int(3.8)) #int => integer(정수) =>>>3출력
print(float(3)) #float => floating point(소수) =>>>3.0출력
 
#문자열 -> 숫자형
print(int("2"+ int("5")) #print(2 + 5) =>>>7출력
print(float("1.1"+ float("2.5")) #print(1.1 + 2.5) =>>>3.6출력
 
#숫자형 -> 문자열 
#str => String( 문자열로 변형 시켜줌)
print(str(2+ str(5)) #print("2" + "5") =>>>25출력
print("제 나이는 " + str(7+ "살입니다."# =>>>제 나이는 7 살 입니다. 
cs


5. 문자열 포맷팅

코드자료형
%d정수(Integer)
%f소수(Floating point)
%s문자열(String)
year = 2016
month = 1
day = 16
day_of_week = "월"
 
print("오늘은" + str(year) + "년" + str(month) + str(day) + "일" + day_of_week + "요일입니다")
 
print("오늘은 %d년 %d월 %d일 %s요일입니다." % (year, month, day, day_of_week))
#오늘은 2016년 1월 17일 월요일입니다.
 
print(1.0 /3)
 
print("1나누기 3은 %.4f" % (1.0 / 3)) #1 나누기 3은 0.3333
print("1나누기 3은 %f" %(1.0 / 3)) #1 나누기 3은 0.3333333333333333
print("1나누기 3은 %.2f" % (1.0 / 3)) #1 나누기 3은 0.33
cs


6. 불린(boolean)

-명제 : 참 또는 거짓이 확실한 문장

-조건 연산 부호

연산자
>초과 (greater than)
<미만 (less than)
>=이상 (greater than or equal to)
<=이하 (less than or equal to)
==같다 (equal to)
!=같지 않다 (not equal to
  1. 식이 and => 왼쪽과 오른쪽 모두 True여야만 참이고, 나머지 경우에는 모두 False입니다.
  2. 식이 or => 왼쪽과 오른쪽 모두 False여야만 거짓이고, 나머지 경우에는 모두 True입니다.
  3. not True => False /  not False => True입니다.
  4. 괄호가 포함된 연산은, 괄호 안부터 값을 계산하고 그 후 괄호 밖과 연산
= 3
print(x > 4 or (x < 2 or x != 3)) #=> false
 
print((4 < 3 and 12 > 10or 7 == 7# => true
print(not 4 < 3# => true
print(not not True) # => true
cs


7. type함수 : 어떤 값이 무슨 자료형인지 기억나지 않을 때 -> type사용

#각 자료형 별 type 함수
print(type(1))
print(type(1.0))
print(type("1"))
print(type(2>4))
print()
 
#헷갈리는 두 자료형 비교
print(type("True"))
print(type(True))
print()
 
#print함수 type확인
print(type(print))
 
cs


$ python hello.py
<class 'int'>
<class 'float'>
<class 'str'>
<class 'bool'>
 
<class 'str'>
<class 'bool'>
 
<class 'builtin_function_or_method'>
cs


8. Floor Division

// : 나눗셈 연산 후 결과값을 내림 => 즉 소수 부분 버리고, 정수 부분만 남겨 둠 

print(7 / 4#1.75
print(int(7 / 4)) # 1
print(7 // 4# 1
 
#소수형 있을 경우 결과값이 소수형으로 나옴
print(5.0 // 2#2.0
print(5 // 2.0#2.0
print(5.0 // 2.0#2.0
cs


9. 반올림

round : 소수형 반올림

print(round(1.4211))      # 1.421을 소수점 1째 자리로 반올림 ->1.4
print(round(2.78622))     # 2.7562를 소수점 2째 자리로 반올림 -> 2.79
print(round(3.1415924))   # 3.141592를 소수점 4째 자리로 반올림 -> 3.1415
print(round(4.34))          # 4.34를 소수점 0번째 자리로 반올림 -> 4
cs


10. 줄바꿈 기호 (newline Character)

print("안녕하세요\n오지수입니다"
#안녕하세요
#오지수입니다
cs


반응형

'Language Study > Python' 카테고리의 다른 글

6. 모듈  (0) 2019.07.15
5. 제어문  (0) 2019.05.22
4. 추상화 심화  (0) 2019.05.08
3. 추상화  (0) 2019.04.06
1. Python 시작하기  (0) 2019.03.28
반응형

# python은 간결해서 컴퓨터 과학의 기초와 문제 해결에 집중할 수 있다.

 

#웹 사이트들 언어 수요

출저 : 위키피디아 / 웹사이트 언어 사용 

 

 

#분야별 자주 사용하는 언어

  • 데이터 과학, 공학 => Python, R, MATLAB
  • 웹 프런트엔드 => HTML/CSS + JavaScript
  • 웹 백엔드 (서버) => Python, Ruby, JavaScript, Java, Go, C, C++, PHP 등
  • 아이폰 어플 => Objective-C, Swift (거의 Swift로)
  • 안드로이드 어플 => Java, Kotlin (Kotlin으로)
  • 게임 개발 => C#, C++
  • 임베디드 시스템 => C, C++

1. python 설치

 

Download Python

The official home of the Python Programming Language

www.python.org

 -> Python 3 설치 -> python-3.7.2.exe 다운로드 -> Add Python 3.7 to PATH 체크박스 체크

 -> 계속 동의 

 

2. PyCharm 설치하기 

 

Download PyCharm: Python IDE for Professional Developers by JetBrains

Intelligent Python IDE with refactorings, debugger, code completion, on-the-fly code analysis and coding productivity orientation

www.jetbrains.com

->PyCharm 다운로드 -> Community용 다운로드 -> pycharm-community-2019.1.exe

3. pycharm 사용하기

  • create new project

폴더 및 파일 생성
파일 생성 시 .py -> Run 'hello_world' -> console창에서 실행결과 나옴 

 

반응형

'Language Study > Python' 카테고리의 다른 글

6. 모듈  (0) 2019.07.15
5. 제어문  (0) 2019.05.22
4. 추상화 심화  (0) 2019.05.08
3. 추상화  (0) 2019.04.06
2. 자료형  (0) 2019.03.30
반응형

1. 부트스트랩이란?

-> 오픈소스 html, css, javascript 프레임 워크 /프론트 엔드 프레임 워크(이미 만들어진)


<html>

1
2
3
4
5
6
7
8
9
10
11
12
<head>
<-- 가져왔던 css 앞에 붙임>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<-- 끝부분에 붙여줌 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
 
cs


-> 이 방법 말고도 많은 방법들이 있다. 


-> component에서 내가 쓰고 싶은 요소 가져와서 <body>태그에 넣으면 만들어 줌.


-> bootstrapk.com (한국어 버전으로 해석해 놓음)


2. 기본 구성원(컨테이너(container) / 행(row) / 열(column) )


-기본 규칙 : 행(<div class="row">)은 꼭 컨테이너(<div class="container")>안에 넣어주기

열(<div class="col">)은 꼭 행(<div class="row")>안에 넣어줌 / 오직 열만 행의 직속 자식이 될 수 있음

콘텐츠(우리가 그리드에 넣고 싶은 내용) 은 꼭 열(<div class="col">)안에 넣어줌


-기본 사용법 : 부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다고 생각/

 한 줄을 정확히 3등분 하고 싶으면 4칸을 차지하는 열 3개를 사용 => <div class="col-4">


ex) 다양한 방식으로 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
27
28
29
30
31
32
33
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
 
<body>
  <div class="container">
    <div class="row">
      <!-- 정확히 3등분 -->
      <div class="col-4 first">first</div>
      <div class="col-4 second">second</div>
      <div class="col-4 third">third</div>
    </div>
 
    <div class="row">
      <!-- 정확히 2등분 -->
      <div class="col-6 first">first</div>
      <div class="col-6 second">second</div>
    </div>
 
    <div class="row">
      <!-- 1대 5 비율 -->
      <div class="col-2 first">first</div>
      <div class="col-10 second">second</div>
    </div>
 
    <div class="row">
      <!-- 1대 2대 1 비율 -->
      <div class="col-3 first">first</div>
      <div class="col-6 second">second</div>
      <div class="col-3 third">third</div>
    </div>
  </div>
</body>
cs


<결과>

=> 12칸을 넘어가면 새로운 줄로 넘어감

=> 왜 하필 12?

: 12는 상당히 많은 숫자들(1234612)로 나누어지기 때문에 굉장히 유연


-중첩(nesting) : 열을 또 여러 열로 나누는 것

=> <div class="col-6"> 안에 <div class="row">을 써야함

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
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
 
<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        <div class="row"<!-- 중첩을 위한 새로운 행 -->
          <div class="col-3 first">1</div>
          <div class="col-3 second">2</div>
          <div class="col-3 third">3</div>
          <div class="col-3 fourth">4</div>
        </div>
      </div>
 
      <div class="col-6">
        <div class="row"<!-- 중첩을 위한 새로운 행 -->
          <div class="col-3 first">5</div>
          <div class="col-3 second">6</div>
          <div class="col-3 third">7</div>
          <div class="col-3 fourth">8</div>
        </div>
      </div>
    </div>
  </div>
</body>
 
cs


<결과>


3. 그리드 시스템 => 반응현 웹 디자인 할 때 빛을 발함


- 정해둔 구간

  1. Extra Small (< 576px): 모바일
  2. Small (≥ 576px): 모바일
  3. Medium (≥ 768px): 타블릿
  4. Large (≥ 992px): 데스크탑
  5. Extra Large (≥ 1200px): 와이드 데스크탑


-컨테이너(container)

<div class="container"> : 구간별로 그리드에 고정된 width를 설정

=> 고정된 가로값 설정해주고 싶다면 사용


<container 클래스 사용시 css>

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
.container {
  width: 100%; /* extra small */
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/* small */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
/* medium */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
/* large */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
/* extra large */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
cs

<div class-"container-fluid"> ; 그리드는 항상 width: 100%

1
2
3
4
5
6
7
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
cs


-열(column) : 반응형 구간별(12칸) 열을 차지하는 칸의 개수도 다르게 할 수 있다


=ex) 구간별로 모두 설정되어 있는 경우 

1
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
cs

        1. Extra Small (< 576px): 12칸을 모두 차지
        2. Small (≥ 576px): 6칸 차지
        3. Medium (≥ 768px): 4칸 차지
        4. Large (≥ 992px): 3칸 차지
        5. Extra Large (≥ 1200px): 2칸 차지



=ex2) 특정 구간만 설정( 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지)

1
<div class="col-12 col-lg-3">
cs

        1. Extra Small (< 576px): 12칸을 모두 차지
        2. Small (≥ 576px): 12칸을 모두 차지
        3. Medium (≥ 768px): 12칸을 모두 차지
        4. Large (≥ 992px): 3칸 차지
        5. Extra Large (≥ 1200px): 3칸 차지


=ex3)

1
<div class="col-6">
cs

        1. Extra Small (< 576px): 6칸 차지
        2. Small (≥ 576px): 6칸 차지
        3. Medium (≥ 768px): 6칸 차지
        4. Large (≥ 992px): 6칸 차지
        5. Extra Large (≥ 1200px): 6칸 차지


반응형

'Web > HTML & CSS' 카테고리의 다른 글

11. 반응형 웹  (0) 2019.03.23
10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
반응형

1. 반응형 웹이란?

-> 브라우저의 사이즈에 따라 레이아웃이 바뀌는 웹 / 따로 모바일, 타블릿 버전 만들 필요가 없음


2. 반응형 웹 만드는 법 

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
h1{
    font-size: 24px;
}
p{
    font-size: 16px;
}
@media (min-width: 768px){ //최소 너비 768이 넘어가면 폰트크기가 커지게 된다.
    h1{
        font-size: 36px;
    }
    p{
        font-size: 24px;
    }
@media(min-width: 992px;){
    h1{
        font-size: 48px;
    }
    
    p{
        font-size: 32px;
    }
cs


반응형

'Web > HTML & CSS' 카테고리의 다른 글

12. 부트스트랩  (0) 2019.03.23
10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
반응형

1. list 종류

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<ol type="a(소문자),A(대문자),i(로마 소문자),I(로마 대문자),1(숫자=default)">
    <li></li>
    <li></li>
</ol>
 
<ul>
    <li></li>
    <li></li>
</ul>
</body>
 
 
//ol: ordered list
//li: list
//ul: unordered list
cs

 

2. list 스타일링

//li 태그 검사 -> display : list-item인 걸 확인해 볼 수 있음 ->block으로 바꿀 시 없앨 수 있음

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul{
    padding left: 0;
    width: 200px;
    
}
li{
    list-style-type: square; //square모양
     list-sytle: none;
    margin-bottom: 10px;
    background-color: #77abff;
    color: white;
    padding: 10px 20px;
}
    
cs

 

<결과>

반응형

'Web > HTML & CSS' 카테고리의 다른 글

12. 부트스트랩  (0) 2019.03.23
11. 반응형 웹  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
반응형

1. 합병정렬(n개 수 랜덤 정렬)13,11,7,4,5,9,15,10

 

 

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
37
38
39
40
41
42
43
44
45
46
47
48
49
#include <stdio.h>
void mergeSort(int data[], int p, int r);
void merge(int data[], int p, int q, int r);
int main() {
     int data[8= {13,11,7,4,5,9,15,10} , i;
     printf("정렬 전\n");    
     for(i = 0; i < 8; i++) {
         printf("%d ", data[i]);
     }
    printf("\n\n<<변화과정>>\n");
    mergeSort(data, 0, data[i] - 1);   
 
    printf("\n정렬 후\n");
     for(i = 0; i < 8; i++) {
         printf("%d ", data[i]);
     }
  return 0;
}
 
void merge(int data[], int p, int q, int r) {
    int i = p, j = q+1, k = p;
    int tmp[8]; // 새 배열
    while(i<=&& j<=r) {
        if(data[i] <= data[j]) tmp[k++= data[i++];
        else tmp[k++= data[j++];
    }
    while(i<=q) tmp[k++= data[i++];
    while(j<=r) tmp[k++= data[j++];
    for(int a = p; a<=r; a++) data[a] = tmp[a];
    printf("\n 합병  >>");
    for(int x=p;x<=r;x++){
      printf("%d ",tmp[x]);
               }
   
}
 
void mergeSort(int data[], int p, int r) {
    int q;
    printf("\n 분할 >>");
    for(int x=p;x<=r;x++){
         printf("%d ",data[x]);
      }
    if(p<r) {
        q = (p+r)/2;
        mergeSort(data, p , q);
        mergeSort(data, q+1, r);
        merge(data, p, q, r);
    }
}
cs
<결과>

 

 

 

 

=> 안정적인 정렬 가능하지만 / 레코드를 배열로 하면 임시공간이 필요하여 공간낭비가 생길 수 있다

 

===>>> 제자리  (in-place-sort) 해야함

 

2. 제자리 정렬 종류인 "선택 정렬" 사용 <java>

  • 매 루프마다 최소값 또는 최대값을 선택해서 정렬하는 알고리즘
  • 비교 기반 정렬 알고리즘
  • 안정적이지 않은 정렬(동일한 키 값이 있을 경우 순서가 바뀔 수 있음)
  • 최악, 최적, 평균 모두 O(n^2)의 수행시간을 보임
  • 제자리 정렬
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
37
38
39
40
41
42
class SelectionSort {
    constructor(_list) {
        const list = _list;
 
        const swap = (list, a, b) => {
            const temp = list[a];
            list[a] = list[b];
            list[b] = temp;
        };
 
        const selectionSort = list => {
            if (Array.isArray(list)) {
                if (list.length === 0) {
                    return [];
                }
 
                for (let i = 0; i < list.length; i++) {
                    let minIndex;
                    for (let j = i; j < list.length; j++) {
                        if (!minIndex || list[minIndex] > list[j]) {
                            minIndex = j;
                        }
                        console.log(j)
                    }
                    swap(list, i, minIndex);
                }
 
                return list;
            }
        };
        return selectionSort(list);
    }
}
 
//------------------------------------
 
const data = [141517238131122];
 
const sortedData = new SelectionSort(data);
 
console.log(sortedData); // [8, 11, 13, 14, 15 17, 22, 23]
 
cs
 
3. 도사 정리 
 

이 케이스를 나누는 방식은 a, b의 값을 바탕으로 계산한다.

 

<1번 경우>

 위와 같이 계산할 수 있다.

  예를 들어 T(n) = 4*T(n/2) + n 이라면, a = 4, b = 2 이고 log_b a = 2이다. 이때 f(n)의 최고 차항이 1이므로 이 함수의 시간 복잡도는 theta(n^2)가 된다.

 

<2번 경우>

  

 예를 들어 T(n) = 2*T(n/2) + n 이라면, a = 2, b= 2이고 c = 1이다. 따라서 시간 복잡도는 theta(n log n)이다.

 

<3번 경우>

 

예를 들어 T(n) = 2*T(n/3) + n 이라면, log_b a 는 log_3 2 이면서, c는 1이다. 따라서 c > log_b a를 만족한다. 또한 2*(n/3) <= k(n)의 경우 2/3 <= k < 1을 만족하므로 시간 복잡도는 theta(n)가 된다.

 

<풀 수 없는 경우>

사실 저 형태의 시간복잡도가 아닌 함수는 빠르게 해결 할 수 없다. 예를 들어 T(n) = T(n/2) + T(n/4) + n 인 경우

트리 형태로 그려가면서 풀면 공비가 3/4인 등비수열의 합으로 나타낼 수 있다.

또한 멱급수나, 미적분을 해야하는 경우 또한 존재한다

 

반응형
반응형

1. float

<기본 float 설정 X>



<blue -> float  :right; 설정>


##float 로 오른쪽으로 옮겨지고 밑에 3차원적으로 남아있던 자리에 div class로 채워짐


<multiple floats>

- blue:left/ yellow: right


-blue.yellow : left;(blue먼저 left-> yellow 왼쪽 움직이다가 blue에 막혀서 옆으로 붙어짐)



2. clear ( 방향 설정 시 , 그 방향에 아무것도 없게 만들어줌)

1
2
3
.col{
    clear: left;
}
cs


<그리드 border 넣기 위해>


반응형

'Web > HTML & CSS' 카테고리의 다른 글

11. 반응형 웹  (0) 2019.03.23
10. list  (0) 2019.03.23
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
6. CSS 활용  (0) 2019.03.12

+ Recent posts