HTML
-
File Upload 다중 파일을 선택하여 업로드하는 기능 구현 중요 기능 - 업로드 - 업로드 경로 - 업로드 저장 세부 기능 - 업로드 진행바 - 업로드 파일 형식 제한(검증) - 업로드 미리보기 - 업로드된 파일 다운로드 기술스텍 Java, Spring, JavaScript, JQuery, Ajax, HTML Apache Tomcat v9.0 업로드 | 화면 화면에서 업로드할 파일을 구성하고 서버에서 받을 파일 형식을 설정해 지정된 경로로 저장 multiple: 파일 선택시 다중 파일을 선택할 수 있다. accept: 파일 확장자를 지정해서 원하는 확장자만 보이게 한다. FormData: Ajax로 폼 전송을 가능하게 하게 함 - JSON 구조로 "KEY-VALUE" (키와 값) 구조로 데이터를 전..
Spring | File UploadFile Upload 다중 파일을 선택하여 업로드하는 기능 구현 중요 기능 - 업로드 - 업로드 경로 - 업로드 저장 세부 기능 - 업로드 진행바 - 업로드 파일 형식 제한(검증) - 업로드 미리보기 - 업로드된 파일 다운로드 기술스텍 Java, Spring, JavaScript, JQuery, Ajax, HTML Apache Tomcat v9.0 업로드 | 화면 화면에서 업로드할 파일을 구성하고 서버에서 받을 파일 형식을 설정해 지정된 경로로 저장 multiple: 파일 선택시 다중 파일을 선택할 수 있다. accept: 파일 확장자를 지정해서 원하는 확장자만 보이게 한다. FormData: Ajax로 폼 전송을 가능하게 하게 함 - JSON 구조로 "KEY-VALUE" (키와 값) 구조로 데이터를 전..
2023.02.06 -
내배캠에서 미니프로젝트를 진행하면서, 나의 야심작 사진을 갤러리 식으로 기능 부여하던 중 배우게 된 이미지 슬라이드 한 번 배워보자. 생각보다 자바스크립트가 없이는 생각으로 담고 있던 기능을 구현할 수 있는 범위가 적었다. 자바스크립트의 소중함.. 리스펙.. 아직 자바스크립트가 익숙하지 않은 나에게는 HTML/CSS 로 근접하게 구현이 가능한 이미지 슬라이드를 배워보았다. 기본적으로 알아야할 radio 박스의 개념에 대해서 알고 갈 필요가 있다. input 에서 type="radio" 속성을 사용할 수 있는데, radio 속성은 한 번 클릭 시 해제가 안되며, name="slide" 으로 묶은 input 들은 하나의 그룹이 되어 여러 input 중 하나만 체크가 되는 효과를 가지고 있다. input 은 ..
HTML/CSS | 이미지 슬라이드내배캠에서 미니프로젝트를 진행하면서, 나의 야심작 사진을 갤러리 식으로 기능 부여하던 중 배우게 된 이미지 슬라이드 한 번 배워보자. 생각보다 자바스크립트가 없이는 생각으로 담고 있던 기능을 구현할 수 있는 범위가 적었다. 자바스크립트의 소중함.. 리스펙.. 아직 자바스크립트가 익숙하지 않은 나에게는 HTML/CSS 로 근접하게 구현이 가능한 이미지 슬라이드를 배워보았다. 기본적으로 알아야할 radio 박스의 개념에 대해서 알고 갈 필요가 있다. input 에서 type="radio" 속성을 사용할 수 있는데, radio 속성은 한 번 클릭 시 해제가 안되며, name="slide" 으로 묶은 input 들은 하나의 그룹이 되어 여러 input 중 하나만 체크가 되는 효과를 가지고 있다. input 은 ..
2023.01.02 -
Element select input text나 textarea 요소를 드래그한 듯이 선택하기 위해 사용 select | selectAll 시각화할 요소 선택 d3.select("body") .selectAll("p") // 실행 selectAll 의 결과값
Element select();Element select input text나 textarea 요소를 드래그한 듯이 선택하기 위해 사용 select | selectAll 시각화할 요소 선택 d3.select("body") .selectAll("p") // 실행 selectAll 의 결과값
2023.01.02 -
autofocus 정의 태그의 autofocus 속성은 페이지가 로드될 때 자동으로 포커스(focus)가 요소로 이동됨을 명시 특징 autofocus 속성은 불리언(boolean) 속성입니다. 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다 HTML과 XHTML에서의 차이점 XHTML에서는 속성값을 생략할 수 없으므로, 다음과 같이 속성명과 속성값을 모두 명시해야만 합니다. 출처 | TCPSCHOOL.COM
Input | autofocusautofocus 정의 태그의 autofocus 속성은 페이지가 로드될 때 자동으로 포커스(focus)가 요소로 이동됨을 명시 특징 autofocus 속성은 불리언(boolean) 속성입니다. 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다 HTML과 XHTML에서의 차이점 XHTML에서는 속성값을 생략할 수 없으므로, 다음과 같이 속성명과 속성값을 모두 명시해야만 합니다. 출처 | TCPSCHOOL.COM
2023.01.02 -
HTML의 event 종류 개요 Javascript의 Module Pattern을 사용하여 해당 스크립트를 재사용 할 수 있는 장점 다른 소스와 섞이지 않고, 해당 모듈을 통해서 완전한 기능을 제공 종류 onabort 이미지 로딩에서 이탈하였을 때(다른 연결로 이동) onactivate 개체의 activeElement 속성을 설정하였을 때 onafterprint 관련된 문서를 인쇄하거나 인쇄 미리보기를 후 즉시 onbeforeactivate 개체의 activeElement 속성이 설정되기 바로 전에 onbeforecopy 선택된 내용이 시스템 클립보드(clipboard)로 복사하기 바로 전에 onbeforecut 선택된 내용이 시스템 클립보드(clipboard)로 잘라내기 바로 전에 onbeforedea..
Event | HTML의 event 종류HTML의 event 종류 개요 Javascript의 Module Pattern을 사용하여 해당 스크립트를 재사용 할 수 있는 장점 다른 소스와 섞이지 않고, 해당 모듈을 통해서 완전한 기능을 제공 종류 onabort 이미지 로딩에서 이탈하였을 때(다른 연결로 이동) onactivate 개체의 activeElement 속성을 설정하였을 때 onafterprint 관련된 문서를 인쇄하거나 인쇄 미리보기를 후 즉시 onbeforeactivate 개체의 activeElement 속성이 설정되기 바로 전에 onbeforecopy 선택된 내용이 시스템 클립보드(clipboard)로 복사하기 바로 전에 onbeforecut 선택된 내용이 시스템 클립보드(clipboard)로 잘라내기 바로 전에 onbeforedea..
2023.01.02 -
HTML / JavaScript form 태그 중에서 event 를 설정 할 때 onsubmit : form의 값을 전송하기 전에 어떤 작업을 하게 할 수 있음 onsubmit="return 함수()" return을 추가하면 submit을 하기 전에 함수를 먼저 실행하고, 결과(true, false)에 따라 submit이 발생 return을 사용하지 않으면 유효성 결과에 상관없이 함수를 실행 : form태그를 지칭하는 this를 이용해 object로 정의하고, 각 input의 name별로 해당하는 값 등의 정보를 이용할 수 있다.
Event | onsubmit returnHTML / JavaScript form 태그 중에서 event 를 설정 할 때 onsubmit : form의 값을 전송하기 전에 어떤 작업을 하게 할 수 있음 onsubmit="return 함수()" return을 추가하면 submit을 하기 전에 함수를 먼저 실행하고, 결과(true, false)에 따라 submit이 발생 return을 사용하지 않으면 유효성 결과에 상관없이 함수를 실행 : form태그를 지칭하는 this를 이용해 object로 정의하고, 각 input의 name별로 해당하는 값 등의 정보를 이용할 수 있다.
2023.01.02 -
제출용 github : https://github.com/DHL68/github-DHL68/tree/main/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%BA%A0%ED%94%84/project/p-instargram-desktop-UI-clone/leenstargram/templates/index 구현 - 네비게이션 바 레이아웃(position: fixed) - 네비게이션 바 home, search, menu icon - 스토리 레이아웃 - 스토리 그라데이션 테두리 - 피드 레이아웃 - 피드 사진 carousel - 피드 글 word-break 자동 줄넘김 - 피드 modal popup - 반응형 웹 media query - 시연 오류를 통해 배우는 기능 노트 1) 피드를 하..
TIL_220502_인스타 데스크탑 UI 클론제출용 github : https://github.com/DHL68/github-DHL68/tree/main/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%BA%A0%ED%94%84/project/p-instargram-desktop-UI-clone/leenstargram/templates/index 구현 - 네비게이션 바 레이아웃(position: fixed) - 네비게이션 바 home, search, menu icon - 스토리 레이아웃 - 스토리 그라데이션 테두리 - 피드 레이아웃 - 피드 사진 carousel - 피드 글 word-break 자동 줄넘김 - 피드 modal popup - 반응형 웹 media query - 시연 오류를 통해 배우는 기능 노트 1) 피드를 하..
2023.01.01 -
개인 프로젝트 인스타 데스크탑 UI 클론 github : https://github.com/DHL68/github-DHL68/tree/main/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%BA%A0%ED%94%84/project/p-instargram-desktop-UI-clone/leenstargram/templates/index 무엇을 느꼈는가. 코드 하나 하나 지저분하지만 나의 색깔이 묻어나는 코드. 지금은 바르지 못한 선을 띄고 있지만, 반복과 나만의 노하우를 조금씩 배워나간다면, 언젠간 올곧은 선을 띄고 있지 않을까 생각한다. 벌써 막바지에 들어선 마감일자. 주요 목표를 충족시키며, 더 욕심을 내어 추가 기능까지 구현하려 했지만, 욕심만큼 구현할 수 없었던 현실이 잔혹..
TIL_220501_인스타 데스크탑 UI 클론개인 프로젝트 인스타 데스크탑 UI 클론 github : https://github.com/DHL68/github-DHL68/tree/main/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%BA%A0%ED%94%84/project/p-instargram-desktop-UI-clone/leenstargram/templates/index 무엇을 느꼈는가. 코드 하나 하나 지저분하지만 나의 색깔이 묻어나는 코드. 지금은 바르지 못한 선을 띄고 있지만, 반복과 나만의 노하우를 조금씩 배워나간다면, 언젠간 올곧은 선을 띄고 있지 않을까 생각한다. 벌써 막바지에 들어선 마감일자. 주요 목표를 충족시키며, 더 욕심을 내어 추가 기능까지 구현하려 했지만, 욕심만큼 구현할 수 없었던 현실이 잔혹..
2023.01.01