diff --git a/Image_Comment.py b/Image_Comment.py deleted file mode 100644 index b4917d0..0000000 --- a/Image_Comment.py +++ /dev/null @@ -1,33 +0,0 @@ -# 이미지 이름 | 번호 | 키워드 -# 이미지 이름을 복사하여 키워드 칸에 저장하는 코드 - -import os -import pandas as pd - -# 폴더에 있는 사진 파일 읽어오기 -photo_folder = 'C:/Users/xorua/OneDrive/Desktop/Capston/ImageFiletest/' # 폴더 경로 설정 -photo_files = os.listdir(photo_folder) - -# 사진 파일 이름과 가상의 키워드 데이터 생성 -data = [] -for i, file in enumerate(photo_files): - # 가상의 키워드 생성 (예: 파일 이름에 따라) - comment = ' '.join(os.path.splitext(file)[0].split('_')) # 파일 이름을 '_'를 기준으로 나누어 키워드 생성 - # 데이터 딕셔너리에 이미지 파일 이름, 인덱스 번호, 그리고 해당하는 가상의 키워드를 추가 - data.append({'image_name': file, 'comment_number': i, 'comment': comment}) - -# 데이터프레임 생성 -df = pd.DataFrame(data) - -# CSV 파일로 저장 -csv_file = 'photo_keywords1.csv' # CSV 파일 이름 설정 -# index=False로 설정하여 DataFrame의 인덱스를 CSV 파일에 포함시키지 않음 -# sep='|'로 설정하여 '|'를 구분자로 사용함 -df.to_csv(csv_file, index=False, sep='|') - -# 1. os.listdir() 함수를 사용하여 지정된 폴더에서 사진 파일 목록을 가져옵니다. -# 2. enumerate() 함수를 사용하여 파일 목록의 각 항목에 대한 인덱스와 값을 반복적으로 가져옵니다. -# 3. 각 사진 파일의 이름을 기반으로 가상의 키워드를 생성합니다. 여기서는 파일 이름을 '_'로 분리하고 공백으로 연결하여 가상의 키워드를 생성합니다. -# 4. 생성된 이미지 파일 이름, 인덱스 번호, 그리고 해당하는 가상의 키워드를 딕셔너리로 만들고, 이를 리스트에 추가합니다. -# 5. 리스트를 사용하여 DataFrame을 생성합니다. -# 6. 생성된 DataFrame을 CSV 파일로 저장합니다. 여기서는 '|'를 구분자로 사용하고, DataFrame의 인덱스를 CSV 파일에 포함시키지 않습니다. diff --git a/Image_List/photo_keywords_MainKor300.csv b/Image_List/photo_keywords_MainKor300.csv new file mode 100644 index 0000000..2446f19 --- /dev/null +++ b/Image_List/photo_keywords_MainKor300.csv @@ -0,0 +1,301 @@ +image_name|comment_number|comment +1.jpg|0|가족 개 아빠 엄마 모자 낙엽 나무 소년 소녀 +2.jpg|0|가족 밥 식사 화목 엄마 아들 아빠 +3.jpg|0|가족 배구공 화목함 나들이 +4.jpg|0|가족 상자 소파 남자 여자 소녀 행복 아빠 엄마 +5.jpg|0|가족 소년 소녀 남자 여자 책상 음식 주방 +6.jpg|0|가족 소풍 나들이 음식 노인 남자 여자 소년 소녀 들판 +7.jpg|0|가족 주문 아이들 소원 감정 사랑 +8.jpg|0|가족 태양 구름 노을 하늘 바다 점프 +9.jpg|0|갈대 사이 빛나는 달 자연 바람 +10.jpg|0|강낭콩 우정 아이들 자연 성장 감정 교육 +11.jpg|0|강아지 멍멍이 개 3마리 화목 +12.jpg|0|개 아기 하트 농구공 행복 +13.jpg|0|거실 럭셔리 가구 진열대 전등 소파 +14.jpg|0|거실 소파 탁자 화분 실내 인테리어 장식 +15.jpg|0|거위 새 푸른 잔디 햇빛 방목 목초지 자연 평화로운 +16.jpg|0|거인 문제 이야기 동화 해결 모험 +17.jpg|0|건물 들판 나무 가로등 개 고양이 곰 +18.jpg|0|검정 고양이 책들 공부 휴식 +19.jpg|0|계단 나무 빛나는 노을 반짝 +20.jpg|0|고슴도치 돌 환경 맑음 귀여움 +21.jpg|0|고양이 돌 바위 자연 그루밍 +22.jpg|0|고양이 배낭 자건거 여행 마을 거리 골목 +23.jpg|0|고양이 어항 물고기-바라보기 회색고양이 +24.jpg|0|곰 아이 새 숲 나무 모자 식물 +25.jpg|0|공주 구름 개구리 연못 들판 왕관 +26.jpg|0|그네 밤 하늘 별 달 보라색 산 +27.jpg|0|그네 별 달 아이 고양이 나무 풀 +28.jpg|0|깊은 협곡 어린이들 자연 그랜드 캐니언 형제 모험 +29.jpg|0|꽃 민들레 아이 집 밖의 자연 꽃 배경 행복한 +30.jpg|0|꽃밭 황혼 구름 아름다운 빨간꽃 +31.jpg|0|나무 고양이 실루엣 달 보름달 자연 월광 밤하늘 검은 고양이 +32.jpg|0|나무 남자 개 들판 행복 모자 +33.jpg|0|나무 바람 아이 휘날림 기울린 +34.jpg|0|나무 산 목초지 풀 하늘 맑은 눈 +35.jpg|0|나뭇잎 나비 파랑색 화려한 아름다운 +36.jpg|0|나비 꽃 민들레 흰색 노란색 들판 꽃밭 +37.jpg|0|남자 소년 상자 화목 앉은 맑은 날씨 구름 초원 +38.jpg|0|남자 소년 아빠 수영장 물 허그 +39.jpg|0|남자 여자 노인 소파 창문 +40.jpg|0|남자 여자 모자 소풍 나무 들판 바구니 +41.jpg|0|남자 여자 수영장 튜브 안경 음료 +42.jpg|0|남자 여자 아이 가족 바다 요트 +43.jpg|0|남자 여자 창문 화분 개 고양이 +44.jpg|0|남자 여자 축구공 축구 운동장 즐거운 +45.jpg|0|남자 여자 허그 장화 우산 비 나무 +46.jpg|0|노을 아파트 해 저녁 일몰 붉은 하루 집 풍경 +47.jpg|0|누워있는 고양이 졸린 쉬고있는 귀여운 +48.jpg|0|눈을 감는 여우 꽃 향기 미소 주황색 솜털같은 +49.jpg|0|다람쥐 도도리 나뭇잎 주황빛 나무 밑 +50.jpg|0|다람쥐 봄 꽃들 귀여운 사랑스러운 달콤한 +51.jpg|0|다리 나무 울창한 숲 강 +52.jpg|0|달 별 밤 산 안개 +53.jpg|0|달팽이 이끼 촉촉한 나무 습기 +54.jpg|0|닭 어린이 농장 분홍색 안아주는 +55.jpg|0|도로 숲 떨어지는 단풍 가을 풍경 자연 길 +56.jpg|0|동물 곰 새 우산 가을 털모자 나무 +57.jpg|0|동물 곰 토끼 소 독서 책 해 구름 +58.jpg|0|돼지 가족 엄마 가사노동 평등 유머 삽화 +59.jpg|0|들판 아빠 소년 축구공 골대 +60.jpg|0|라벤더 꽃 벌 식물 곤충 자연 향기 +61.jpg|0|마법사 밤 달 별 숲 책 망토 모자 +62.jpg|0|맛있는 쿠키 바삭한 과자 우유 +63.jpg|0|망고 쌍둥이 자매 감정 과일 어린이 +64.jpg|0|밀림 좁은 길 계단 햇빛 보도 숲 자연 녹색 +65.jpg|0|바다 돌고래 잔잔한 물 속 바닷속 +66.jpg|0|바다 배 갈매기 달 노을 별 +67.jpg|0|밤하늘 우주 은하수 나무 산 속 +68.jpg|0|방 책장 카펫 장난감 커튼 +69.jpg|0|백설공주 동화 일곱난쟁이 왕자 마법 고전 모험 +70.jpg|0|백조 새 호수 하얀색 깃털 로맨틱 +71.jpg|0|병아리 초원 솜털같은 새 풀 +72.jpg|0|보트 낚시 배 바다 조용한 해변 풍경 +73.jpg|0|부엌 집 내부 바닥 가구 목제 식탁 오븐 싱크대 +74.jpg|0|북극곰 눈 크리스마스 달 흰색 나무 눈 덮인 +75.jpg|0|북극곰 바다 수영 흰색 북극 +76.jpg|0|북극곰 산 바다 달 구름 +77.jpg|0|북금곰 곰 흰색 북극 미소 +78.jpg|0|비행 날아가는 헬리콥터 떠나는 나무 잔디 +79.jpg|0|빛나는 태양 나무 여성 기지개 노을 +80.jpg|0|빨간 모자 소녀 동화 숲 모험 늑대 +81.jpg|0|사랑 아기 곰인형 포옹 감정 따뜻함 어린이 +82.jpg|0|사진 아이 부츠 도로 카메라 비포장도로 부츠 +83.jpg|0|산 정점 구름 풍경 겨울 눈 자연 +84.jpg|0|산첵 여자 남자 소년 소녀 나무 길 +85.jpg|0|새 벚꽃 분홍색 아름다운 나뭇가지 위 +86.jpg|0|소녀 건물 태양 구름 들판 +87.jpg|0|소녀 곱슬머리 지구 허그 구름 +88.jpg|0|소녀 공룡 화산 초원 나뭇잎 나무 교감 +89.jpg|0|소녀 그림 인형 차 리모콘 액자 서럽 +90.jpg|0|소녀 긍정 자신감 미소 어린이 그림책 용기 +91.jpg|0|소녀 네잎클로버 초록색 미소 웃는얼굴 +92.jpg|0|소녀 농구공 나무 하늘 구름 +93.jpg|0|소녀 도서관 책 책상 연필 안경 +94.jpg|0|소녀 독서 나무 나비 동물 +95.jpg|0|소녀 들판 강 숲 수영복 튜브 +96.jpg|0|소녀 리본 숟가락 포크 +97.jpg|0|소녀 모자 그림 붓 팔레트 화가 +98.jpg|0|소녀 모자 화가 붓 통 물감 +99.jpg|0|소녀 상자 선물 나무 +100.jpg|0|소녀 소년 곱슬머리 창문 가방 책상 책 +101.jpg|0|소녀 소년 풍선 들판 +102.jpg|0|소녀 수박 해 아이스크림 더운 +103.jpg|0|소녀 수수께끼 탐정 모험 호기심 어린이 퍼즐 +104.jpg|0|소녀 슬픔 감정 외로움 친구 거부감 토끼인형 +105.jpg|0|소녀 신남 점프 애완동물 안경 고양이 +106.jpg|0|소녀 아이들 감정 호기심 사랑 어린이 +107.jpg|0|소녀 아이들 농구공 깃발 운동 +108.jpg|0|소녀 여자 개 창문 행복 +109.jpg|0|소녀 여자 전등 커피 컴퓨터 책상 +110.jpg|0|소녀 요정 구름 왕관 숲 들판 별 +111.jpg|0|소녀 우산 비 모자 물 +112.jpg|0|소녀 의자 책상 그림 연필 교실 +113.jpg|0|소녀 장난감 곰인형 상자 인형 +114.jpg|0|소녀 전통 한국 설화 공주 모험 신화 +115.jpg|0|소녀 주황머리 책 독서 공부 +116.jpg|0|소녀 줄넘기 풍선 들판 무지개 +117.jpg|0|소녀 창문 소파 고양이 화분 쿠션 +118.jpg|0|소녀 책 책장 안경 공부 +119.jpg|0|소녀 친구 학교 마스크 코로나 자연 어린이 +120.jpg|0|소녀 침대 고양이 커튼 장난감 이불 +121.jpg|0|소녀 침대 배게 책상 인형 장난감 +122.jpg|0|소녀 침대 잠 시계 인형 +123.jpg|0|소녀 토끼 책상 꽃병 책장 액자 +124.jpg|0|소녀 통나무 버섯 여우 풀숲 +125.jpg|0|소녀 팔짱 창문 공 나무 책장 +126.jpg|0|소녀 풍선 케이크 상자 책상 선물 +127.jpg|0|소녀 할머니 가족 찾기 사랑 어린이 +128.jpg|0|소녀 화가 모자 붓 그림 +129.jpg|0|소녀 화분 벽돌 책장 책 곰인형 +130.jpg|0|소년 가방 학교 건물 +131.jpg|0|소년 곱슬머리 나무 개 벤치 의자 +132.jpg|0|소년 곱슬머리 나무 개 행복 들판 +133.jpg|0|소년 곱슬머리 카메라 사진 포즈 +134.jpg|0|소년 공 인형 화분 벽 +135.jpg|0|소년 남자 여자 풍선 들판 개 +136.jpg|0|소년 비행기 소풍 들판 마스크 +137.jpg|0|소년 비행기 하늘 구름 곱슬머리 +138.jpg|0|소년 사과 감사 자연 행복 나무 감정 +139.jpg|0|소년 사과 자신감 용기 어린이 감정 책임 +140.jpg|0|소년 소녀 가방 칠판 교실 +141.jpg|0|소년 소녀 꽃 무지개 연 +142.jpg|0|소년 소녀 나무 단풍 가을 +143.jpg|0|소년 소녀 눈사람 눈 트리 크리스마스 +144.jpg|0|소년 소녀 독서 필기 공부 +145.jpg|0|소년 소녀 들판 나무 누워있는 +146.jpg|0|소년 소녀 모자 들판 사탕 +147.jpg|0|소년 소녀 모자 벤치 아이스크림 +148.jpg|0|소년 소녀 모자 요리사 케이크 +149.jpg|0|소년 소녀 보물상자 지도 들판 구름 +150.jpg|0|소년 소녀 사랑 하트 고백 +151.jpg|0|소년 소녀 상자 선물 +152.jpg|0|소년 소녀 소풍 산책 활기찬 +153.jpg|0|소년 소녀 숲 여우 책 등불 +154.jpg|0|소년 소녀 싸움 감정 분노 가족 갈등 +155.jpg|0|소년 소녀 우산 들판 꽃 무지개 구름 +156.jpg|0|소년 소녀 울타리 공 방망이 +157.jpg|0|소년 소녀 장난감 인형 주사위 +158.jpg|0|소년 소녀 점프 풍선 들판 +159.jpg|0|소년 소녀 책 연필 시계 +160.jpg|0|소년 소녀 책 책상 연필 +161.jpg|0|소년 소녀 책상 책 지구본 의자 교실 +162.jpg|0|소년 소녀 축구 축구공 해 공원 +163.jpg|0|소년 소녀 칠판 책 책상 공 연필 +164.jpg|0|소년 소녀 탐험 깃발 지도 안경 돋보기 +165.jpg|0|소년 소녀 행복 솜사탕 +166.jpg|0|소년 시계 창문 인형 옷장 +167.jpg|0|소년 애완동물 고양이 나뭇잎 고양이 +168.jpg|0|소년 요술 용 지팡이 신화 +169.jpg|0|소년 웃음 연필 곱슬머리 그리기 +170.jpg|0|소년 웃음 행복 긍정 초상화 어린이 +171.jpg|0|소년 자신감 응원 긍정 어린이 성장 그림책 +172.jpg|0|소년 종이접기 종이비행기 꽃 공원 +173.jpg|0|소년 찾기 잃어버림 물건 혼란 걱정 정리 +174.jpg|0|소년 책 침대 인형 별 베개 +175.jpg|0|소년 축구공 소녀 책 놀이터 +176.jpg|0|소년 축구공 책 소파 +177.jpg|0|소년 카메라 인형 침대 커튼 +178.jpg|0|소년 케이크 깃발 모자 접시 +179.jpg|0|소년 팔짱 가운 불만 삐죽한 입 +180.jpg|0|소년 화 감정조절 장난감 분노 스트레스 그림책 +181.jpg|0|소비 아이들 경제교육 돈 절약 교육 유머 +182.jpg|0|수박 잘 익은 맛있는 나무판 신선한 +183.jpg|0|수영장 튜브 소녀 남자 수영복 +184.jpg|0|신호등 횡단보도 사람들 교차로 일상 바쁨 +185.jpg|0|씨앗 성장 자연 아이들 감정 긍정 미소 +186.jpg|0|아기 놀이 동물 귀여움 미소 유아 물개 고양이 거북이 +187.jpg|0|아기 놀이 동물 신체활동 유아 발달 건강 +188.jpg|0|아기 누나 돌보기 가족 사랑 책임 그림책 +189.jpg|0|아기 무지개 장난 웃음 색깔 유아 놀이 +190.jpg|0|아기 밤톨 귀여움 잠옷 어린이 동화 그림책 +191.jpg|0|아기 사랑 환영 가족 미소 유아 +192.jpg|0|아기 신생아 잠 귀여운 담요 작은 사랑스러운 +193.jpg|0|아기 음식 식사 감정 궁금증 어린이 그림책 +194.jpg|0|아기 의사 청진기 키 건강검진 +195.jpg|0|아기 천재 교육 놀이 유아 성장 +196.jpg|0|아빠 남자 여자 엄마 소년 음식 창문 화분 액자 +197.jpg|0|아빠 딸 타임캡슐 추억 기억 모험 가족 +198.jpg|0|아빠 엄마 소녀 가을 낙엽 나무 +199.jpg|0|아빠 엄마 아이 바다 모래사장 하늘 구름 +200.jpg|0|아이 걱정 문제 해결 어린이 두려움 교훈 +201.jpg|0|아이 마루 집 앉기 집 +202.jpg|0|아이 자존감 행복 긍정 자신감 자아 어린이 +203.jpg|0|아이들 나무 들판 구름 맑은 +204.jpg|0|아이들 나무 장갑 가을 단풍 +205.jpg|0|아이들 놀이터 고양이 친구 대화 놀이 유아 +206.jpg|0|아이들 놀이터 미끄럼틀 시소 풍선 +207.jpg|0|아이들 놀이터 미끄럼틀 애완동물 할머니 +208.jpg|0|아이들 들판 물총 해 구름 +209.jpg|0|아이들 마음 감정 이해 친구 소통 그림책 +210.jpg|0|아이들 종이접기 단체 종이비행기 색종이 +211.jpg|0|아이들 춤 신남 즐거움 기쁨 +212.jpg|0|아이들 튜브 수영 바다 바닷가 +213.jpg|0|아이들 학교 우정 사랑 질투 감정 어린이 +214.jpg|0|앉아있는 고양이 사람처럼 귀여움 수염 +215.jpg|0|애완 동물 고양이 개 포유류 친구들 +216.jpg|0|야구 어린이 스포츠 야구 방망이 글러브 티볼 +217.jpg|0|양치기 양 교훈 동물 이야기 들판 +218.jpg|0|어린 소녀 야생화 코스모스 꽃 여름 만지는 +219.jpg|0|어린 아이 소녀 눈 빨간색 옷 나뭇잎 눈 덮인 자연 +220.jpg|0|어린왕자 꽃 우주 모험 철학 감정 +221.jpg|0|어린이 늑대 숲 동화 어두운 밤 조명 +222.jpg|0|어린이 어린 시절 놀이 일몰 어린이들 재미있는 신나는 +223.jpg|0|어린이들 남자아이 낚시 취미 강 숲 +224.jpg|0|얼음 얼음결정 차가운 얼어붙은 언 +225.jpg|0|엄마 딸 바닷가 노을 가족 일몰 대양 +226.jpg|0|엄마 딸 회사 생각 사랑 그리움 가정 놀이 대화 감정 +227.jpg|0|엄마 마녀 가족 모험 유머 마법 어린이 +228.jpg|0|엄마 소녀 허그 안경 가족 +229.jpg|0|엄마 아이 우산 비 보호 안전 가족 +230.jpg|0|엄마 아이 이별 울음 회사 일 감정 +231.jpg|0|엄마 여자 아이 들판 꽃 +232.jpg|0|여성 스쿠터 교통 도로 도시의 거리 +233.jpg|0|여우 달 숲 별 뼈다귀 +234.jpg|0|여우 동물 황야 자연 풀 붉은 +235.jpg|0|여자 개 나무 울타리 공 +236.jpg|0|여자 개 목욕 건물 나무 들판 +237.jpg|0|여자 곱슬머리 맛있는 사과 먹는 +238.jpg|0|여자 곱슬머리 무지개 등 책 고양이 인형 +239.jpg|0|여자 나무 집 울타리 거위 바구니 +240.jpg|0|여자 남자 부엌 음식 준비 커플 함께 요리 +241.jpg|0|여자 산 구름 가방 바다 컴퓨터 +242.jpg|0|여자 소녀 공원 그네 나무 +243.jpg|0|여자 소녀 놀이터 아파트 철봉 +244.jpg|0|여자 소녀 모자 꽃 나무 +245.jpg|0|여자 소녀 카페트 책 상자 +246.jpg|0|여자 숲 꽃 토끼 통나무 +247.jpg|0|여자 시계 책장 의자 개 +248.jpg|0|여자 아이스크림 나무 구름 야자수 개 +249.jpg|0|여자 안경 책 밤하늘 별 인형 +250.jpg|0|여자 엄마 소녀 꽃 모자 나무 봄 +251.jpg|0|여자 엄마 소녀 키스 책 소파 거울 꽃 +252.jpg|0|여자 요정 무지개 구름 왕관 절벽 +253.jpg|0|여자 울타리 집 개 들판 +254.jpg|0|여자 창문 소파 공 액자 매트 +255.jpg|0|여자 창문 책 책장 의자 +256.jpg|0|여자 책상 화분 연필 책 +257.jpg|0|여자 침대 고양이 전등 시계 +258.jpg|0|여자 태양 바다 파라솔 구름 책 +259.jpg|0|여자 태양 아이스크림 구름 풀 안경 +260.jpg|0|여자 화분 물 풀 +261.jpg|0|여행 가방 여자 꽃 길 도로 홀로 +262.jpg|0|연세가 드신 할머니 할아버지 여행 가방 손잡고 +263.jpg|0|열기구 집 동물 병아리 쥐 돼지 소 여우 +264.jpg|0|염소 어린이 새끼 자연 들판 목장 +265.jpg|0|오렌즈 주스 마시는 여자 주황색 맛있는데 손가락 매니큐어 +266.jpg|0|오로라 눈 별 밤하늘 추운 밤 자연현상 +267.jpg|0|요정 성 돌 들판 나무 +268.jpg|0|욕실 세탁기 변기 세면대 세면도구 수건 +269.jpg|0|욕실 화장식 거울 세면대 수건 전등 +270.jpg|0|웃는 아이 고양이 눈 눈 덮인 숲 +271.jpg|0|은하수 별빛 우주 별자리 빛 은하 +272.jpg|0|은하수 우주 별 빛나는 황홀 +273.jpg|0|일몰 나무 물 실루엣 나무 실루엣 황혼 반사 하늘-외로운 수평선 +274.jpg|0|작은 고양이 큰 고양이 흰색 털 +275.jpg|0|잭 콩나무 모험 마법 거인 동화 환상 +276.jpg|0|저축 어린이 경제교육 돈 기쁨 교육 저금 +277.jpg|0|전설 이야기 왕자 여왕 모험 그림책 +278.jpg|0|졸린 고양이 고양이 같은 코골이 피곤함 +279.jpg|0|졸업 축하 초등학교 친구들 기념 행복 교육 +280.jpg|0|집 나무 꽃 구름 날아가는 새 +281.jpg|0|침대 가구 배게 액자 이불 +282.jpg|0|침대 소녀 인형 잠 배게 +283.jpg|0|침실 침대 내부 조명 배게 이불 +284.jpg|0|카폐 조명 의자 탁자 카페 +285.jpg|0|커플 자전거 사랑 구름 목초지 행복 키스 연인 남성 여성 +286.jpg|0|코끼리 호수 나무 자연 물 평화 +287.jpg|0|토끼 들판 먹고 있는 풀 잔디 +288.jpg|0|토끼 배 보따리 흙 풀 쫑긋 +289.jpg|0|토끼 토끼들 바이올렛 트럼펫 드럼 연주회 +290.jpg|0|팽귄 사랑 뽀뽀 키스 손 잡은 마주보기 +291.jpg|0|편의점 아이들 모험 미스터리 탐정 사건 도시 +292.jpg|0|할로윈 호박 검정 고양이 겁 없는 +293.jpg|0|해변 바다 햇빛 모래 해안 해안선 거품 황혼 +294.jpg|0|해변 휴가 섬 파라다이스 바다 여행 여름 +295.jpg|0|해적 앵무새 나무 섬 해적섬 +296.jpg|0|형제 동생 가족 사랑 책임 어린이 관계 +297.jpg|0|호수 산 아름다운 숲 풍경 자연 반사 물 +298.jpg|0|호수 산 자연 구름 숲 작은 마을 +299.jpg|0|흑백 개 멍멍이 바라보는 쫑긋 +300.jpg|0|흰색 말 자연 숲속 햇빛 나무 풀 diff --git a/README.md b/README.md index 00aab77..ab84347 100644 --- a/README.md +++ b/README.md @@ -1 +1,6 @@ -# PictureBook_Curator \ No newline at end of file +# PictureBook_Curator + +## 구글 드라이브 파일 공유 +Image_List -> CSV파일 전용 사진 + +https://drive.google.com/file/d/1i6p3xCX6ltbfVlyT-hVHOIlU9ymbJHOA/view?usp=drive_link diff --git a/image_View/Icon/back.png b/image_View/Icon/back.png new file mode 100644 index 0000000..455e45e Binary files /dev/null and b/image_View/Icon/back.png differ diff --git a/image_View/Icon/backward.png b/image_View/Icon/backward.png new file mode 100644 index 0000000..6c64257 Binary files /dev/null and b/image_View/Icon/backward.png differ diff --git a/image_View/Icon/bookmark.png b/image_View/Icon/bookmark.png new file mode 100644 index 0000000..00d349a Binary files /dev/null and b/image_View/Icon/bookmark.png differ diff --git a/image_View/Icon/brightness.png b/image_View/Icon/brightness.png new file mode 100644 index 0000000..108ed2b Binary files /dev/null and b/image_View/Icon/brightness.png differ diff --git a/image_View/Icon/forward.png b/image_View/Icon/forward.png new file mode 100644 index 0000000..0b0f14b Binary files /dev/null and b/image_View/Icon/forward.png differ diff --git a/image_View/Icon/fox.jpg b/image_View/Icon/fox.jpg new file mode 100644 index 0000000..7f02d9e Binary files /dev/null and b/image_View/Icon/fox.jpg differ diff --git a/image_View/Icon/home.png b/image_View/Icon/home.png new file mode 100644 index 0000000..c40c6b2 Binary files /dev/null and b/image_View/Icon/home.png differ diff --git a/image_View/Icon/left.png b/image_View/Icon/left.png new file mode 100644 index 0000000..890e540 Binary files /dev/null and b/image_View/Icon/left.png differ diff --git a/image_View/Icon/mute.png b/image_View/Icon/mute.png new file mode 100644 index 0000000..62f2420 Binary files /dev/null and b/image_View/Icon/mute.png differ diff --git a/image_View/Icon/pause.png b/image_View/Icon/pause.png new file mode 100644 index 0000000..d1fb5ee Binary files /dev/null and b/image_View/Icon/pause.png differ diff --git a/image_View/Icon/pin.png b/image_View/Icon/pin.png new file mode 100644 index 0000000..090d0e6 Binary files /dev/null and b/image_View/Icon/pin.png differ diff --git a/image_View/Icon/play.png b/image_View/Icon/play.png new file mode 100644 index 0000000..d3da0b7 Binary files /dev/null and b/image_View/Icon/play.png differ diff --git a/image_View/Icon/restore.png b/image_View/Icon/restore.png new file mode 100644 index 0000000..05e342c Binary files /dev/null and b/image_View/Icon/restore.png differ diff --git a/image_View/Icon/right.png b/image_View/Icon/right.png new file mode 100644 index 0000000..e757e53 Binary files /dev/null and b/image_View/Icon/right.png differ diff --git a/image_View/Icon/search.png b/image_View/Icon/search.png new file mode 100644 index 0000000..9402e3e Binary files /dev/null and b/image_View/Icon/search.png differ diff --git a/image_View/Icon/settings.png b/image_View/Icon/settings.png new file mode 100644 index 0000000..845c81d Binary files /dev/null and b/image_View/Icon/settings.png differ diff --git a/image_View/Icon/testpicture.jpg b/image_View/Icon/testpicture.jpg new file mode 100644 index 0000000..5bb927f Binary files /dev/null and b/image_View/Icon/testpicture.jpg differ diff --git a/image_View/Icon/voice.png b/image_View/Icon/voice.png new file mode 100644 index 0000000..e4ba4a9 Binary files /dev/null and b/image_View/Icon/voice.png differ diff --git a/image_View/Icon/volume.png b/image_View/Icon/volume.png new file mode 100644 index 0000000..b915464 Binary files /dev/null and b/image_View/Icon/volume.png differ diff --git a/image_View/Image/dog.jpg b/image_View/Image/dog.jpg new file mode 100644 index 0000000..9c0205d Binary files /dev/null and b/image_View/Image/dog.jpg differ diff --git a/image_View/Image/fox.jpg b/image_View/Image/fox.jpg new file mode 100644 index 0000000..7f02d9e Binary files /dev/null and b/image_View/Image/fox.jpg differ diff --git a/image_View/Image/testpicture.jpg b/image_View/Image/testpicture.jpg new file mode 100644 index 0000000..5bb927f Binary files /dev/null and b/image_View/Image/testpicture.jpg differ diff --git a/image_View/img/left.png b/image_View/img/left.png new file mode 100644 index 0000000..5898c4a Binary files /dev/null and b/image_View/img/left.png differ diff --git a/image_View/img/right.png b/image_View/img/right.png new file mode 100644 index 0000000..872af8e Binary files /dev/null and b/image_View/img/right.png differ diff --git a/image_View/index.html b/image_View/index.html new file mode 100644 index 0000000..31ef536 --- /dev/null +++ b/image_View/index.html @@ -0,0 +1,101 @@ + + + + + + PictureBook Curator + + + + +
+ +
+ + + +
+ +
+ +
+ + + + +
+ +
+
+ +
첫번째 슬라이드 입니다. 이 문장은 자막이 길어질 때 어떻게 보이는지 테스트하는 예시 문장입니다.
+
+ + + +
+ + diff --git a/image_View/script.js b/image_View/script.js new file mode 100644 index 0000000..504120f --- /dev/null +++ b/image_View/script.js @@ -0,0 +1,104 @@ +document.addEventListener('DOMContentLoaded', function() { + // 슬라이드 요소를 선택합니다. + const slides = document.querySelectorAll('input[type="radio"][name="slide"]'); + // 자막을 업데이트할 요소를 선택합니다. + const subtitle = document.querySelector('.subtitle'); + // 현재 페이지 입력 요소를 선택합니다. + const currentPageInput = document.getElementById('current-page'); + // 전체 페이지 수를 슬라이드 개수로 설정합니다. + const totalPages = slides.length; + + // 총 페이지 수를 두 자리 형식으로 표시합니다. + document.getElementById('total-pages').textContent = totalPages.toString().padStart(2, '0'); + + // 슬라이드 변경 이벤트에 대한 리스너를 추가합니다. + slides.forEach(slide => { + slide.addEventListener('change', function() { + updateSubtitle(); + updateCurrentPage(); + }); + }); + + // 현재 페이지 입력 값 변경 이벤트에 대한 리스너를 추가합니다. + currentPageInput.addEventListener('change', function() { + const page = parseInt(currentPageInput.value); + if (page >= 1 && page <= totalPages) { + document.getElementById(`slide0${page}`).checked = true; + updateSubtitle(); + } else { + currentPageInput.value = formatPageNumber(document.querySelector('input[type="radio"][name="slide"]:checked').id.replace('slide', '')); + } + }); + + // 자막을 업데이트하는 함수입니다. + function updateSubtitle() { + const checkedSlide = document.querySelector('input[type="radio"][name="slide"]:checked').id; + const currentPage = checkedSlide.replace('slide', ''); + currentPageInput.value = formatPageNumber(currentPage); // 현재 페이지 번호 업데이트 + const subtitles = { + slide01: "첫번째 슬라이드 입니다. 이 문장은 자막이 길어질 때 어떻게 보이는지 테스트하는 예시 문장입니다.", + slide02: "두번째 슬라이드 입니다. 두 번째 슬라이드는 길이 테스트를 위해 작성되었습니다. 이 문장도 충분히 길어야 합니다.", + slide03: "세번째 슬라이드 입니다. 이 슬라이드는 자막이 길어질 때의 처리를 확인하기 위해 작성되었습니다. 충분히 기이이이이이인 문장입니다." + }; + const subtitleText = subtitles[checkedSlide]; + subtitle.textContent = subtitleText; + + adjustFontSize(subtitle, subtitleText); + } + + // 현재 페이지 번호를 업데이트하는 함수입니다. + function updateCurrentPage() { + const checkedSlide = document.querySelector('input[type="radio"][name="slide"]:checked').id; + const currentPage = checkedSlide.replace('slide', ''); + currentPageInput.value = formatPageNumber(currentPage); + } + + // 페이지 번호를 두 자리 형식으로 변환하는 함수입니다. + function formatPageNumber(page) { + return page.padStart(2, '0'); + } + + // 자막의 글자 크기를 조정하는 함수입니다. + function adjustFontSize(element, text) { + const maxFontSize = 16; // 최대 글자 크기 + const minFontSize = 12; // 최소 글자 크기 + const maxLength = 50; // 기준 텍스트 길이 + + // 텍스트 길이에 따라 글자 크기 조정 + const textLength = text.length; + const fontSize = textLength > maxLength + ? Math.max(minFontSize, maxFontSize - (textLength - maxLength) * 0.1) + : maxFontSize; + element.style.fontSize = fontSize + 'px'; + } + + // 초기 자막 및 페이지 업데이트 + updateSubtitle(); // 초기 상태에서 자막을 설정합니다. + updateCurrentPage(); // 초기 상태에서 페이지 번호를 설정합니다. +}); + +// Pause/Play toggle logic +const controlButton = document.querySelector('.pause-play-toggle img'); + +controlButton.addEventListener('click', () => { + if (controlButton.getAttribute('src') === 'Icon/pause.png') { + controlButton.setAttribute('src', 'Icon/play.png'); + controlButton.setAttribute('alt', 'Play'); + } else { + controlButton.setAttribute('src', 'Icon/pause.png'); + controlButton.setAttribute('alt', 'Pause'); + } +}); + +// Volume/Mute toggle logic +const volumeIcon = document.getElementById('volume-icon'); + +volumeIcon.addEventListener('click', () => { + if (volumeIcon.getAttribute('src') === 'Icon/volume.png') { + volumeIcon.setAttribute('src', 'Icon/mute.png'); + volumeIcon.setAttribute('alt', 'Mute'); + } else { + volumeIcon.setAttribute('src', 'Icon/volume.png'); + volumeIcon.setAttribute('alt', 'Volume'); + } +}); diff --git a/image_View/styles.css b/image_View/styles.css new file mode 100644 index 0000000..ca227aa --- /dev/null +++ b/image_View/styles.css @@ -0,0 +1,296 @@ +/* 브라우저 기본 마진과 패딩 리셋 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; /* 모든 요소에 박스 모델 적용 */ +} + +body { + height: 100vh; /* 화면 전체 높이 */ + display: flex; /* 플렉스 박스 레이아웃 사용 */ + justify-content: center; /* 수평 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + font-family: Arial, sans-serif; /* 폰트 설정 */ + background-color: #f0f0f0; /* 배경색 설정 */ +} + +.container { + border: 2px solid #000; /* 검정색 테두리 */ + width: 80%; /* 너비 80% */ + height: 80%; /* 높이 80% */ + display: flex; + flex-direction: column; /* 세로 방향 정렬 */ + justify-content: space-between; /* 공간을 균등하게 분배 */ + align-items: center; /* 수평 중앙 정렬 */ + background-color: #fff; /* 배경색 흰색 */ +} + +.header, .footer { + display: flex; + justify-content: space-between; /* 양 끝에 배치 */ + align-items: center; /* 수직 중앙 정렬 */ + width: 100%; /* 전체 너비 */ + padding: 10px; /* 패딩 설정 */ +} + +.header { + border-bottom: 2px solid #000; /* 하단 테두리 */ +} + +.footer { + border-top: 2px solid #000; /* 상단 테두리 */ +} + +.content { + display: flex; + justify-content: center; /* 수평 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + flex-direction: column; /* 세로 방향 정렬 */ + width: 100%; /* 전체 너비 */ + height: 80%; /* 전체 높이 */ + position: relative; /* 상대 위치 */ +} + +/* 슬라이드 스타일 */ +.section input[id*="slide"] { + display: none; +} +/* 이미지 크기 변경 */ +.slidewrap { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.section .slidewrap { + max-width: 100%; + margin: 0 auto; + overflow: hidden; +} + +.section .slidelist { + white-space: nowrap; + font-size: 0; +} + +.section .slidelist > li { + display: inline-block; + vertical-align: middle; + width: 100%; + height: 100%; + transition: all 0.5s; +} + +.section .slidelist > li > a { + display: block; + position: relative; + overflow: hidden; /* 화살표 화면 밖으로 나가면 안 보이도록 overflow로 가림처리 */ +} + +.section .slidelist > li > a img { + width: 100%; + height: 100%; + object-fit: cover; /* 이미지가 컨테이너의 너비와 높이에 맞춰 축소 */ + +} + +/* 좌우로 넘기는 LABEL버튼에 대한 스타일 */ +.section .slidelist label { + position: absolute; + z-index: 1; + top: 50%; + transform: translateY(-50%); + padding: 0px; + cursor: pointer; + width: 50px; /* 화살표 크기를 적당히 설정 */ + height: 50px; /* 동일한 크기로 설정하여 원형을 유지 */ + background: rgba(0, 0, 0, 0); /* 초기 배경은 완전 투명 */ + transition: background-color 0.3s; /* 부드러운 배경색 변경 효과 */ + border-radius: 50%; /* 원형 모양으로 만듦 */ + display: flex; + justify-content: center; + align-items: center; +} + +/* 마우스를 올렸을 때의 스타일 */ +.section .slidelist label:hover { + background-color: rgba(0, 0, 0, 0.3); /* 마우스 오버시 반투명 검정색 배경 추가 */ + opacity: 1; /* 화살표를 보이게 함 */ +} + +.section .slidelist .left { + left: 50px; /* 화면 왼쪽 가장자리에서 적당히 떨어진 위치 */ + background: url('./img/left.png') center center / contain no-repeat; +} + +.section .slidelist .right { + right: 50px; /* 화면 오른쪽 가장자리에서 적당히 떨어진 위치 */ + background: url('./img/right.png') center center / contain no-repeat; +} + +/* INPUT이 체크되면 변화값이 li까지 전달되는 스타일 */ +.section input[id="slide01"]:checked ~ .slidewrap .slidelist > li { + transform: translateX(0%); +} + +.section input[id="slide02"]:checked ~ .slidewrap .slidelist > li { + transform: translateX(-100%); +} + +.section input[id="slide03"]:checked ~ .slidewrap .slidelist > li { + transform: translateX(-200%); +} + +/* INPUT이 체크되면 변화값이 LEFT,RIGHT에 전달되는 스타일 */ +.section input[id="slide01"]:checked ~ .slidewrap li:nth-child(1) .left { + left: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide01"]:checked ~ .slidewrap li:nth-child(1) .right { + right: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide02"]:checked ~ .slidewrap li:nth-child(2) .left { + left: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide02"]:checked ~ .slidewrap li:nth-child(2) .right { + right: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide03"]:checked ~ .slidewrap li:nth-child(3) .left { + left: 0px; + transition: all 0.35s ease 0.5s; +} + +.section input[id="slide03"]:checked ~ .slidewrap li:nth-child(3) .right { + right: 0px; + transition: all 0.35s ease 0.5s; +} + +/* 버튼 크기 및 제어 */ +button { + border: none; /* 테두리 제거 */ + background-color: transparent; /* 배경색 투명 */ + cursor: pointer; /* 커서 모양 변경 */ + margin: 0; /* 여백 설정 */ + font-size: 25px; + transition: transform 0.5s; /* 변환 시 애니메이션 적용 */ +} + + +.back-button, .bookmark-button, .action-button { + background: none; /* 배경 없음 */ + border: none; /* 테두리 없음 */ + font-size: 18px; /* 폰트 크기 */ + cursor: pointer; /* 커서 모양 변경 */ + display: flex; /* 플렉스 박스 사용 */ + align-items: center; /* 수직 중앙 정렬 */ +} + +.back-button img, .bookmark-button img, .action-button img { + width: 24px; /* 이미지 너비 */ + height: 24px; /* 이미지 높이 */ +} + +.title-input { + border: 1px solid #ccc; /* 테두리 색상 */ + border-radius: 4px; /* 테두리 둥글게 */ + padding: 5px; /* 패딩 설정 */ + font-size: 18px; /* 폰트 크기 */ + text-align: center; /* 텍스트 중앙 정렬 */ + width: 60%; /* 너비 설정 */ +} + +.controls { + display: flex; /* 플렉스 박스 사용 */ + justify-content: center; /* 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + flex-grow: 1; /* 남는 공간 차지 */ +} + +.control-button { + margin: 0 10px; /* 좌우 여백 설정 */ + background: none; /* 배경 없음 */ + border: none; /* 테두리 없음 */ + font-size: 18px; /* 폰트 크기 */ + cursor: pointer; /* 커서 모양 변경 */ +} + +.control-button img.icon { + width: 24px; /* 아이콘 너비 */ + height: 24px; /* 아이콘 높이 */ + vertical-align: middle; /* 수직 중앙 정렬 */ +} + +.volume-control { + display: flex; /* 플렉스 박스 사용 */ + align-items: center; /* 수직 중앙 정렬 */ +} + +.volume-icon { + margin-right: 10px; /* 오른쪽 여백 */ +} + +.volume-icon img { + width: 24px; /* 아이콘 너비 */ + height: 24px; /* 아이콘 높이 */ + cursor: pointer; /* 커서 모양 변경 */ +} + +.volume-control input { + cursor: pointer; /* 커서 모양 변경 */ +} + +/* 자막 스타일 추가 */ +.subtitle { + border: 2px solid black; + position: absolute; + bottom: 10px; /* 하단에서 약간 위로 띄움 */ + padding: 5px 10px; + background: rgba(255, 255, 255, 1); /* 반투명 배경 */ + color: black; /* 글자 색상 */ + font-size: 1rem; + text-align: center; + border-radius: 5px; + font-weight: bold; /* 글자 두껍게 */ + white-space: normal; /* 줄 바꿈을 허용 */ + word-wrap: break-word; /* 긴 단어를 줄 바꿈 */ + max-width: 90%; /* 최대 너비 설정 */ + min-width: 100px; /* 최소 너비 설정 */ + transition: all 0.3s ease-in-out; /* 부드러운 애니메이션 */ + display: inline-block; /* 텍스트 길이에 맞춰 배경 크기 조정 */ +} + +/* 자막의 글자 크기를 조절하는 스타일 추가 */ +.subtitle.adjust-font { + font-size: calc(1rem + 0.5vw); +} + +.page-info { + display: flex; + align-items: center; + font-size: 16px; + color: black; + margin: 0 30px; /* 좌우 여백을 추가하여 가운데 배치 */ +} + +.page-info input[type="number"] { + width: 60px; + margin-right: 5px; + text-align: center; + border: 1px solid #ccc; + border-radius: 4px; + padding: 5px; + font-size: 16px; +} +