주간 학습
6주차_210806
다른 파일에 있는 변수/함수를 사용하고 싶을 때 사용 1. export 2. import [참고] https://c17an.netlify.app/blog/javascript/%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/article/ 찬미니즘 배움과 도전을 즐기는 공대생의 기록입니다. c17an.netlify.app [참고] https://han-um.tistory.com/17 JWT의 개념, 프론트엔드에서 해야 할 일 진행중인 프로젝트에서 기존의 SessionStorage를 사용하는 방법과 달리, JWT Token을 통해 사용자 인증을 진행할 것을 요구했다. JWT라는 것이 여러 글들을 살펴봐도 다소 장황하게 설명되어있고, 그냥 han-um.tis..
5주차_210726
1. google fonts 검색 원하는 글꼴을 찾고 'select this style'을 눌러 원하는 글꼴을 선택함 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. import 하기 1) import 방식 @import url(' ') 부분을 복사하여 css파일 복붙 3. css에 font-family 추가 해당 코드를 복붙하여 css body{}에 추가 [참고] https://velog.io/@jehjong/CSS%EC%97%90-%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%..
4주차_210723
list item을 위/아래로 drag할 때 영역을 벗어나면 자동 scroll $(function () { $("#image_container").sortable({ scroll: true, // 가장 자리에서 자동 scroll, default(true) scrollSensitivity: 10, // 스크롤 민감도(얼마나 스크로 될 것인지), default(20) scrollSpeed: 10, //스크롤 속도, defualt(40) containment: "document", // drag 영역 제한(화면안으로) // sort되는 동안 이벤트 sort: function (event, ui) { // sort 되는 동안 border 설정 ui.item.context.classList.add("drag-ef..
4주차_210722
여러개 문자열을 +를 쓰지 않고 나타낼 수 있음 백틱(``): 키보드 ~ 위에 표시된 것 `$(변수명)` const num = 0; const str = `내 순서는 ${num} 입니다.`; drag를 통해 자식 순서를 바꿀 수 있는 list 1) html 에 2) sortable을 적용하고 싶은 리스트 태그(div, ul 등등) id를 위에서 설정한 것과 동일하게 설정 여기서는 sortable(다른 이름으로 하고싶다면 바꾸어도 상관X) script function id = 리스트 태그 id Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 [참고] sortable jquery https://jqueryui.com/sortable/ Sortable | jQuery U..
4주차_210721
accept: 입력가능한 파일 유형 지정 1) 특정 확장자로 지정: 2) 미디어 타입으로 지정: defualt는 모든 입력 파일 입력O ,로 구분하여 여러 종류 입력O "사용자 지정 파일"을 "모든 파일"로 변경할 경우, 다른 파일도 첨부O(특정 파일 형식만 입력하도록 강제하기 위해서 javascript 추가 코드 필요) multiple: 한 번에 여러개 파일 선택(업로드) 가능 여부(boolean) required: 필수 선택 여부(boolean) [참고] https://hianna.tistory.com/346 [HTML] input type='file' 속성 알아보기 ( 파일 입력 ) 웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 ..
4주차_210720
static: default 상태(왼→오, 위→아래 로 쌓임) relative top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조정 태그가 static이었을 때 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀( 안쪽: -, 바깥쪽: +)만큼 이동 absolute position: static 이 아닌 부모를 기준으로 이동 부모 중에 position: relative, absolute, fixed인 태그가 없다면 최상위 태그(body)가 기준 fixed 스크롤 움직여도 항상 고정된 위치 top, bottom, right, left 값에 의해 최종 위치 결정 sticky 해당 요소를 감싸고 있는 컨테이닝 블록이 지정된 임계값을 넘..
