wecode TIL day 3 (Oct 21)

Jae Hoon Shin, 신재훈, Noah·2020년 10월 21일
TILWeCodehtmlcsspython
0

inline, inline-block, block 에 대해서

float를 이용해서 브라우저 너비를 채우고 알맞게 줄바꿈되는 박스 그리드를 만들었는데 이제 inline-block을 이용하면 만들기가 훨씬 더 쉽습니다. inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 마치 상자를 만들듯이 너비와 높이를 지정할 수 있습니다.


위 그림은 코드와 출력 예시입니다.

이 때 vertical-align을 쓰면 레이아웃을 보다 쉽게 잡을 수 있다.

3. float에 대해서

주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 property이지만 페이지 전체의 레이아웃을 잡을 때에도 중요합니다.
요즘엔 flex기반으로 레이아웃을 잡는 경우가 훨씬 많지만 현업에 나가면 최근작성된 코드만 보는게 아니라 예전 레거시 코드도 읽을 경우도 있기 때문에 기본적인 개념이라도 집고 넘어 갑시다.

float은 기본적으로 문자 단어 뜻 그대로 둥둥 떠있는거라고 생각하시면 됩니다.
박스와 float박스가 있으면 둘이 겹치게 되는데,
박스에 clear를 이용하면 박스가 겹치지 않고 아래로 내려가게됩니다.
두 번째 사진이 clear:left를 사용한 박스입니다.

HTML 순서는 mostly vertical 이지만 float을 쓰면 아래사진과 같은 레이아웃을 잡아줄 수 있다.

Responsive web (반응형 웹)

PC, 스마트폰, 태블릿 PC, 스마트TV 등 접속 할 수있는 디스플레이의 종류가 늘어남에 따라 화면의 크기가 자동으로 변하는 웹페이지를 구현해야하는 시대가 왔다. 서로 다른 디스플레이를 가지고 있는 디바이스들을 위해 꼭 필요한 Responsive Web!

Media query란 Web을 구현하는 CSS technique!!!

코드를 보고 해석하는 식으로 하겠습니다.
큰그림: 480px보다 작은 화면에서 body태그 내의 font 크기를 12px로 바꾸는 것

디테일:

1. @media — 이 키워드는 media 쿼리를 시작하겠다는 의미입니다.

2. only screen — 어떤 디바이스에서 적용하는지 알려줍니다.

예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다.

3. and (max-width : 480px) — 이건 media feature라고 불리는 부분입니다. 어느 조건에 아래의 css를 적용할지 작성해줘야 합니다.


해석: only screen에서 320~480px에서만 뭔가를 하겠다.

Semantic Web

웹 기술이 발달하고 웹이 담는 데이터의 양 또한 커지면서 생기는 문제는 정복 검색시 무수히 많은 불필요한 데이터가 노출됩니다.

컴퓨터와 사람이 어느 데이터가 중요하고 필요한 데이터인지 모두 잘 이해하고 인지 할 수 있는 웹을 목표로 하는게 Semantic Web입니다.

Semantic tag

semantic tag는 사람과 컴퓨터 모두 의미를 인지할 수 있는 태그 입니다.

NOT semantic = ex) div, span

div & span 은 아무런 의미를 두지 않는 칸나누기 태그에 불과합니다.

semantic tag = ex) section, header, nav, footer 등이 있습니다. 예를들어 header태그 안에 있으면 "아 이 태그는 이 웹페이지의 문을 여는 혹은 포커스 토픽이구나" 라고 사람이 & 컴퓨터 모두 인지할 수 있습니다.

또 다른 예로 div코드 안에 image가 있는 것과, 그냥 img태그로 image를 표현하는 것은 semantic 과 not semantic으로 나뉩니다.

div 코드안에 코드가 많다면 코드를 다 읽다가 img 태그를 발견해야 "아 이 div가 표현하는 것이 img구나" 를 알 수 있지만

img태그는 보자마자 컴퓨터와 사람이 image파일인 것을 알 수 있습니다.

또한 alt attribute로 부가 설명도 더할 수 있습니다.

Semantic 효과

검색엔진에 보다 양질의 정보를 전달할 수 있습니다.

보다 효과적인 crawling 과 indexing이 가능해졌습니다.

PYTHON!

화면에 출력하고자 할때는 print 명령어 이면서 함수이름 (function)
그럼 역사적인 Hello World!를 출력해봅시다.

두개의 따옴표("") 사이에 오는 글자열은 string 이라고 합니다.

* 따옴표는 출력되지 않음!!

Data Types

우리한테 2는 그냥 2지만, 컴퓨터는 숫자 2 인지, 텍스트 2인지, 소수점 숫자 2.0인지 모릅니다.
그래서 컴퓨터에게 정확히 어떤 2 인지 data type의 값을 지정해줘야합니다.

Integer
Float
Complex Numbers
String
Boolean

Integer

정수 값.

예를들어, 1, 2, 100 등이 integer 타입 입니다.

Float

소수점 숫자.

2.0, 3.7, 9.99 등이 float 타입 입니다.

Complex Numbers

실수와 허수를 포함하고 있는 복소수.

허수를 표현할때 수학책에서는

대부분 i 를 썼겠지만 파이썬에서는 j를 사용합니다.

예를 들어, 1+3j 가 complex number 입니다.

String

일반적인 문자열 값.(쌍 따옴표 사이에 있음)

"안녕하세요", "Hello World!", "100" 등이 string 입니다.

Boolean

조건문(condition) 에 주로 사용되는 값으로 True 나 False 이 2가지 값만 가지고 있습니다.

예를 들어,

1 == 1 은 True 값이며,

2 == 3 은 False 입니다.

3 == "3" 도 당연히 False 입니다. Data type이 틀리기 때문입니다.

Variables (변수)

이름 == 신재훈
성별 == 남자
("=="의 뜻은 equality, 양쪽의 값이 동일하다는 뜻입니다.)
그리고 이름과 성별은 변수가 됩니다.

name = "신재훈"
gender = "남자"

파이썬에서 변수는 = 기호 왼쪽에 위치하고 실제 값은 = 기호 오른쪽에 옵니다.
= 기호는 "assignment" 즉 값지정을 뜻합니다.

name = "노아신재훈"
print(name)
출력 => 노아신재훈

string

문자열 값, 일반적인 text(텍스트)값

변수 이름의 법칙

영어 알파벳, 숫자, underscore( _ ) ONLY!!!!

첫글자는 영어 알파벳이나 underscore로 시작해야 합니다.

숫자로는 시작될 수 없습니다.

string이 아닐수도 있지만 variable로 가능한 이름 모음


(복잡해 보이지만 위 변수들이 다 2500(숫자)를 가르킨다는 것!!



숫자로 변수이름 시작하면 에러가 뜬다!

아래 사진은 f-string을 이용해서 변수를 스트링 안에 넣는 기법이다
Literal String Interpolation 포맷 중 하나이다. 몇 가지가 있지만 f-string 이 간편하다.

Variables For Numbers

위에 살짝 나왔지만 변수값에 숫자값도 저장할 수 있다.

string처럼 "" 따옴표를 붙히면 안된다.

숫자값 살짝 응용

age는 23 이고 더하기 1 이니까 next_year는 24가 나온다.

숫자값은 부동 소수점 (floating)도 가능합니다.

my_age = 28.9

그리고 음수(negative number)도 가능합니다.

i_wish_my_age_is = -8

Math Expressions

1. Add

def add ():

int_sum = 3 + 12;
   return int_sum;
   
   print(add())

출력값은 15
int_sum 이 15이고
add()의 return값이 int_sum이니까
add()를 print하면 15

기본 수학연산 표현

더하기 빼기 곱하기 나누기

정수 나누기

나누기 값이 정수로 떨어지지 않는 경우 반내림으로 해서 정수의 값만 리턴
7/2 = 3.5 , but 7 // 2 = 3
꼭 정수가 필요한 상황에서 사용

사칙연산 연습

num1 = int(input())
num2 = int(input())

num3 = num1 + num2
num4 = num1 - num2
num5 = num1 / num2
num6 = num1 * num2

print(f"더하기:{num3}")
print(f"빼기:{num4}")
print(f"나누기:{num5}")
print(f"곱하기:{num6}")

입력 1 엔터
입력 5 엔터
아래처럼 출력됩니다.

더하기:6
빼기:-4
나누기:0.2
곱하기:5

2. Divide

def divide():
  result = 66 // 11
  return result

print(divide()) 하면 6 나옵니다.

3. Increment a Number

def increment():
  my_int = 83;
  my_int +=1;
  return my_int;

my_int 는 83인데
+=1 때문에 my_int가 84가 됬습니다.
print(increment()) 하면 84 라고 나온다.

4. Decrement a Number

위 Increment a number와 같은 개념이므로 사진으로 대체합니다.
return값이 Pass입니다.

5.Finding Remainder

modulo operator

%은 나누고 나머지를 구하는 것

def find_remainder():
 
  remainder = 0
  
  remainder += 1
  
  2 % remainder

find_remainder 함수의 리턴 값은 1

Advanced Math Expressions

num1 = 10
num1 = num1 + 1
이러면 num1 의 값은 11 이 된다 하지만 num1 을 두번 써야하는 번거러움이 있다.
빼기도 += 와 동일하게 ~

곱하기 나누기도 동일하게 ~

**는 멱법(Exponentiation)
10의2승 사진

Order of Operators

컴퓨터가 연산할 때도 우리가 수학 연산할 때처럼 순서가 있는 법인데,

1. ( )

2. **

3. *, / , %

4. + 와 -

연산의 순서는 혼동되기 쉬어 버그가 날 수 있는 요인이 될 수 있으므로 괄호를 적절히 사용해서 명확히 해주는 것이 코드의 가독성을 높일 수 있습니다.

Concatenating Text Strings

문자열을 더한다는 개념인데 쉬운 개념으로는 출력하면 Hello World 가 나온다. input값으로 "재훈"을 넣었다면, Hello, 재훈 으로 나온다.

복잡한 string concatenation

"+" 로 연결하는 방법 말고도 길고 복잡한 문자열에 더 특화되고 효과적인 방법이 있다.
literal string interpolation 위에 리뷰했던 방법이다.

Significant Whitespace

들여쓰기 Indention

파이썬에서는 필수이며 종속된 코드를 나타냅니다.

엄청 중요하며 보통 space 4칸을 띠고 쓴다.
함수, if, for, 클래스 등 파이썬의 모든 것에 적용

IF Statement
if 구문의 자세한 구조는 아래 사진과 같다.

이렇게 사용할 수도 있다.

여기서 indents 중요합니다. if문을 열때 제일 왼쪽, 그 다음 연결코드들은 if문 안쪽으로 들어와야합니다. 위 사진의 세 번째 프린트는 if문 안쪽에 있는게 아니므로 항상 실행된다.

Assignment!

문제: Input 값이 홀수 이면 "홀수" 라고 출력 하고 짝수 이면 "짝수" 라고 출력하는 코드를 구현해주세요.
Input 값은 자동으로 입력됩니다.

number = int(input())

if number % 2 == 1:
  print("홀수")
if number % 2 == 0:
  print("짝수")

input된 정수를 2로 나눠서 나머지가 1이라면 홀수
input된 정수를 2로 나눠서 나머지가 0이라면 짝수

profile
Jae Hoon Shin, 신재훈, Noah
🇰🇷🇺🇸 #Back-End Engineer
이전 포스트

TIL Semantic Web & Semantic Tag (Oct 21)

다음 포스트

TIL Function Parameters (Oct 22)

0개의 댓글