Giant Danio Fish
본문 바로가기

CodingKing168

슬라이더 이펙트 - 좌로 움직이기(연속) 슬라이더 효과 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 이번에는 사진을 우에서 좌로 한칸씩 땡겨가면서 다음사진으로 넘어가고, 5개의 사진이 연속적으로 계속 나오는 슬라이드를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 CSS 작성 이미지 5번에서 1번으로 돌아갈때 부드럽게 넘어가기 위하여 가상변수6번도 이미지1번으로 만들어줍니다. @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .s.. 2022. 9. 1.
사이트 만들기 - 이미지 텍스트 유형 사이트 만들기 텍스트 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: "NexonLv1Gothic"; font-weight: 400; } /* reset */ * { margin: .. 2022. 9. 1.
사이트 만들기 - 헤더 유형 사이트 만들기 텍스트 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: "NexonLv1Gothic"; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } i.. 2022. 9. 1.
요소 크기 메서드 위치 및 크기를 표현하는 속성 메서드 안녕하세요 오늘은 위치 및 크기를 표현하는 속성 메서드에 대해서 알려드리겠습니다. 속성 메서드 설명 메서드 설명 clientWidth 요소의 가로(패딩 포함, 보더/마진 미포함) clientHeight 요소의 세로(패딩 포함, 보더/마진 미포함) clientTop 요소의 Y축값(부모기준) clientLeft 요소의 X축값(부모기준) offsetWidth 요소의 가로(패딩/보더 포함, 마진 미포함) offsetHeight 요소의 세로(패딩/보더 포함, 마진 미포함) offsetTop 요소의 X축값(문서기준) offsetLeft 요소의 Y축값(문서기준) element.getBoundingClientRect 크기 및 위치 속성 메서드 예시 See the Pen Untitl.. 2022. 9. 1.
사이트 만들기 - 텍스트 유형03 사이트 만들기 텍스트 유형03 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 한 영역을 텍스트로 클래스 선언하고 그 내부도 위 가운데 아래로 나눕니다 코드보기 겨울왕국 팝송 듣다가 문득 겨울왕국 노래가 나오길래 써보는 일기장 나는 팝송을 듣고있었는데 왜 몇년전 노래가 나오는가 언젯적 Into the unknown인가.. 노래는 좋네..내일 시험인데 합격할수 있을까.. 잠이 계속 든다.. 눈도 감긴다.. 눈이 감겨서 눈이 오는 겨울왕국노래가 나오는건가.. 내가 무슨소리 하고있는지 나도모르겠다. 아무튼 모두 시험 화이팅 합격기원 김엘사 만 37세 자러 가기 나는 팝송을 듣고있었는데 왜 몇년전 노래가 나오는가 언젯적 Into the unknown인가.. 노래는 좋네..내일 시험인데 합.. 2022. 8. 30.
jQuery - 탐색 선택자 jQuery 탐색 선택자 오늘은 탐색 선택자에 대해서 알려드리겠습니다. 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closet() $("p").closet("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택합니다. nextUntil(.. 2022. 8. 30.
jQuery - 필터 선택자 jQuery 필터 선택자 필터 선택자란 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 필터 선택자 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") s마지막 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. .lt() $("li:lt.. 2022. 8. 30.
사이트만들기 - 텍스트유형02 사이트 만들기 텍스트 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 playList 플레이리스트 들어보기 다양한 유형의 플레이리스트를 여러분들께 소개합니다 지금 감상하시죠 비오는날 듣기좋은 리스트 비오는날 듣기좋은 플레이 리스트입니다 비오는날 듣기좋은 플레이 리스트입니다 비오는날 듣기좋은 플레이 리스트입니다 여행에서 듣기좋은 리스트 여행에서 듣기좋은 플레이 리스트입니다 여행에서 듣기좋은 플레이 리스트입니다 여행에서 듣기좋은 플레이 리스트입니다 클럽에서 자주듣는 리스트 클럽에서 자주 듣는 플레이 리스트입니다 클럽에서 자주 듣는 플레이 리스트입니다 클럽에서 자주 듣는 플레이 리스트입니다 낮잠잘때 듣기좋은 리스트 낮잠잘때 듣기 좋은 플레이 리스트입니다 낮잠잘때 듣기 좋은.. 2022. 8. 30.
jQuery - 속성 선택자 jQuery 속성 선택자 jQuery 속성 선택자에 대해서 알려드리겠습니다. 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다.'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않.. 2022. 8. 30.
jQuery - 기본 선택자 jQuery 기본 선택자 jQuery 기본 선택자에 대해서 알려드리겠습니다. jQuery의 선택자의 형식은 다음과 같습니다. $("선택자") $("#gnb") 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다 class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다. 형제 선택.. 2022. 8. 30.
사이트만들기 - 텍스트유형01 사이트 만들기 텍스트 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 텍스트 유형01 노래 플레이리스트 모음 카페에서 듣기좋은 리스트 카페에서 듣기좋은 플레이 리스트입니다 카페에서 듣기좋은 플레이 리스트입니다 카페에서 듣기좋은 플레이 리스트입니다 더보기 비오는날 듣기좋은 리스트 비오는날 듣기좋은 플레이 리스트입니다 비오는날 듣기좋은 플레이 리스트입니다 비오는날 듣기좋은 플레이 리스트입니다 더보기 시간가는줄 모르는 플레이리스트 듣느라 시간가는줄 모르는 플레이리스트요 듣느라 시간가는줄 모르는 플레이리스트요 듣느라 시간가는줄 모르는 플레이리스트요 더보기 X톡 하면서 듣기좋은 리스트 X톡 하면서 듣기좋은 플레이 리스트입니다 X톡 하면서 듣기좋은 플레이 리스트입니다 X톡 하면.. 2022. 8. 30.
CSS - jQuery 알아보기 jQuery 알아보기 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다. 사용방법에 대해 알려드리겠습니다. Download 방식 https://jquery.com/download 에 접속하여 'Download the compressed, production jQuery 3.3.1'을 다운로드 합니다. 그 후에 hmtl 문서를 jQuery 라이브러리와 같은 경로에 저장합니다. 예시 결과 jQuery 시작 CDN 방식 https://code.jquery.co.. 2022. 8. 29.
CSS - GSAP 알아보기 GSAP 알아보기 GSAP은 웹 브라우저에서 탁월한 애니메이션을 구현하기 위한 자바스크립트 라이브러리입니다.GSAP은 기존의 CSS 애니메이션과 JavsScript 애니메이션보다 사용성이 편하고, 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다. 사용방법 GASP홈페이지에서 gsap.min.js를 가져와서 사용할 수 있습니다. 예시 아래의 예시는 코드팬에 GSAP에서 아주 잘 만든 예제이기에 한번 보시라고 가져왔습니다. 이처럼 GSAP는 자바스크립트에서 만들 수 없는 부드럽고 섬세한 애니메이션을 훨신 .. 2022. 8. 29.
CSS 애니메이션 연습하기02 CSS 애니메이션 연습하기 오늘은 간단하게 css 애니메이션을 이용해서 두개의 원이 돌아가는것을 만들어 보겠습니다. 결과 See the Pen Loading Circle by younghwan12 (@younghwan12) on CodePen. HTML HTML에 로딩태그 안에 원을 두개 만들거니 두개의 서클태그를 span태그로 만들어줍니다. CSS 배경색은 그라데이션을 넣어줍니다. 로딩을 position absolute를 이용해 정 중앙에 만들고, 크기값을 넣어서 영역을 만들어줍니다. 그리고 각각 원을 만들어 로딩 영역 끝에 배치를 해준뒤에 로딩태그에 애니메이션을 넣어서 회전하는듯한 모습을 표현했습니다. body { height: 100vh; background-image: linear-gradient.. 2022. 8. 29.
CSS 애니메이션 연습하기01 CSS 애니메이션 연습하기 오늘은 간단하게 css 애니메이션을 이용해서 굴러가는듯한 박스를 만들어 보겠습니다. 결과 See the Pen box by younghwan12 (@younghwan12) on CodePen. HTML HTML에는 뭐 만들거 없이 div태그로 박스를 하나 만들어줍니다. CSS 구조는 어렵지 않습니다. 배경색은 그라데이션 효과를 이용해서 색을 넣었습니다. 박스의 크기값을 50px 50px position absolute를 이용해 가운데에 만들고, before라는 가상변수를 만들어 바닥에 그림자를 만든후에, after라는 가상변수는 애니메이션 효과를 주어 각각 0~100퍼센트 사이에 y축으로 이동하고, 22.5도씩 회전시켜서 굴러가는듯한 이미지를 만들었습니다. body { heig.. 2022. 8. 29.
슬라이더 이펙트 - 좌로 움직이기 슬라이더 효과 슬라이드 이펙트 - 좌로 움직이기 이번에는 사진을 우에서 좌로 한칸씩 땡겨가면서 다음사진으로 넘어가는 효과를 줘보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 HTML 틀은 기존 틀과 동일하지만 slider 클래스에 slider__inner로 감싸주었습니다. CSS 작성 마찬가지로 전체적인 CSS는 동일하지만 slider을 감싸고있는 slider__inner에 flex를 사용해서 사진을 일열로 세운뒤, 이미지가 보일 영역에 overflow hidden을 줘서 나머지 사진들을 안보이게 설정했습니다. .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: ce.. 2022. 8. 29.
슬라이더 이펙트 - 트랜지션 효과 슬라이더 효과 슬라이드 이펙트 - 트랜지션 효과 오늘은 사진을 트랜지션 효과를 줘서 2초마다 사진이 바뀌는 사이트를 제작해보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 HTML 틀은 slider__wrap -> slider__img -> slider 클래스 순으로 구성했습니다. CSS 작성 이미지를 position: absolute로 한곳에 모아서 겹치게 만들어놓고, nth-child(n)를 사용해 사진 각각에 z-index값을 줘서 순서를 매겨놓았습니다. .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { positio.. 2022. 8. 29.
CSS 요소숨기기 요소 숨기기 안녕하세요. 오늘은 css를 이용해서 요소를 안보이게 하는방법을 알려드리겠습니다. display: none display: none 는 렌더링트리와 접근성 트리에서 사라지게 합니다. .button { display : none; } visibility: hidden visibility: hidden은 렌더링트리와 접근성 트리에서 사라지게 합니다. hidden은 별도의 CSS가 없이도 HTML을 통해서 완전히 마스킹할 수 있어서 편리한 점이 있습니다. .button { visibility: hidden; } opacity: 0 opacity: 0은 엘리먼트의 요소를 안보이게 하지만, visibility: hidden과 마찬가지로 빈공간이 남아 있게 됩니다. 이 콘텐츠에 접근할 수 있는지 여부는.. 2022. 8. 25.
퀴즈만들기 - 객관식(여러문제)슬라이드 유형 퀴즈 효과 객관식(여러문제) 확인하기 : 슬라이드 형식 오늘은 화면에 한문제씩 나오면서 문제를 풀면 다음문제로 넘어가는 스크립트를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 문제번호와 문제, 보기는 공통요소이므로 HTML에서 지우고 스크립트로 넣어주겠습니다. 정답입니다! 틀렸습니다! 다음 문제 보기 CSS 작성 기존과 딱히 변화 없습니다. JS 작성 문제 번호를 클릭하면 문제의 정답 유무를 파악하고 다음문제로 넘어갈 수 있는 버튼을 보이게 설정하였으며, 마지막 문제를 풀었을 때 총 문제 수 중에 맞은 문제를 출력할 수 있도록 제작하였습니다. 펼쳐 보기 //선택자 const quizType = document.querySelector(".quiz__type") //유형 cons.. 2022. 8. 24.
일러스트레이터 - 사슴 만들기 사슴 만들기 안녕하세요. 오늘은 스케치 되어있는 사슴을 만들어보겠습니다. 사슴 그리기 딱히 설명할 과정이 없네요.. 펜툴로 열심히 그려줍시다. 지금부터 제작과정을 감상하시죠. 2022. 8. 24.
퀴즈 만들기 - 객관식(여러문제)유형 퀴즈 효과 객관식(여러문제 유형) 오늘은 화면에 여러문제를 표현한뒤 마지막에 결과확인 버튼을 누르면 점수가 나오는 유형을 만들어보겠습니다. 또한 quizScore라는 변수를 0으로 설정하고 맞을때마다 quizScore++를 사용해 마지막 정답버튼을 눌렀을 때 총 맞은 개수가 나오게 출력하였습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 기존에 body태그에 있던 코드들은 script로 넣어줄것이므로 quiz__wrap만 빼고 전부 지워줍니다. CSS 작성 기존과 딱히 변화 없습니다. JS 작성 퀴즈 번호와 문제, 보기는 공통이므로 (``)템플릿 리터럴을 사용해 넣어줍니다. question(element)값을 입력해서 배열의 순서대로 값이 출력되게 만들었습니다. 펼쳐 보기 const quiz.. 2022. 8. 23.
CSS 색상 표현법 색상 표현법 안녕하세요. 오늘은 CSS에서 색상을 표현하는 방법을 간단히 설명드리겠습니다. 1. 색상명으로 표현 색상의 이름을 나타내는 방법으로, 약 140가지의 색상 이름들이 브라우저에 미리 정의되어 있습니다 ex) red yellow brown... colorname : red colorname : green colorname : blue 결과 확인하기 colorname : red colorname : green colorname : blue 2. RGB값으로 표현 rgb(red, green, blue)와 같은 형식으로 색을 표현합니다. 여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정하여 색상을 결정짓습니다. ex) rgb(255, 255,.. 2022. 8. 23.
CSS 단위 CSS 단위 오늘은 CSS의 단위와 값에대해서 설명드리겠습니다. rem(root em) 가장 익숙할 수 있는 단위로 시작해 보자면 em은 현재의 font-size를 정의합니다. 예시로 body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다. 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 됩니다. 결과적으로 16.8px의 크기가 됩니다.1.2em씩 크기가 커지는 예제를 보여드리겠습니다. See the Pen rem_ex by younghwan12 (@younghwan12) on CodePen. 대부분의 경우, 단순하게 단일 사이즈로 표현하기도 합니다. 이런 경우 바로 rem 단위를 사용하면 됩니다. rem의 "r"은 바로 "root(최상위).. 2022. 8. 23.
Search Effect 03 Search Effect03 검색기능 예제3번입니다. 일단 keyword 박스에 span태그로 알파벳들을 입력해 놓은뒤에 charAt 메서드를 이용해서 첫번째 자리수에 span태그에 만들어놓은 알파벳과 시작하는 알파벳이 동일하면 보이게 설정하고, 틀리면 hide를 add해 숨기는 스크립트를 제작했습니다. 원본 소스 보기 원본 사이트 보기 HTML 작성 1,2번 예제와는 다르게 검색 input박스를 없앤뒤에 keyword 박스를 만들어 span태그로 알파벳들을 넣어서 만들었습니다. charAt()를 이용하여 검색하기 CSS 속성 첫글자 검색하기 a b c d e f g h i j k l m n o p q r s t u v w x y z 전체 속성 갯수 : 0 align-color : align-color .. 2022. 8. 22.
일러스트레이터 - 토끼부자 만들기 일러스트레이터 만들기 안녕하세요. 오늘은 스케치 되어있는 토끼를 만들어보겠습니다. 토끼 그리기 1. 스케치되어있는 그림을 불러와서 배경에 고정시켜둡니다. 2.펜 툴(p)을 이용해 주변 테두리 라인을 따준후 width Tool(Shift+w)을 이용해 생동감있게 크기라인을 따줍니다. 3. Expand를 이용해 잘게 쪼개준 뒤 전체 드래그한 후 Live Paint를 이용해 색칠구역을 잡아줍니다. 4. 원하는색으로 색칠하면 완성! 명암을 그려준후 조금더 어두운 색으로 칠해줍니다. 완성! 2022. 8. 22.
문자열 관련 메서드 charAt() charAt() 안녕하세요. 오늘 소개시켜드릴 문자열 메서드는 charAt()입니다. charAt() charAt() 메서드는 지정한 인덱스의 문자를 추출 해 문자열을 반환합니다. "문자열".charAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.chartAt(); //j const currentStr2 = str1.chartAt("0"); //j const currentStr3 = str1.chartAt("1"); //a const currentStr4 = str1.chartAt("2"); //v 결과 확인하기 j j a v 2022. 8. 22.
문자열 관련 메서드 match() match() 안녕하세요. 오늘 소개시켜드릴 문자열 메서드는 match()입니다. match() match() 메서드는 문자열(정규식)을 검색하고 배열을 반환합니다. "문자열".match("검색값"); "문자열".match(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const currentStr3 = str1.match("r"); //r const currentStr4 = str1.match(/reference/); //reference const current.. 2022. 8. 22.
문자열 관련 메서드 search() search() 안녕하세요. 오늘 소개시켜드릴 문자열 메서드는 search()입니다. search() search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. "문자열".search("검색값"); "문자열".search(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.search("reference"); //11 const currentStr3 = str1.search("j"); //0 const currentStr4 = str1.search("a"); //1 const currentStr5 = str1.searc.. 2022. 8. 22.
함수의 유형 함수의 유형 안녕하세요. 함수의 유형에 대해 설명 드리겠습니다. 함수와 매개변수를 이용한 형태 매개변수를 이용해서 함수를 만들 수 있습니다. function func(num,str1, str2){ document.write(num + ". " + str1 + "가 " + str2 +"되었습니다."); } func("1","함수", "실행"); func("2","자바스크립트", "실행"); func("3","제이쿼리", "실행"); 결과 확인하기 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 제이쿼리가 실행되었습니다. 함수와 변수를 이용한 형태 실행문에 변수를 넣어서 함수를 실행하였습니다. function func(num, str1, str2){ document.write(num +.. 2022. 8. 22.
블록 구조 / 인라인 구조 블록구조 / 인라인구조 오늘은 웹 사이트 제작에 있어 가장 기본이 되는 블록 구조와 인라인 구조에 대해서 알려드리겠습니다. 블록구조 블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 만들어지는 형태입니다. 블록 요소에는 일부를 제외한 블록 요소를 포함하고, 인라인 요소까지 포함 가능합니다. 기본 설정이 블럭인 자주 사용하는 태그들은 다음과 같습니다. div, p, h1~h6, ul, li, ol, table, form, section, footer... 그림으로 설명 드리겠습니다. See the Pen Untitled by younghwan12 (@younghwan12) on CodePen. 인라인구조 인라인 요소는 글자와 같이 옆으로 나열되는 형태로 줄 바.. 2022. 8. 19.
광고 준비중입니다

티스토리툴바