TIL-Learning about HTML/CSS & Python

---

HTML

<div class="container">

   <nav>

   </nav>

</div>

<div class="flex-colum">

   <section>

   </section

   <section>

   </section>

</div>

 

---

CSS

.container

{

display: -webkit-flex; display: flex;

}

nav {

width: 200px;

}

.flex-column

{

-webkit-flex: 1; flex: 1;

}

 

It's coming out like this

Flexbox element is kind of brandnew. This element can be used easier than other layout element. But it is not eligible to apply old version browser. 

----HTML----

<div>

   <div class="initial">

   </div>

   <div class="none">

   </div>

   <div class="flex1">

   </div>

   <div class="flex2">

   </div>

</div>

----CSS----

.container

{ display: -webkit-flex;

display: flex; }

 

.initial

{ -webkit-flex: initial;

flex: initial;

width: 200px;

min-width: 100px; }

 

.none

{ -webkit-flex: none;

flex: none;

width: 200px; }

 

.flex1

{ -webkit-flex: 1;

flex: 1; }

 

.flex2

{ -webkit-flex: 2;

flex: 2; }

-----------

First box has flexible size. but no smaller than 100px. (min-width:100px) We can use max-width also.

 

Easier to make center box

.vertical-container

{

height: 300px;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

}

It is not meaning to way to short. We don't need to adjust margin or padding.

Just use flex element to get center aligned box.

 

CSS Media Query

 

CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied.

We can use the CSS media queries to assign different stylesheets depending on browser window size. 

 

 

@media only screen and (max-width: 480px) {

body {

font-size: 12px;

}

}

What this query really means, is “If [device width] is less than or equal to 480px, then do {font-size:12px}”

Combining mediaqueries can be done by combining them with an comma. 

 

 

1. @media —  This keyword is meaning to start the CSS media query.

2. only screen — set the condition.

3. and (max-width : 480px) — set the rules.

---------------------End the HTML/CSS /// Start to learn about Python--------------

 

 

I have been learning about python. I won't nervous against python.  

But i won't make that pass me easily cause i'd like to know strongly foundation of python.

Let's check what they teach.

Print

First of all, basic function "Print". This function take basically one argument. any kind of data can be on this argument.

Integer, string, float etc. whatever any data in double quotes mark can be printed.

 

Data Type

• Integer   ex) 1,2,3,4,5,100,200

• Float       ex) 1.2  , 0.002928

• Complex Numbers   ex)  2x+1

• String     ex)  "Hellow" ,  "$100.00",  "Papajone's"

• Boolean  ex) Ture , False

Rule for python variable

A variable can have a short name (like x and y) or a more descriptive name (age, carname, total_volume). Rules for Python variables:

• A variable name must start with a letter or the underscore character
• A variable name cannot start with a number
• A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )
• Variable names are case-sensitive (age, Age and AGE are three different variables)

Variable for string

1) %-formatting - old school formatting method.

How to Use %-formatting

String objects have a built-in operation using the % operator, which you can use to format strings. Here’s what that looks like in practice:

name = "Eric"

age = 74

"Hellow, %s. You are %s." % (name, age)

---------->Result : 'Hello, Eric. You are 74.'

 

Keep in mind that %-formatting is not recommended. 

 

2) str.format()

How to use str.format()

str.format()  is an improvement on %-formatting. It uses normal function call syntax and is extensible through the __format__() method on the object being converted to a string.

 

With str.format(), the replacement fields are marked by urly braces:

"Hello, {}. You are {}.".format(name,age)

---------->Result : 'Hello, Eric. You are 74.

{} can take index number though.

You can also use ** to do this neat trick with dictionaries:

person = {'name': 'Eric', 'age': 74}

"Hello, {name}. You are {age}.".format(**person)

---------->Result : 'Hello, Eric. You are 74.'

 

3) f-String

How to use f-Strings

f"Hello, {name}. You are {age}."

---------->Result : 'Hello, Eric. You are 74.'

This is improved and easy way to Format strings in Python.

Highly recommended.

 

 

<<<<<<>>>>>>>>><<>><><><><>><<<<<<>>>>>>>

 

Math Expression

+  : plus

-  : minus

*   : multiple

/ : divide

 

Advanced Math Expressions

**  : square (Exponentiation)

% : modulus

+=, -=,*=,/= :  a=a+1 == a+=1

// : Floor division

 

--------<<<<<<<>>>>>>----------

 

Indentation

Leading whitespace (spaces and tabs) at the beginning of a logical line is used to compute the indentation level of the line, which in turn is used to determine the grouping of statements.

 

If statment

 

if expression:

    codes to execute(When expression is true)

 

Comparison Operators

== : equal

!= : Not equal

> : Greater than

> : Less than

>= : Greater than or equal to

<= : Less than or equal to

 

Nested If Statements

and

or

If

elif

else

 

 

Assignment

다음의 방정식을 해결하는 프로그램을 구현 하세요. x값을 구해야 합니다.

 

ax = b

 

결과 출력물은 다음과 같아야 합니다.

 

1. Input 으로 주어진 a 와 b 값으로 위의 방정식을 충족하는 단 하나의 정수가 존재한다면 해당 정수를 출력하면 됩니다

2. 만일 a 와 b 값으로 위의 방정식을 충족하는 정수가 없다면 "No Solution"을 출력해주세요.

3. a 와 b 값으로 위의 방정식을 충족하는 정수가 많다면 "Many Solutions"을 출력해주세요.

 

Hint:

a 나 b 는 0이 될 수 있습니다.

 

Examples:

 

• 만일 a = 1, b = -2 라면 결과값으로 -2가 출력이 되어야 합니다.

• 만일 a = 2, b = -1 라면 결과값으로 "No Solution"이 출력이 되어야 합니다.

My Answer)

a = int(input())
b = int(input())

if a!=0:
  if (b/a)%2==0 or (b/a)%2==1:
    print(int(b/a))
  else:
    print("No Solution")
elif a==0:
  if b==0:
    print("Many Solutions")
  else:
    print("No Solution")
elif b==0:
  if a==0:
    print("Many Solution")
  else:
    print("No Solution")
else:
  print("No Solution")

  --------------------------------

Comment

Inline comment : #Blah Blah!!

Multiline Comments

"""Blah Blah"""

Caution: Too Much Comment Is Bad!

 

Function

Python  - Function Parameters

 

Assignment

이번 과제는 programming 과제가 아니라 개념을 설명하는 과제 입니다.

함수를 정의 할때 default value parameter를 non-default value parameter 앞에 정의 하면 안된다고 배웠습니다.

왜 안돼야만 하는지 생각해보시고 블로깅 하여 채널에 공유해 주세요.

 

---

My Answer

 

앞에 위치할 경우 입력을 안했을 때에 혼선이 생기기 때문인 것 같습니다. 기본 값이 없는 인자는 값을 안 받으면 안되고, 기본 값이 설정 되어 있는 인자는 입력을 안해도 되기 때문입니다.

When people doesn't input the defualt value parameter , It will be confused.

Non-default value parameter must take argument. however, default value parameter doesn't need to take argument.

add

Argument(인자)

- Positional Arguments

- Keyword-only arguments

 

Parameter(매개변수)

- Positional-or-keyword

- Positional-only

- keyword-only

- var-positional

- var-keyword

 

Argument는 이미 정의된 함수에 넣는 것이고.

Parameter는 함수를 정의할 때에 넣고 맞추는 것입니다.

 

만들어진 함수는 매개변수를 순서대로 받아들이는데 그 순서가 왼쪽에서 오른쪽입니다.

함수의 목적에 따라 매개변수의 기본 값을 정의 할 때가 있습니다. 기본 값이 지정된 매개변수는 인자를 받지 않았을 때에 기본 값으로 함수가 작동합니다. 하지만 매개변수가 많아 많은 인자를 받아야 하는 함수인 경우 왼쪽부터 순서대로 받아들이는데 그때에 그 공백을 인식 못하고 다음 매개변수의 인자로 받아들이게 됩니다. 

그렇게 되면 함수가 인자를 다 받지 못하여 작동을 하지 않게 됩니다.

 

그래서 파이썬에서 매개변수의 순서에 대해서 룰을 정해놨습니다.

 

1. Positional arguments(기본 위치 인자)

2. Default arguments(기본 값을 가진 인자)

3. Variable-length positional arguments[*args](가변-위치 인자)

4. keyword-only arguments(키워드-전용 인자)

5. Keyword-only arguments with defaults(기본값을 가진 키워드-전용 인자)

6. Variable-length keyword arguments[**kwargs](가변-키워드-위치 인자)

 

이렇게 해놨기 때문에 확실히 인식하고 헷갈리는 일이 없도록 해야합니다.

 

---

 

List

List looks like [Something,Something2].

Using Square brackets.

'Something','Something2' are element.

 

Adding And Changing Elements To List

1. Append  : 한개의 요소를 추가할 때에

2. +  :  한개 이상의 요소를 추가할 때

3. insert  :  원하는 위치에 넣을 수 있음.

 

Empty List

Can be made empty list

Updating Elements

List_name[index_num] = "Contents"

List Slicing

list_name[start : stop]

 

can add step like this

 

list_name[start : stop : step]

 

Slicing is not modifying. It is copying

 

Deleting Elements From List

del list_name[index_num]

or

list_name.remove('element_name')

 

Tuples

can't modify

ex) (1,2,3)

 

Set

No index

No sort

No duplicate

Can make by { SET }

 

set.remove(3)

set(list)

set.add(3)

 

오늘은 여기까지 내일온다.