URI(통합 자원 식별자) 에는 URL(Where개념) 와 URN(What개념) 라는 하위 개념이 있고, 이 둘은 자원을 식별하는 목적은 같으나 자원을 식별하는 방식에 차이점을 두고 있다. URI 는 무엇이며 URL 과 URN 은 어떤 방식으로 자원을 식별하는지 알아보자.

URI (Uniform Resource Identifier)

통합 자원 식별자, 쉽게 풀어 적어보면 자원(그림,html 페이지 등 서버에 저장된것)을 나타내는 아이디값(= 주소값, 고유식별자) 이다. 서로 다른 자료가 똑같은 이름을 가지고 있으면 안되니 URI는 고유해야한다.

URI의 구조는 아래와 같다.

scheme ://host[:port][/path][?query][#fragment]

프로토콜이름://IP주소:포트/폴더이름/파일이름 or 프로토콜이름://도메인주소(DNS개념이므로 우선 생략)

scheme 란? 자원에 접근할 방법을 정의해 둔 프로토콜 이름. telnet, ftp , http 와 mailto(ip정보가 필요없는 프로토콜) 등의 요청 형식

http 와 https 의 포트 0번 부터 1023포트는 예약된 포트(Well-known port)이며 80번의 경우 http 로 시작하는 웹사이트는 http로 통신하겠다는 의미 임으로 80번 기본포트에 연결되고 https 의 경우 443번 기본포트에 연결된다!

URL (Uniform Resource Locator 또는 web address)

파일식별자라고 얘기하며 웹 페이지를 찾기 위한 주소이며 파일의 위치를 나타내는 where의 개념이다. 내가 보고싶은 특정 파일(html, css, 그림 등)이 서버에 저장이 되어있는 경로를 나타내는 값이라고 생각하면 좋을듯 하다!

내 컴퓨터의 hello.txt를 보려면 내컴퓨터의 C드라이브에 document(폴더)에서hello.txt(파일) 을 보는것과 같이 파일을 보기위해 이동하는 경로, 위치로 예를 들 수 있다.

URL는 자원의 위치를 나타내기 때문에 만약 자원의 위치, URL이 변경된다면 변경 전의 URL로는 해당 자원에 접근할 수 없다.

(URI 와 URL 의 구조를 나타내는 이미지 참고)

URI 와 URL의 관계

URL 은 URI 이지만 URI는 URL이 아니다 URI 는 아래와 같이 자원을 찾을 수 있는 위치를 항상 표시하지는 않는다. URI는 사람과 장소, 개념 또는 웹 페이지 및 책과 같은 정보 자원과 같은 실제 개체를 포함하여 모든 것을 식별하는 데 사용될 수 있습니다. 일부 URI는 네트워크 (인터넷 또는 컴퓨터 파일 시스템 또는 인트라넷과 같은 다른 개인 네트워크)에서 정보 리소스를 찾고 검색하는 수단을 제공합니다. 이들은 URL ( Uniform Resource Locator )입니다. 참조

https://blog.naver.com/jiupark0616/221998617000 위는 블로그 글을 식별하는 URI 이지만 네이버 블로그 위치를 나타내는 URL은 https://blog.naver.com/jiupark0616/ 까지라고 볼 수 있다.

URN (Uniform Resource Name)

통합자원이름이라고도 하며 자원이 무엇(What)인지를 말하는 개념이다. 자원은 서로 중복되지 않는 유일한 값이여야 하며 특정 정보에 이름을 부여해서 찾기 때문에 도메인 과 파일 경로에 영향을 받지 않는다.

URN의 구조는 아래와 같다.

urn : isbn : 1234567891234 (국제표준도서번호)

URL 의 경우 정보의 위치가 바뀌면 이전의 위치에 접근 할 수 없지만 URN의 경우 정보의 위치가 바뀌더라도 동일하게 접근할 수 있다.

URL 와 URN

URN은 사람의 이름과 비교할 수 있고 URL은 주소와 비교할 수 있습니다. 즉, URN은 항목을 식별하고 URL은 항목을 찾는 방법을 제공합니다.

마치며

생활코딩으로 web1,2 강의를 들을 때는 쉽게 대략적으로 알 수 있었는데 자세히 알아보려고 하니 이렇게 어려울 수가 없다ㅠㅠ

그래도 웹에 관한 강의를 듣다보니 당장 학습하고 있는 언어가 전부로 볼 것이 아니라 더 큰 개념으로 개발을 바라보게 된 것 같다.

생활 코딩 강의에서 모르면 마법, 알면 기술 이라는 말이 계속 머릿속에 맴돌았는데 요 근래 파이썬을 공부하며 답답했던 차에 웹 강의를 듣고 공부하면서 그 말이 체감이 되어 무언가를 알고싶다는 욕구가 자극 된 것 같다.

위코드 개강까지 얼마 남지않았지만 끝까지 빠이팅합시다!

우선하여 알면 좋은 가변(mutable)객체

아마 2차원 리스트 전까지 순차적으로 공부하신 분들은 시퀀스 객체나 set, dict 등을 학습하며 pop 이나 remove , del , 요소추가 등의 메서드로 수정,삭제가 불가능한 객체들을 확인했을텐데

쉽게 생각하자면 여기서 수정,삭제가 가능한 객체들을 가변(mutable)객체라고 한다.

가변(mutable)객체란?

객체에 할당 된 값을 수정할 수 있는 특징을 가진 객체

가변객체의 타입은?

list , set , dict 가 있다.

불변(immutable)객체는?

가변객체와 반대되는 특성으로 수정, 삭제가 불가능한 객체를 불변 객체라고한다.

불변(immutable)객체란?

객체에 할당된 값을 수정 할 수 없는 특징을 가진 객체

불변객체의 타입은?

int,float,bool,str,tuple,frozenset 등이 존재한다.

copy

일반적으로 list 에 copy 메서드를 이용해 새로운 변수에 복사 하는 것과 다르게

a = [[1,1],[2,2]] # 2차원리스트

b = [1,2,[3,4,5]] # 내부리스트

가변객체 리스트의 2차원리스트와 내부리스트의 경우 리스트객체의 내부 리스트객체까지 복사가 되지 않는다. copy의 경우 리스트만 복사가 되고 그안의 내용은 동일한 객체를 참조하기 때문이다.

copy 메서드 사용에서 가변객체와 불변객체의 차이

불가변 객체의 경우 복사한 값으로 재할당을 할 경우 기존객체와 복사한 객체는 전혀다른 값이 된다.

가변객체는 내부리스트가 존재 할 때 내부리스트의 값은 복사가 아닌 참조가 일어나기 때문에 값을 할당 하게 되면 기존의 리스트에도 변경이 이루어진다.

deepcopy

mutable 한 내부객채들이 복사되지 않는 문제를 해결하기 위해서는 deepcopy를 해야한다.

deepcopy의 경우 복합 객체를 새롭게 생성하고 그 안의 내용까지 새롭게 생성하게 된다.

import copy #copy 모듈을 가져옴

a=[1,2,[3,4,5]]
b=copy.deepcopy(a) # copy.deepcopy 함수를 사용하여 깊은 복사

이렇게 깊게 복사 된 객체는 처음에 만들었던 객체와 복사된 객체가 완전히 달라지기 때문에 어느 한쪽을 수정한다고 해서 다른 한쪽이 영향받지 않는다.

file=open('hello.txt','w') 파일객체 = open(파일이름, 파일모드) -> 파일을 사용하기위해 open 함수로 파일을 열어 줌 file.write('hello,world!') 파일객체.write('문자열') -> 파일에 문자열을(파일에 들어갈 내용) 저장 r = file.read() 변수 = 파일객체.read() print(r) -> 파일에서 문자열 읽기 file.close() -> 파일 객체를 닫아줌 프로젝트 폴더에 hello.txt 파일이 만들어지고 내용이 들어가있음

파일모드 : 'w'(쓰기모드),'r'(읽기모드)

자동으로 파일 객체 닫기

with open(파일이름,파일모드) as 파일객체: 코드

with open('hello.txt','r') as file:#파일에 대한 객체를 자동으로 닫아줌
    r = file.read()
    print(r)

## 문자열 여러 줄을 파일에 쓰기

반복문을 사용하여 파일 작성

개행문자(\n)를 지정해주어야 줄바꿈이 되니 주의
>```python
with open('hello.txt','w') as file:
    for i in range(3):
        file.write('Hello,world! \n'.format(i))

리스트의 문자열을 파일에 쓰기

파일객체.writelines(문자열리스트)

lines = ['안녕하세요.\n', '파이썬\n', '코딩 도장입니다.\n']
 with open('hello.txt', 'w') as file:    # hello.txt 파일을 쓰기 모드(w)로 열기
    file.writelines(lines)

 ## 파일내용을 리스트로 가져오기 (읽기)

 변수 = 파일객체.readlines()

 >```python
 with open('hello.txt', 'r') as file:    # hello.txt 파일을 읽기 모드(r)로 열기
    lines = file.readlines()#파일의 내용을 한줄씩
    print(lines)
    #결과 ['안녕하세요.\n', '파이썬\n', '코딩 도장입니다.\n']

객체를 파일에 저장하는 pickle 모듈

객체를 파일에 저장하는 과정을 피클링(pickling)이라고 하고, 파일에서 객체를 읽어오는 과정을 언피클링(unpickling)이라고 한다.

피클링(pickling)

피클링 = 파이썬 객체를 파일에 저장 피클링은 pickle 모듈의 dump 메서드를 사용. 파일모드를 'wb'로 지정해야함

import pickle

name = 'ttakku'
age = 100
address = '서울시 OO구 OO동'
scores = {'korean':'90','english':'95','math':'70'}

with open('ttakku.p','wb') as file:#wb 설명 참고
    pickle.dump(name,file)
    pickle.dump(age,file)
    pickle.dump(address,file)
    pickle.dump(scores,file)

pickel.dump 로 객체(값)을 저장할 때는 파일 모드를 'wb'로 지정해야함 'wb'에서 b 는 binary를 뜻하는데, 바이너리 파일은 컴퓨터가 처리하는 파일 형식이라 텍스트 편집기로 열면 사람이 알아보기 어려움

(vscode에서 열어 본 ttakku.p)

파이썬 파일을 pickle.py 로 저장할 경우 에러 생김

Traceback (most recent call last): File "/Users/ttakku/python/pickle.py", line 1, in import pickle File "/Users/ttakku/python/pickle.py", line 9, in pickle.dump(name,file) AttributeError: partially initialized module 'pickle' has no attribute 'dump' (most likely due to a circular import)

언피클링(unpickling)

언피클링 = 파일에서 파이썬 객체를 읽어 옴 언피클링은 pickle 모듈의 load를 사용함. 언피클링시 반드시 파일 모드를 바이너리 읽기 보드 'rb'로 지정해야함 rb : 바이너리 읽기 모드

import pickle

with open('ttakku.p','rb') as file: #ttakku.p 파일을 바이너리 읽기 모드로 열기
    name = pickle.load(file)
    age = pickle.load(file)
    address = pickle.load(file)
    scores = pickle.load(file)
    print(name)
    print(age)
    print(address)
    print(scores)

#실행결과 
#ttakku
#100
#서울시 OO구 OO동
#{'korean': '90', 'english': '95', 'math': '70'}

ttakku.p 파일을 저장할 때 pickle.dump 를 각 name,age, address,scores 네 번 사용했기 때문에

마찬가지로 파일에서 객체(값)을 가져올 때도 pickle.load를 네번 사용해야함.(저장 순서대로 가져올 때도 같은 순서로 가져옴)

수학에서, 집합(集合, 영어: set)은 특정한 조건에 맞는 원소들의 모임이며, 명확한 기준에 의하여 주어진 서로 다른 대상들이 모여 이루는 새로운 대상이다. 어떤 대상이 집합에 속하는지 여부는 명확해야 하며, 집합 위에는 순서나 연산 따위의 구조가 주어지지 않는다. 집합은 수학에서 가장 기본적인 개념이다. 위키백과참고

세트의 기본 형태 : 세트는 {}(중괄호) 안에 값을 저장하며 각 값은,(콤마)로 구분해줌 ex) 세트 = {값1, 값2, 값3}

family = {'father','mother','sister','brother'}

주의 세트의 요소는 순서가 정해져 있지 않음(unordered) 그러므로 출력시 매번 요소의 순서가 다르게 나옴

세트에 들어가는 요소는 중복 될 수 없음 같은 요소가 2개 이상 중복 될 경우 같은 요소 중 1개만 남음

세트는 리스트, 튜플, 딕셔너리와는 다르게 대괄호 [] 로 특정 요소만 출력할 수는 없다. -> 세트에 특정 값이 있는지 확인은 가능 in : 있는걸 확인함 not in : 없는걸 확인함

set 만들기

set (반복 가능한객체, iterable이터레이트 참고)

문자열 사용

a = set('apple')
print(a)
#결과 {'l', 'p', 'e', 'a'} 

중복된 'p' 2개중 하나 삭제, 유일한 문자들만 남게함 (중복된 문자는 포함하지 않는다.)

range 사용

b = set(range(5))
print(b)
#결과 {0, 1, 2, 3, 4}

빈 세트

c = set()

set에 아무것도 지정하지 않으면 됨.

주의 set의 기본 형태 {}를 사용하여 빈 세트를 만들면 세트가 아닌 딕셔너리가 만들어짐 -> type(set) 로 형태 확인 가능

*list 와 다르게 set는 중첩할 수 없다 (set 안의 set 만들 수 없음.) *

set 를 중첩하고 싶다면? frozenset 사용가능 말그대로 얼어있는set 라 집합연산과 메서드에서 요소를 추가하거나 삭제하는 연산,메서드는 사용할수 없음

frozenset({frozenset({1, 2}), frozenset({3, 4})}) # 이런형태로 중첩가능

중첩은 frozenset 끼리만 가능하고 일반 set는 frozenset에 중첩할 수 없음.

집합 연산 사용

집합 연산은 파이썬의 산술 연산자와 논리 연산자를 활용함

합집합 ( union , | )

set.union() 메서드와 동작이 같음

a = {1,2,3,4}
b = {3,4,5,6}
print(a|b) # a 와 b 의 합집합
print(set.union(a,b)) # a 와 b 의 합집합

교집합(intersection , &)

set.intersection() 메서드와 동작이 같음

print(a&b) #a와 b의 교집합
print(set.intersection(a,b))#a와 b의 교집합

차집합 (difference , - )

set.difference() 메서드와 동작이 같음

print(a-b) # 순서가 바뀌면 값이 달라짐 현재는 a 에서 b 요소를 제거
print(set.difference(a,b))

대칭차집합 (symmetric difference , ^)

XOR 연산자 ^ 를 사용함 XOR(배타적OR) : 서로다른것만 해당 겹치지 않은것들만 해당, XOR은 서로 다르면 참

set.symmetric_difference() 메서드와 동작이 같음

집합에서는 두 집합 중 겹치지 않는 요소만 포함함

print(a^b)
print(set.symmetric_difference(a,b)) # 서로 다른걸 보여주세요. 교집합빼고 보여주세요

할당 연산자 사용

세트 자료형에 | , & , - , ^ 연산자와 할당 연산자 = 을 함께 사용하면 집합 연산의 결과를 변수에 다시 저장(할당)함.

update

|= 은 현재 세트에 다른 세트를 더하며 update 메서드와 같음

# 세트1 |= 세트2
t = {1,2,3,4}
t |= {5} 
print(t) # 결과 {1,2,3,4,5}

#세트1.update(세트2)
t.update({5})
print(t) # 결과 {1,2,3,4,5}

intersection_update

&= 는 현재 세트와 다른 세트의 겹치는 요소만 현재 세트에 저장 한다. intersection_update() 메서드와 같음

t = {1,2,3,4}
t &= {0,1,2,3,4}
print(t) #결과 {1,2,3,4} 겹치지 않는 0은 제외

t.intersection_update({0,1,2,3,4})
print(t) #결과 {1,2,3,4}

difference_update

-= 는 현재 세트에서 다른 세트를 뺀다. difference_update() 메서드와 같음

t = {1,2,3,4}
t -= {1,2,3}
print(t) #결과 {4} 겹치지 않는 0은 제외

t.difference_update({1,2,3})
print(t) #결과 {4}

symmetric_difference_update

^=은 현재 세트와 다른 세트 중에서 겹치지 않는 요소만 현재 세트에 저장한다. symmetric_difference_update() 메서드와 같다.

t = {1,2,3,4}
t ^= {3,4,5,6}
print(t) #결과 {1,2,5,6} 겹치는 3,4 제외

t.symmetric_difference_update({3,4,5,6})
print(t) #결과 {1,2,5,6}

집합 연산 사용

부분 집합과 상위 집합 확인

현재 세트가 다른 세트의 부분집합 또는 상위집합인지 확인할 때는 세트 자료형에 부등호와 등호를 사용한다.

<= 부분집합 (subset)

<=는 현재 세트가 다른 세트의 부분집합인지 확인한다. issubset() 메서드와 같음

현재세트 <= 다른세트 현재세트.inssubset(다른세트)

결과는 True or False

< 진부분집합 (proper subset)

현재세트가 다른 세트의 진부분집합인지 확인한다. 메서드는 없음

부분집합이지만 같지는 않을 때 참임 (동일한 부분을 제외한것)

현재 세트 < 다른세트

>>> a = {1,2,3,4}
>>> a < {1,2,3,4,5}
True

>>> a = {1,2,3,4}
>>> a < {1,2,3,4}
False

>= 상위집합(superset)

>= 은 현재 세트가 다른 세트의 상위 집합인지 확인 issuperset() 메서드와 같음

>>> a = {1,2,3,4}
>>> a >= {1,2,3,4}
True

>>> a >= {1,2}
True

>>> a >= {1,2,3,4,5}
False

>>> a.issuperset({1,2,3,4})
True

> 진상위집합(proper superset)

>= 은 현재 세트가 다른 세트의 상위 집합인지 확인 메서드는 없음 상위 집합이지만 같지는 않을 때 참임

>>> a = {1,2,3,4}
>>> a > {1,2,3,4}
Flase

>>> a > {1,2,3}
True

세트가 같은지 다른지 확인하기

세트가 같은지 확인하기 (==)

== 연산자 사용

>>> a = {1,2,3,4}
>>> a == {1,2,3,4}
True

>>> a == {4,2,1,3}
True

요소만 같으면 순서 상관없음 말그대로 집합

세트가 다른지 확인하기 (!=)

!= 연산자 사용

>>> a = {1,2,3,4}
>>> a != {1,2,3}
True

>>> a == {4,2,1,3}
False

세트가 겹치지 않는지 확인하기 (disjoint)

disjoint 는 현재 세트가 다른 세트와 겹치지 않는지 확인한다.

현재세트.isdisjoint(다른세트)

>>> a = {1,2,3,4}
>>> a.isdisjoint{5,6,7,8} # 겹치는 요소가 없음
True

>>> a.isdisjoint{3,4,5,6} # 3,4가 겹침
False

세트조작하기

.add(요소) : 세트에 요소를 추가 .remove(요소) : 세트에서 특정 요소를 삭제하고 요소가 없으면 에러발생 .discard(요소) : 세트에서 특정 요소를 삭제하고 요소가 없으면 그냥 넘어감. .pop() :세트에서 임의의 요소를 삭제하고 해당 요소를 반환. 요소가 없으면 에러 .clear() : 세트의 모든 요소를 삭제 len(세트) : 세트의 요소 개수 구함.

세트의 할당과 복사

딕셔너리와 마찬가지로 할당과 복사의 차이점이 있으니 주의해야함

a = {1,2,3,4}
b = a

print(a is b) #True

위와 같이 할당을 하게되면 a 와 b 는 같은 하나의 세트 객체를 가르키게 된다.

a 와 b 를 각각 다른 객체로 만드려면 .copy() 메서드를 사용해야한다.

a = {1,2,3,4}
b = a.copy()

print(a is b) #False

2주차 문제에서 기본이지만 못풀고있었던 10950문제! 개념서를 너무 성의없이 읽은것같아서 각잡고 다시 훑어보니 어떻게 풀지 감이 잡혔다..

test_count = int(input()) #테스트케이스 입력
i = 0 #초기화

while i < test_count:#(초기)0보다 테스트케이스 입력값이 크면 실행/ i가 입력값에 도달했을때 정지(false)
    use1, use2 = map(int,input().split())#입력값 2개를 입력받아 각각의 변수에 할당하고
    print(use1 + use2)#할당한 값들을 더해 출력한다.
    i += 1 # i = i+1 해줌

1. test_count에 개수 T 5를 입력하면
2. while 의 조건식 i(초기값 0) 가 test_count (5) 가 될때까지
3. 각각의 변수use1,use2에 입력받은 값을 나누어 정수로 할당하고
4. 할당 된 변수 use1,use2를 더한 결과를 print 한다.
5. 그후 i = i+1 을하여 test_count 값을 +1 한다.
6. test_count가 4를 초과하는 순간 while은 flase 루프가 중단된다.

코드를 1조 슬랙에 올렸더니 좋은 피드백을 주셨다!

T =int(input())
for i in range(T):
    a,b = map(int,input().split())
    print(a+b)

나는 while 구문을 쓰면서 초기화나 i+= 1 등이 들어갔는데 for문을 사용하니까 훨씬 깔끔해지고 가독성이 좋아졌다.

솔직히 가독성부분을 생각안하고 머릿속으로 생각하는걸 바로바로 코드로 짜니 설명이 많은 코드로 짠것같다. 내가 짠것도 충분히 간단한 코드라고 생각했는데 예로 보여주신 코드를 보니까 간단한 코드를 더 깔끔하게 적합하게 적재적소에 사용하는 방법을 항상 고민하면서 짜야할것같다! 앞으로 점차 복잡해질테니까 미리미리 클린하게 작성하는 습관을 들여야지

여느때와 다름없이 파이썬 공부중 갑작스런 에러문구

SyntaxError: Non-ASCII character '

ASCII 하면 문자와 관련된것같아 머리를 굴려보지만 정확한 해결방법을 못찾겠어 열심히 구글링을 시작했다.

생물물리학자님의 블로그에서 알아보니 python2 에서 기본 문자 인코딩은 ASCII 라고 한다. (하지만 나는 python 3.8.2를 쓰는데..)

만약 파이썬 2 를 쓰고 있다면

utf-8을 사용하기위해 설정을 해주어야 하는데 방법은

# -*- coding: utf-8 -*-

라인 첫 줄에 위의 코드를 넣어주어야한다. 그럼 해결완료!

만약 파이썬3을 쓰고 있다면

나와 같은 경우인데, 따로 건드린 것 없이 SyntaxError: Non-ASCII character 문구가 뜬 상황이라면

1. 자신이 지금 쓰는 파이썬 버전을 에디터나 터미널에서 확인 해주어야한다.

나는 vscode의 왼쪽 하단의 파란색 라인에서 나의 현재 버전을 확인했더니 python 2.7.16으로 ! 되어 있었다.

*2. 그부분을 클릭한다. * 그러면 vscode 상단에

3. 사용할 수 있는 버전이 나와있는데 3버전이 없다면 설치. 있다면 버전을 클릭하면 적용이 된다. 이렇게!

_python2 의 기본문자 인코딩이 ASCII 인것과 다르게 python3 의 기본문자 인코딩은 utf-8 이기 때문에 생긴 에러였다. _

해결완료!

1주차 과제의 해결하지 못했던 문제

1주차 과제에 대한 글의 맨 마지막 부분에 해결하지 못한 문제점들이 있어 올리지 못하였는데, 어쩌다 우연히 내가 짠 코드들을 유심히 보며 멍을 때리다가 아무래도 이상한 부분이 있어 확인을 해보니 OMG

자기소개 페이지 구성을 할 때

<div id="wrap">
    <div id="main_wrap"> <!--1페이지-->
        <!--contents-->
        </div>
        <div id="info_wrap"> <!--2페이지 information-->
        <!--contents-->
        </div>
        <div id="fav_wrap"> <!--3페이지 favorite-->
        <!--contents-->
        </div>
        <div id="contact_wrap"> <!--4페이지 contact-->
        <!--contents-->
        </div>
</div>

이렇게 1페이지부터 4페이지 까지 모두 동 등한 위치로 #wrap 에 상속되게 구성을 하였는데 css에서 #info_wrap에 특별한 position 이나 float를 준적이 없는데 자꾸 #contact_wrap 이 자신의 윗페이지인 #fav_wrap을 무시하고

위 사진처럼 겹치는 문제가 생겼다.(환장하겠네)

일단 스터디시간에 맞춰 완성을 해야했기에 css파일에서 원래는 height 값을 주지않고 페이지를 합친 높이에 맞춰 자연스럽게 두려고 했던 #wrap 에 모든 컨텐츠가 잘리지 않도록 적당한 height 값을 눈대중으로 맞추어 주고,

#contact_wrap{
        background-color:#ffffff;
        width:1300px;
        height:800px;
        position:relative;
        top:1150px;
        left:50%;
        transform:translate(-50%,0);}

이렇게 멋대로 위로 붙은 마지막페이지 #contact_wrap 을 position을 사용하여 강제로 내가 원래 의도한 위치로 이동시켰다. (조금만 더 살펴보지..)

문제를 찾았다~!

처음에 말했듯이 1주차 스터디 이후 하루 쉬고, 그 다음날 문제를 찾기위해 html파일을 열어놓고 멍을 때리던 도중에 뭔가 이상한 것을 발견했다.

무수히 많이 중첩되어있는 </div> 중 이번에 html 작성을 할때 결심했던 tab 구분이 이상한걸 발견했다.

대략 이런..

 <div id="info_wrap">
     <div class="info_contents">    
            <p> info_wrap의 내용입니다.</p>
     </div><!--info_contents-->
 <div id="fav_wrap">
     <div class="fav_contents">    
            <p> fav_wrap의 내용입니다.</p>
     </div><!--fav_contents-->
 </div><!--#fav_wrap-->
 </div><!--#info_wrap-->

동등하게 있어야 할 두 페이지가 확인 해보니 #info_wrap 안에 #fav_wrap 이 자식<div>로 되어있었다. 그렇기 때문에 내가 css 에 작성했던 #info_wrap의 height : 800px; 은 당연히 #fav_wrap 까지 담지 못했을것이고 넘친 부분이라 원래 있을곳에 있었던 것 뿐이였던 #contact_wrap이 오해 받았던것. 아마 overflow : hidden; 을 해봤었다면 어쩌면 더 빨리 발견가능 했을건데..

마크업작성을 할때 내용을 바꾸기 위해서 <div> 들을 몇번 옮긴 적이 있었는데 아마 그때 생긴 문제인것같다.

스크롤 제이쿼리 추가

사실 자바스크립트로 스크롤기능을 만드려고했는데, 파이썬과 함께 시간투자를 많이 하기 힘들것같아 그래도 좀 사용해봤던 제이쿼리 (자바스크립트는 안익숙하면서..) 로 간단한 스크롤 기능정도만 추가 해 보기로 했다.

$(function(){
   var $menu = $('.fir_bottom_wrap ul li'); 
       $contents = $('.click_contents');



    $menu.click(function(x){
        x.preventDefault();//a 링크 속성 삭제하기

        var idx = $(this).index();
        var section = $contents.eq(idx)//index 순서를 정해 메뉴클릭 시 각각 순서대로 이동

        var sectionDistance = section.offset().top;
        //console.log(sectionDistance); menu를 눌렀을때 이동하는 높이 확인
        //A.scrollTop() 스크롤양을 확인
        $('html').stop().animate({scrollTop:sectionDistance});
    }); 
});

유튜브 제이쿼리 강의를 보며 작성했는데 마크업이 다른 부분은 조금씩 바꿔서 작성했다.

처음 만들때 메뉴를 첫페이지에 상속시키지않고 우측에 픽스된 selfintroduction 처럼 메뉴를 고정해서 어떤 페이지에서든 이동할 수 있게 하지 않은게 아쉬움이 남는다(미디어쿼리도ㅠㅠ). 그래도 좀 더 완성도 있어진 페이지에 뿌듯!

완성페이지 링크!

그럼 파이썬 공부하러,, 🥸