diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..7778905 Binary files /dev/null and b/.DS_Store differ diff --git "a/\352\263\274\354\240\2341/.DS_Store" "b/\352\263\274\354\240\2341/.DS_Store" new file mode 100644 index 0000000..1b698e2 Binary files /dev/null and "b/\352\263\274\354\240\2341/.DS_Store" differ diff --git "a/\352\263\274\354\240\2341/.gitignore" "b/\352\263\274\354\240\2341/.gitignore" new file mode 100644 index 0000000..e84d342 --- /dev/null +++ "b/\352\263\274\354\240\2341/.gitignore" @@ -0,0 +1,2 @@ +.DS_Store +i.html diff --git "a/\352\263\274\354\240\2341/img/.DS_Store" "b/\352\263\274\354\240\2341/img/.DS_Store" new file mode 100644 index 0000000..ad49614 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/.DS_Store" differ diff --git "a/\352\263\274\354\240\2341/img/Group 4\354\207\274\354\270\240.png" "b/\352\263\274\354\240\2341/img/Group 4\354\207\274\354\270\240.png" new file mode 100644 index 0000000..3c58552 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/Group 4\354\207\274\354\270\240.png" differ diff --git "a/\352\263\274\354\240\2341/img/Search--Streamline-Iconoir.png" "b/\352\263\274\354\240\2341/img/Search--Streamline-Iconoir.png" new file mode 100644 index 0000000..f6d5d8c Binary files /dev/null and "b/\352\263\274\354\240\2341/img/Search--Streamline-Iconoir.png" differ diff --git "a/\352\263\274\354\240\2341/img/Vector-1.png" "b/\352\263\274\354\240\2341/img/Vector-1.png" new file mode 100644 index 0000000..5f0b653 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/Vector-1.png" differ diff --git "a/\352\263\274\354\240\2341/img/Vector.png" "b/\352\263\274\354\240\2341/img/Vector.png" new file mode 100644 index 0000000..64be244 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/Vector.png" differ diff --git "a/\352\263\274\354\240\2341/img/bell.png" "b/\352\263\274\354\240\2341/img/bell.png" new file mode 100644 index 0000000..eb521ba Binary files /dev/null and "b/\352\263\274\354\240\2341/img/bell.png" differ diff --git "a/\352\263\274\354\240\2341/img/home.png" "b/\352\263\274\354\240\2341/img/home.png" new file mode 100644 index 0000000..ae5af87 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/home.png" differ diff --git "a/\352\263\274\354\240\2341/img/likelike.png" "b/\352\263\274\354\240\2341/img/likelike.png" new file mode 100644 index 0000000..841ce6a Binary files /dev/null and "b/\352\263\274\354\240\2341/img/likelike.png" differ diff --git "a/\352\263\274\354\240\2341/img/logo.png" "b/\352\263\274\354\240\2341/img/logo.png" new file mode 100644 index 0000000..c45fc42 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/logo.png" differ diff --git "a/\352\263\274\354\240\2341/img/premium.png" "b/\352\263\274\354\240\2341/img/premium.png" new file mode 100644 index 0000000..9f3f5e1 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/premium.png" differ diff --git "a/\352\263\274\354\240\2341/img/serch.png" "b/\352\263\274\354\240\2341/img/serch.png" new file mode 100644 index 0000000..335d9bf Binary files /dev/null and "b/\352\263\274\354\240\2341/img/serch.png" differ diff --git "a/\352\263\274\354\240\2341/img/three_line.png" "b/\352\263\274\354\240\2341/img/three_line.png" new file mode 100644 index 0000000..143ff5e Binary files /dev/null and "b/\352\263\274\354\240\2341/img/three_line.png" differ diff --git "a/\352\263\274\354\240\2341/img/video.png" "b/\352\263\274\354\240\2341/img/video.png" new file mode 100644 index 0000000..121daec Binary files /dev/null and "b/\352\263\274\354\240\2341/img/video.png" differ diff --git "a/\352\263\274\354\240\2341/img/voice.png" "b/\352\263\274\354\240\2341/img/voice.png" new file mode 100644 index 0000000..8d9afd9 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/voice.png" differ diff --git "a/\352\263\274\354\240\2341/img/\352\262\214\354\236\204.png" "b/\352\263\274\354\240\2341/img/\352\262\214\354\236\204.png" new file mode 100644 index 0000000..6251c97 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\352\262\214\354\236\204.png" differ diff --git "a/\352\263\274\354\240\2341/img/\352\263\240\352\260\235 \354\204\274\355\204\260.png" "b/\352\263\274\354\240\2341/img/\352\263\240\352\260\235 \354\204\274\355\204\260.png" new file mode 100644 index 0000000..e160e55 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\352\263\240\352\260\235 \354\204\274\355\204\260.png" differ diff --git "a/\352\263\274\354\240\2341/img/\352\265\254\353\217\205.png" "b/\352\263\274\354\240\2341/img/\352\265\254\353\217\205.png" new file mode 100644 index 0000000..22bf16d Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\352\265\254\353\217\205.png" differ diff --git "a/\352\263\274\354\240\2341/img/\353\202\230\354\244\221\354\227\220 \353\263\274 \353\217\231\354\230\201\354\203\201.png" "b/\352\263\274\354\240\2341/img/\353\202\230\354\244\221\354\227\220 \353\263\274 \353\217\231\354\230\201\354\203\201.png" new file mode 100644 index 0000000..a7604bf Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\353\202\230\354\244\221\354\227\220 \353\263\274 \353\217\231\354\230\201\354\203\201.png" differ diff --git "a/\352\263\274\354\240\2341/img/\353\202\264 \353\217\231\354\230\201\354\203\201.png" "b/\352\263\274\354\240\2341/img/\353\202\264 \353\217\231\354\230\201\354\203\201.png" new file mode 100644 index 0000000..80f5386 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\353\202\264 \353\217\231\354\230\201\354\203\201.png" differ diff --git "a/\352\263\274\354\240\2341/img/\353\202\264 \354\261\204\353\204\220.png" "b/\352\263\274\354\240\2341/img/\353\202\264 \354\261\204\353\204\220.png" new file mode 100644 index 0000000..fa27cbb Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\353\202\264 \354\261\204\353\204\220.png" differ diff --git "a/\352\263\274\354\240\2341/img/\353\251\224\354\235\270\354\207\274\354\270\240.png" "b/\352\263\274\354\240\2341/img/\353\251\224\354\235\270\354\207\274\354\270\240.png" new file mode 100644 index 0000000..aec6153 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\353\251\224\354\235\270\354\207\274\354\270\240.png" differ diff --git "a/\352\263\274\354\240\2341/img/\353\256\244\354\247\201.png" "b/\352\263\274\354\240\2341/img/\353\256\244\354\247\201.png" new file mode 100644 index 0000000..cf14690 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\353\256\244\354\247\201.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\204\244\354\240\225.png" "b/\352\263\274\354\240\2341/img/\354\204\244\354\240\225.png" new file mode 100644 index 0000000..4f93d90 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\204\244\354\240\225.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\207\274\355\225\221.png" "b/\352\263\274\354\240\2341/img/\354\207\274\355\225\221.png" new file mode 100644 index 0000000..2c44237 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\207\274\355\225\221.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\212\244\355\212\234\353\224\224\354\230\244.png" "b/\352\263\274\354\240\2341/img/\354\212\244\355\212\234\353\224\224\354\230\244.png" new file mode 100644 index 0000000..a7be36a Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\212\244\355\212\234\353\224\224\354\230\244.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\212\244\355\217\254\354\270\240.png" "b/\352\263\274\354\240\2341/img/\354\212\244\355\217\254\354\270\240.png" new file mode 100644 index 0000000..19d1010 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\212\244\355\217\254\354\270\240.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\213\234\354\262\255 \352\270\260\353\241\235.png" "b/\352\263\274\354\240\2341/img/\354\213\234\354\262\255 \352\270\260\353\241\235.png" new file mode 100644 index 0000000..df2fde0 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\213\234\354\262\255 \352\270\260\353\241\235.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\213\240\352\263\240 \352\270\260\353\241\235.png" "b/\352\263\274\354\240\2341/img/\354\213\240\352\263\240 \352\270\260\353\241\235.png" new file mode 100644 index 0000000..94ffdc9 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\213\240\352\263\240 \352\270\260\353\241\235.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\213\244\354\213\234\352\260\204.png" "b/\352\263\274\354\240\2341/img/\354\213\244\354\213\234\352\260\204.png" new file mode 100644 index 0000000..6740a94 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\213\244\354\213\234\352\260\204.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\235\214\354\225\205.png" "b/\352\263\274\354\240\2341/img/\354\235\214\354\225\205.png" new file mode 100644 index 0000000..6f59b84 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\235\214\354\225\205.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\235\230\352\262\254 \353\263\264\353\202\264\352\270\260.png" "b/\352\263\274\354\240\2341/img/\354\235\230\352\262\254 \353\263\264\353\202\264\352\270\260.png" new file mode 100644 index 0000000..73ea018 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\235\230\352\262\254 \353\263\264\353\202\264\352\270\260.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\235\270\352\270\260\353\217\231\354\230\201\354\203\201.png" "b/\352\263\274\354\240\2341/img/\354\235\270\352\270\260\353\217\231\354\230\201\354\203\201.png" new file mode 100644 index 0000000..62d2e13 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\235\270\352\270\260\353\217\231\354\230\201\354\203\201.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\236\254\354\203\235\353\252\251\353\241\235.png" "b/\352\263\274\354\240\2341/img/\354\236\254\354\203\235\353\252\251\353\241\235.png" new file mode 100644 index 0000000..0b5c0ee Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\236\254\354\203\235\353\252\251\353\241\235.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\240\220 \354\204\270\352\260\234.png" "b/\352\263\274\354\240\2341/img/\354\240\220 \354\204\270\352\260\234.png" new file mode 100644 index 0000000..c4d7a8c Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\240\220 \354\204\270\352\260\234.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\240\220.png" "b/\352\263\274\354\240\2341/img/\354\240\220.png" new file mode 100644 index 0000000..3e938f0 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\240\220.png" differ diff --git "a/\352\263\274\354\240\2341/img/\354\242\213\354\225\204\354\232\224 \355\221\234\354\213\234\355\225\234 \353\217\231\354\230\201\354\203\201.png" "b/\352\263\274\354\240\2341/img/\354\242\213\354\225\204\354\232\224 \355\221\234\354\213\234\355\225\234 \353\217\231\354\230\201\354\203\201.png" new file mode 100644 index 0000000..84ba69f Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\354\242\213\354\225\204\354\232\224 \355\221\234\354\213\234\355\225\234 \353\217\231\354\230\201\354\203\201.png" differ diff --git "a/\352\263\274\354\240\2341/img/\355\202\244\354\246\210.png" "b/\352\263\274\354\240\2341/img/\355\202\244\354\246\210.png" new file mode 100644 index 0000000..c3ad9de Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\355\202\244\354\246\210.png" differ diff --git "a/\352\263\274\354\240\2341/img/\355\203\200\354\236\220.png" "b/\352\263\274\354\240\2341/img/\355\203\200\354\236\220.png" new file mode 100644 index 0000000..9cf4f7b Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\355\203\200\354\236\220.png" differ diff --git "a/\352\263\274\354\240\2341/img/\355\214\237\354\272\220\354\212\244\355\212\270.png" "b/\352\263\274\354\240\2341/img/\355\214\237\354\272\220\354\212\244\355\212\270.png" new file mode 100644 index 0000000..65b7e0a Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\355\214\237\354\272\220\354\212\244\355\212\270.png" differ diff --git "a/\352\263\274\354\240\2341/img/\355\224\204\353\241\234\355\225\204.png" "b/\352\263\274\354\240\2341/img/\355\224\204\353\241\234\355\225\204.png" new file mode 100644 index 0000000..3e4da59 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\355\224\204\353\241\234\355\225\204.png" differ diff --git "a/\352\263\274\354\240\2341/img/\355\225\231\354\212\265 \355\224\204\353\241\234\352\267\270\353\236\250.png" "b/\352\263\274\354\240\2341/img/\355\225\231\354\212\265 \355\224\204\353\241\234\352\267\270\353\236\250.png" new file mode 100644 index 0000000..3d01633 Binary files /dev/null and "b/\352\263\274\354\240\2341/img/\355\225\231\354\212\265 \355\224\204\353\241\234\352\267\270\353\236\250.png" differ diff --git "a/\352\263\274\354\240\2341/index.css" "b/\352\263\274\354\240\2341/index.css" new file mode 100644 index 0000000..ebbdf46 --- /dev/null +++ "b/\352\263\274\354\240\2341/index.css" @@ -0,0 +1,59 @@ +#sideBar{ + display: none; +} +#mainShort{ + display: none; +} +#videos{ + width: 450px; + left: 20px; +} +.v{ + width: 450px; +} +.thumbnail{ + width: 450px; + height: 260px; +} +#box1{ + right: 900px; +} +#search{ + width: 300px; +} +#bar{ + left: 70px; + display: none; +} +#voice{ + left: 280px; +} +#searchButton{ + position: absolute; + left: 230px; + display: block; + width: 25px; + height: 25px; + cursor: pointer; + border-radius: 100px; + padding: 8px; +} +#searchButton:hover{ + background-color: rgb(63, 63, 63); +} +#searchButton img{ + width: 25px; +} +#back{ + width: 30px; + height: 30px; + background-color: white; + cursor: pointer; +} +#categori{ + left: 20px; + overflow-x: auto; +} +#titles{ + width: 380px; +} diff --git "a/\352\263\274\354\240\2341/index.html" "b/\352\263\274\354\240\2341/index.html" new file mode 100644 index 0000000..8a5ee4a --- /dev/null +++ "b/\352\263\274\354\240\2341/index.html" @@ -0,0 +1,483 @@ + + + + + + Document + + + + + +
+
+ + +
+
+

전체

+

게임

+

음악

+

믹스

+

뉴스

+

만화영화

+

최근에 업로드된 영상

+

감상한 동영상

+

새로운 맞춤 동영상

+ +
+
+
+
+
+ +
+
+
+ +
+
+

제목 +

+

채널이름

+

조회수 XX만회3년전

+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+

제목 +

+

채널이름

+

조회수 XX만회3년전

+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+

제목 +

+

채널이름

+

조회수 XX만회3년전

+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+

제목 +

+

채널이름

+

조회수 XX만회3년전

+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+

제목 +

+

채널이름

+

조회수 XX만회3년전

+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+

제목 +

+

채널이름

+

조회수 XX만회3년전

+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+

제목 +

+

채널이름

+

조회수 XX만회3년전

+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+

제목 +

+

채널이름

+

조회수 XX만회3년전

+
+
+ +
+
+
+
+
+
+
+ +

Shorts

+
+
+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+ +
+
+

제목

+ +
+

조회수

+
+
+
+
+
더보기
+
간략히
+
+
+
+
+ + + + \ No newline at end of file diff --git "a/\352\263\274\354\240\2341/style.css" "b/\352\263\274\354\240\2341/style.css" new file mode 100644 index 0000000..bbe23c9 --- /dev/null +++ "b/\352\263\274\354\240\2341/style.css" @@ -0,0 +1,340 @@ +/*header css*/ + +*{ + margin: 0; + padding: 0; +} +header{ + position: fixed; + z-index: 5; +} +#container{ + margin-left: 10px; +} +body{ + background-color: black; +} +nav{ + height: 60px; + display: flex; + align-items: center; + position: relative; + top: 0; + width: 1400px; + background-color: black; + z-index: 5; +} +nav article{ + margin-right: 10px; +} +#List{ + display: flex; + width: 15px; + height: 10px; + padding: 17px 13px 17px 13px; + justify-content: center; + align-items: center; + border-radius: 100%; +} +#List img{width: 20px} +#List:hover{background: #2D2D2D; cursor: pointer;transition: 0.3s;} +#List:active{background-color: #4e4e4e;} +#search-bar{ + width: 500px; + height: 30px; +} +#logo img{width: 120px} +#search{ + width: 500px; + height: 30px; + font-size: 14px; + color: white; + background-color: #000000; + border: 1px solid #4e4e4e; + border-top-left-radius: 100px; + border-bottom-left-radius: 100px; + padding: 5px 10px; + margin: 0; +} +#bar{ + position: fixed; + left: 400px; + width: 640px; + display: flex; + justify-content: space-between; + align-items: center; + align-content: center; +} +#voice{ + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + width: 40px; + height: 40px; + background: #333333; + position: absolute; + left: 1000px; +} +#voice img{width:15px;} +#voice:hover{ + background-color: #4e4e4e; + cursor: pointer; + transition: 0.3s; +} +#alarm{ + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + width: 40px; + height: 40px; + +} +#alarm:hover{background-color: #2d2d2d;cursor: pointer;transition: 0.3s;} +#video{ + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + width: 40px; + height: 40px; + +} +#video:hover{background-color: #2d2d2d;cursor: pointer;transition: 0.3s;} +.profile{ + width: 40px; + height: 40px; + border-radius: 100px; + background-color: lightblue; +} +#box1{ + width: 180px; + display: flex; + justify-content: space-around; + position: absolute; + right: 0; +} +#searchButton{ + display: none; +} +#search-box{ + width: 600px; + display: flex; + flex-direction: row; + height: 40px; +} +#button{ + width: 40px; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + background-color: rgb(90, 90, 90); + display: flex; + justify-content: center; + align-items: center; + height: 30px; + cursor: pointer; + padding: 6px 10px; +} +#button img{ + width: 20px; +} +.bell{ + display: flex; + flex-direction: column; + justify-content: center; + position: relative; +} +#subText-voice{ + color: white; + background-color: gray; + border-radius: 10px; + width: 30px; + padding: 2px 5px; + font-size: 12px; + position: absolute; + bottom: -25px; + text-align: center; + display: none; + right: 0; +} +#back{ + display: none; +} +#subText-search{ + color: white; + background-color: gray; + border-radius: 10px; + width: 30px; + padding: 2px 5px; + font-size: 12px; + position: absolute; + bottom: -25px; + text-align: center; + right: 0; + display: none; +} +#subText-video{ + color: white; + background-color: gray; + border-radius: 10px; + width: 30px; + padding: 4px 5px; + font-size: 11px; + position: absolute; + bottom: -25px; + text-align: center; + display: none; + right: 0; +} +#subText-bell{ + color: white; + background-color: gray; + border-radius: 10px; + width: 30px; + padding: 2px 5px; + font-size: 12px; + position: absolute; + bottom: -25px; + text-align: center; + display: none; + right: 0; +} +#sideBar{ + width: 215px; + height: 750px; + overflow-y: auto; + background-color: black; +} +#sideBar div{ + color: white; + font-size: 14px; +} +#home{ + display: flex; + align-items: center; + width: 175px; + height: 30px; + padding: 5px 10px; + background-color: #2D2D2D; + border-radius: 10px; + cursor: pointer; +} +#home:hover{ + background-color:#3f3f3f; + transition: 0.2s; + +} +#home div img{width: 25px} +.home-text{ + color: white; + margin-left: 20px; +} +.short{ + display: flex; + align-items: center; + width: 175px; + height: 30px; + padding: 5px 10px; + background-color: #000000; + border-radius: 10px; + cursor: pointer; +} +.short:hover{ + background-color: #2D2D2D; + transition: 0.2s; + +} +.short img{width: 25px;} +.short div img{width: 25px;} +#like{ + display: flex; + align-items: center; + width: 175px; + height: 30px; + padding: 5px 10px; + background-color: #000000; + border-radius: 10px; + cursor: pointer; +} +#like:hover{ + background-color: #2D2D2D; + transition: 0.2s; + +} +#Like div img{width:25px;} +.hr{ + width: 100%; + height: 1px; + margin-top: 10px; + background-color: rgb(81, 81, 81); +} +.me{ + padding: 16px; +} +.outline{padding: 20px 10px 10px 5px;} +.outline a{ + color: rgb(212, 212, 212); + font-size: 13px; + text-decoration-line: none; +} +.outline2{ + color: gray; + font-size: 12px; + line-height: 18px; +} +.outline2 span a{color: blue;} +#sideBar::-webkit-scrollbar { + width: 10px; +} +#sideBar::-webkit-scrollbar-thumb { + background-color: #6b6b6b; + border-radius: 10px; + background-clip: padding-box; + border: 2px solid transparent; +} +#sideBar.hide-scrollbar::-webkit-scrollbar { + display: none; +} +#taja{ + position: absolute; + width: 40px; + right: 120px; + top: 8px; + cursor: pointer; +} +#search-in{ + width: 20px; + height: 20px; + position: absolute; + top: 10px; + left: -30px; + display: none; +} +#categori{ + position: fixed; + width: 1140px; + height: 40px; + right: 30px; + margin-top: 10px; + padding-top: 60px; + padding-left: 5px; + display: flex; + align-items: center; + background-color: black; + z-index: 4; +} +#categori p{ + color: white; + font-size: 14px; + font-weight: 700; + background-color: rgb(43, 43, 43); + padding: 10px 13px; + text-align: center; + border-radius: 10px; + margin-right: 15px; +} +#selectLatter{ + background-color: white; + color: black; +} diff --git "a/\352\263\274\354\240\2341/style2.css" "b/\352\263\274\354\240\2341/style2.css" new file mode 100644 index 0000000..ec36ae9 --- /dev/null +++ "b/\352\263\274\354\240\2341/style2.css" @@ -0,0 +1,143 @@ +#videos{ + width: 1140px; + top: 120px; + position: absolute; + right: 30px; + margin-top: 10px; + overflow-x: scroll; + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1; + flex-wrap: wrap; +} +#videos ::-webkit-scrollbar{ + height: 30px; + width: 5px; +} +#videos #v{ + margin-bottom: 50px; +} +.thumbnail{ + width: 370px; + height: 230px; + background-color: rgb(63, 63, 63); + border-radius: 20px; + margin-bottom: 5px; +} +.information{ + + display: flex; + justify-content: space-between; +} +.profiles{ + width: 40px; + height: 40px; + background-color: red; + border-radius: 100px; +} +.titles{ + width: 310px; + line-height: 20px; +} + +.titles h4{ + color: white; + padding: 5px; +} +.titles p{ + color: #999999; + font-size: 14px; + font-weight: 500; +} +.explain{ + width: 5px; + cursor: pointer; +} +.explain img{width: 100%;} +#mainShort{ + width: 1140px; + bottom: -530px; + position: absolute; + right: 30px; + margin-top: 10px; + height: 500px; +} +#s{ + margin-bottom: 10px; +} +#shortBar{ + width: 1140px; + height: 50px; +} +.shortTitle{ + color: white; + display: flex; + justify-content: space-around; + align-items: center; + width: 100px; + font-size: 18px; +} +.shortTitle img{width: 30px;} +.shortThumbnail{ + width: 220px; + height: 340px; + background-color: blue; + border-radius: 20px; + margin-bottom: 12px; +} +.shortName{ + margin: 0 auto; + width: 200px; + color: white; + font-size: 16px; + display: flex; + justify-content: space-between; +} +.shortName img{width: 5px;} +.shortExplain{ + color: #999999; + width: 200px; + margin: 0 auto; +} +.shortShow{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + height: 400px; + overflow: hidden; +} +#line{ + width: 1140px; + background-color: #999999; + height: 1px; + position: absolute; + bottom: 20px; +} +#line-in{ + border-radius: 20px; + padding: 10px 200px; + background-color: black; + color: white; + position: absolute; + left: 350px; + bottom: 0; + border: 1px solid #999999; + cursor: pointer; + z-index: 5; +} +#line-in2{ + border-radius: 20px; + padding: 10px 200px; + background-color: black; + color: white; + position: absolute; + left: 350px; + bottom: 0; + border: 1px solid #999999; + cursor: pointer; + z-index: 5; + display: none; +} +.one{display: none;} +.two{display: none;} \ No newline at end of file diff --git "a/\352\263\274\354\240\2341/style3.css" "b/\352\263\274\354\240\2341/style3.css" new file mode 100644 index 0000000..52b65ab --- /dev/null +++ "b/\352\263\274\354\240\2341/style3.css" @@ -0,0 +1,357 @@ + +/*header css*/ + +*{ + margin: 0; + padding: 0; +} +header{ + position: fixed; + z-index: 5; +} +#container{ + margin-left: 10px; +} +body{ + background-color: black; +} +nav{ + height: 60px; + display: flex; + align-items: center; + position: relative; + top: 0; + width: 1400px; + background-color: black; + z-index: 5; +} +nav article{ + margin-right: 10px; +} +#List{ + display: flex; + width: 15px; + height: 10px; + padding: 17px 13px 17px 13px; + justify-content: center; + align-items: center; + border-radius: 100%; +} +#List:hover{background: #2D2D2D; cursor: pointer;transition: 0.3s;} +#List:active{background-color: #4e4e4e;} +#logo img{width: 120px} +#nav{ + background-color: black; + color: white; + width: 45px; +} +#nav *{ + margin: 5px 0; +} +#home{ + display: flex; + flex-direction: column; + justify-content: center; + margin: 0; + cursor: pointer; + padding: 10px 5px; +} +#home *{ + margin: 2px; + font-size: 12px; +} +#home:hover{ + border-radius: 10px; + background-color: rgb(37, 37, 37); +} +#search-bar{ + width: 500px; + height: 30px; +} +#search{ + width: 500px; + height: 30px; + font-size: 14px; + color: white; + background-color: #000000; + border: 1px solid #4e4e4e; + border-top-left-radius: 100px; + border-bottom-left-radius: 100px; + padding: 5px 10px; + margin: 0; +} +#bar{ + position: fixed; + left: 400px; + width: 640px; + display: flex; + justify-content: space-between; + align-items: center; + align-content: center; +} +#voice{ + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + width: 40px; + height: 40px; + background: #333333; + position: absolute; + left: 1000px; +} +#voice:hover{ + background-color: #4e4e4e; + cursor: pointer; + transition: 0.3s; +} +#voice img{width:15px;} +#alarm{ + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + width: 40px; + height: 40px; + +} +#alarm:hover{background-color: #2d2d2d;cursor: pointer;transition: 0.3s;} +#video{ + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + width: 40px; + height: 40px; + +} +#video:hover{background-color: #2d2d2d;cursor: pointer;transition: 0.3s;} +.profile{ + width: 40px; + height: 40px; + border-radius: 100px; + background-color: lightblue; +} +#box1{ + width: 180px; + display: flex; + justify-content: space-around; + position: absolute; + right: 0; +} +#search-box{ + width: 600px; + display: flex; + flex-direction: row; + height: 40px; +} +#button{ + width: 40px; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + background-color: rgb(90, 90, 90); + display: flex; + justify-content: center; + align-items: center; + height: 30px; + cursor: pointer; + padding: 6px 10px; +} +#button img{ + width: 20px; +} +.bell{ + display: flex; + flex-direction: column; + justify-content: center; + position: relative; +} +#subText-voice{ + color: white; + background-color: gray; + border-radius: 10px; + width: 30px; + padding: 2px 5px; + font-size: 12px; + position: absolute; + bottom: -25px; + text-align: center; + display: none; + right: 0; +} +#subText-video{ + color: white; + background-color: gray; + border-radius: 10px; + width: 30px; + padding: 4px 5px; + font-size: 11px; + position: absolute; + bottom: -25px; + text-align: center; + display: none; + right: 0; +} +#subText-bell{ + color: white; + background-color: gray; + border-radius: 10px; + width: 30px; + padding: 2px 5px; + font-size: 12px; + position: absolute; + bottom: -25px; + text-align: center; + display: none; + right: 0; +} +#sideBar{ + width: 45px; + height: 750px; + overflow-y: auto; +} +#sideBar div{ + color: white; + font-size: 14px; +} +.home-text{ + color: white; + text-align: center; +} +#home div img{width: 25px} +.short{ + display: flex; + align-items: center; + flex-direction: column; + padding: 5px 10px; + background-color: #000000; + border-radius: 10px; + cursor: pointer; +} +.short:hover{ + background-color: #2D2D2D; + transition: 0.2s; + +} +.short img{width: 25px;} +.short div img{width: 25px;} +#like{ + display: flex; + align-items: center; + flex-direction: column; + padding: 5px 10px; + background-color: #000000; + border-radius: 10px; + cursor: pointer; +} +#like:hover{ + background-color: #2D2D2D; + transition: 0.2s; + +} +.hr{ + width: 100%; + height: 1px; + margin-top: 10px; + background-color: rgb(81, 81, 81); +} +.me{ + padding: 16px; +} +.outline{padding: 20px 10px 10px 5px;} +.outline a{ + color: rgb(212, 212, 212); + font-size: 13px; + text-decoration-line: none; +} +.outline2{ + color: gray; + font-size: 12px; + line-height: 18px; +} +#outline2 span a{color: blue;} +#sideBar::-webkit-scrollbar { + width: 10px; +} +#sideBar::-webkit-scrollbar-thumb { + background-color: #6b6b6b; + border-radius: 10px; + background-clip: padding-box; + border: 2px solid transparent; +} +#sideBar.hide-scrollbar::-webkit-scrollbar { + display: none; +} +#taja{ + position: absolute; + width: 40px; + right: 120px; + top: 8px; + cursor: pointer; +} +#search-in{ + width: 20px; + height: 20px; + position: absolute; + top: 10px; + left: -30px; + display: none; +} +#categori{ + position: fixed; + width: 1300px; + background-color: rgb(0, 0, 0); + height: 40px; + left: 100px; + margin-top: 10px; + padding-top: 60px; + padding-left: 5px; + overflow-x: scroll; + display: flex; + align-items: center; + z-index: 4; +} +#categori p{ + color: white; + font-size: 14px; + font-weight: 700; + background-color: rgb(43, 43, 43); + padding: 10px 13px; + text-align: center; + border-radius: 10px; + margin-right: 15px; +} +#back{ + display: none; +} +#subText-search{ + color: white; + background-color: gray; + border-radius: 10px; + width: 30px; + padding: 2px 5px; + font-size: 12px; + position: absolute; + bottom: -25px; + text-align: center; + right: 0; + display: none; +} +#searchButton{ + display: none; +} +#selectLatter{ + background-color: white; + color: black; +} +#my{ + display: none; +} +.hr{ + display: none; +} +#ll{display: none;} +#ff{display: none;} +#you{display: none;} +#setting{display: none;} +#dd{display: none;} diff --git "a/\352\263\274\354\240\2341/style4.css" "b/\352\263\274\354\240\2341/style4.css" new file mode 100644 index 0000000..5348608 --- /dev/null +++ "b/\352\263\274\354\240\2341/style4.css" @@ -0,0 +1,145 @@ +#videos{ + width: 1300px; + top: 120px; + position: absolute; + left: 100px; + margin-top: 10px; + overflow-x: scroll; + display: flex; + align-items: center; + justify-content: space-around; + z-index: 1; + flex-wrap: wrap; +} +#videos ::-webkit-scrollbar{ + height: 30px; + width: 5px; +} +#videos #v{ + margin-bottom: 50px; +} +#v{ + width: 300px; +} +.thumbnail{ + width: 300px; + height: 180px; + background-color: rgb(63, 63, 63); + border-radius: 20px; + margin-bottom: 5px; +} +.information{ + width: 300px; + display: flex; + justify-content: space-between; +} +.profiles{ + width: 30px; + height: 25px; + background-color: red; + border-radius: 100px; +} +.titles{ + width: 310px; + line-height: 20px; +} +.titles h4{ + color: white; + padding: 5px; +} +.titles p{ + color: #999999; + font-size: 14px; + font-weight: 500; +} +.explain{ + width: 5px; + cursor: pointer; +} +.explain img{width: 100%;} +#mainShort{ + width: 1300px; + bottom: -530px; + position: absolute; + left: 100px; + margin-top: 10px; + height: 500px; +} +#s{ + margin-bottom: 10px; +} +#shortBar{ + width: 1300px; + height: 50px; +} +.shortTitle{ + color: white; + display: flex; + justify-content: space-around; + align-items: center; + width: 100px; + font-size: 18px; +} +.shortTitle img{width: 30px;} +.shortThumbnail{ + width: 200px; + height: 340px; + background-color: blue; + border-radius: 20px; + margin-bottom: 12px; +} +.shortName{ + margin: 0 auto; + width: 200px; + color: white; + font-size: 16px; + display: flex; + justify-content: space-between; +} +.shortName img{width: 5px;} +.shortExplain{ + color: #999999; + width: 200px; + margin: 0 auto; +} +.shortShow{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + height: 400px; + overflow: hidden; +} +#line{ + width: 1300px; + background-color: #999999; + height: 1px; + position: absolute; + bottom: 20px; +} +#line-in{ + border-radius: 20px; + padding: 10px 200px; + background-color: black; + color: white; + position: absolute; + left: 450px; + bottom: 0; + border: 1px solid #999999; + cursor: pointer; + z-index: 5; +} +#line-in2{ + border-radius: 20px; + padding: 10px 200px; + background-color: black; + color: white; + position: absolute; + left: 450px; + bottom: 0; + border: 1px solid #999999; + cursor: pointer; + z-index: 5; + display: none; +} +.one{display: block;} +.two{display: block;} diff --git "a/\352\263\274\354\240\2341/\354\234\240\355\212\255.js" "b/\352\263\274\354\240\2341/\354\234\240\355\212\255.js" new file mode 100644 index 0000000..14e6336 --- /dev/null +++ "b/\352\263\274\354\240\2341/\354\234\240\355\212\255.js" @@ -0,0 +1,99 @@ +document.getElementById("voice").addEventListener("mouseover", function(){ + document.getElementById("subText-voice").style.display = "block"; +}); +document.getElementById("voice").addEventListener("mouseleave", function(){ + document.getElementById("subText-voice").style.display = "none"; +}); +document.getElementById("alarm").addEventListener("mouseover", function(){ + document.getElementById("subText-bell").style.display = "block"; +}); +document.getElementById("alarm").addEventListener("mouseleave", function(){ + document.getElementById("subText-bell").style.display = "none"; +}); + +document.getElementById("video").addEventListener("mouseover", function(){ + document.getElementById("subText-video").style.display = "block"; +}); +document.getElementById("video").addEventListener("mouseleave", function(){ + document.getElementById("subText-video").style.display = "none"; +}); + +document.getElementById("searchButton").addEventListener("mouseover", function(){ + document.getElementById("subText-search").style.display = "block"; +}); +document.getElementById("searchButton").addEventListener("mouseleave", function(){ + document.getElementById("subText-search").style.display = "none"; +}); +document.getElementById("searchButton").addEventListener("click", function(){ + document.getElementById("bar").style.display = "block"; + document.getElementById("voice").style.display = "none"; + document.getElementById("box1").style.display = "none"; + document.getElementById("searchButton").style.display = "none"; + List.style.display = "none"; + document.getElementById("logo").style.display = "none"; + document.getElementById("back").style.display = "block"; +}); +document.getElementById("back").addEventListener("click", () => { + document.getElementById("bar").style.display = "none"; + document.getElementById("voice").style.display = "flex"; + document.getElementById("box1").style.display = "flex"; + document.getElementById("searchButton").style.display = "block"; + List.style.display = "flex"; + document.getElementById("logo").style.display = "block"; + document.getElementById("back").style.display = "none"; +}); +const sideBar = document.getElementById("sideBar"); +let isScrolling; +sideBar.addEventListener("mouseover", ()=> { + sideBar.classList.remove('hide-scrollbar'); +}); +sideBar.addEventListener("mouseleave", ()=> { + sideBar.classList.add('hide-scrollbar'); +}); + sideBar.addEventListener('scroll', () => { + sideBar.classList.remove('hide-scrollbar'); + + clearTimeout(isScrolling); + + isScrolling = setTimeout(() => { + sideBar.classList.add('hide-scrollbar'); + }, 1000); // 1초 후에 스크롤바 숨기기 + }); + +const search = document.getElementById("search"); + +const line = document.getElementById("line-in"); +line.addEventListener("click", ()=>{ + line2.style.display = "block"; + line.style.display = "none"; + document.getElementById("shortShow").style.height = "1000px"; + document.getElementById("shortShow").style.transition = "0.5s"; + line2.style.bottom = "-520px"; + document.getElementById("line").style.bottom = "-500px"; +}) + +const line2 = document.getElementById("line-in2"); + +line2.addEventListener("click", () =>{ + line2.style.display = "none"; + line.style.display = "block"; + document.getElementById("shortShow").style.height = "400px"; + line.style.transition = "0.5s"; + line.style.bottom = "0px"; + document.getElementById("line").style.bottom = "20px"; +}) + + +const List = document.getElementById("List"); +List.addEventListener("click", () =>{ + const stylesheet = document.getElementById("stylebar"); + const stylesheet2 = document.getElementById("stylebar2"); + if(stylesheet.getAttribute('href') === 'style.css'){ + stylesheet.setAttribute('href', 'style3.css'); + stylesheet2.setAttribute('href', 'style4.css'); + } + else { + stylesheet.setAttribute('href', 'style.css'); + stylesheet2.setAttribute('href', 'style2.css'); + } +}); \ No newline at end of file