FRONT-END (15) 썸네일형 리스트형 뉴렉처 자바스크립트 유튜브 뉴렉처 채널의 자바스크립트 강의 정리글 자바스크립트는 국비 과정에서 프젝을 하면서 그때그때 구현에 필요한 것들만 찾아서 써본 게 전부였기 때문에 체계적으로 공부해보고 싶어 서블릿, 스프링 강의로 많은 도움을 얻은 뉴렉처 채널의 자바스크립트를 찾아 듣게 됐다. 로드화 HTML 파일이 프로그램으로 접근할 수 있도록 객체화되는 작업 window 브라우저 창 제어 window.location 주소창 제어 (플랫폼) window.history 페이지의 목록 순회 (뒤로가기, 앞으로가기) window.document 문서 내용 제어 폼 객체의 유효성 검사 사용자가 입력한 값 확인 유효한 값이 입력되었을 때만 서버로 전송될 수 있도록 한 것 초창기 자바스크립트는 폼객체를 이용해 문서에 있는 데이터를 검사하기 .. 자바스크립트 정렬 및 배열에서 검색 후 제거 캘린더에서 각각의 날짜 영역을 선택할 때마다 해당 값을 읽어와 input태그에 추가시키고한번 더 클릭시 선택을 해제하며 해당 값을 제거하고 싶었다. 사실 datepicker를 가져와 쓰면 간단하게 해결될 문제였을텐데, 어쩌다보니 반 이상을 직접 구현하게 되어 별개의 일자를 정렬시키고 처리 시키는 일이 필요했다. 문제는 어떻게 정렬시킬 것인가? 그리고 어떤 형태로 DB에 넣을 것인가? 어디서 처리할것인가?(컨트롤러? 뷰단?) 1. 컨트롤러에서 처리split()으로 잘라 배열에 넣고, List로 변경하여 sort()를 통해 정렬그러나 문제는 DB에 어떻게 넣을건지였다.처음에는 요청별로 휴가 시작일과 종료일을 넣으려다가, 7/8 7/9 7/20 이런식으로 연속되다가 연속되지 않은 일자들이 존재할 때어떻게 연속.. 캘린더 구현(자바스크립트) 해당 링크의 소스와 설명을 바탕으로 작성했고, 정리를 위해 쓰는 글 더보기 let CDate = new Date(); let today = new Date(); buildCalendar(); function buildCalendar(){ let prevLast = new Date(CDate.getFullYear(), CDate.getMonth(), 0); //지난달 마지막날짜 let thisFirst = new Date(CDate.getFullYear(), CDate.getMonth(), 1); //이번달 첫날 let thisLast = new Date(CDate.getFullYear(), CDate.getMonth() + 1, 0); //이번달 마지막날 document.querySelector(".ye.. 선택자 총정리 이제 막 웹 제작을 배우는 입장에서 원하는 위치에 요소가 오지 않을 때 점검해보면 다음과 같았다. 1. width, height값이 잘못됨 2. position이 부모와의 관계를 고려하지 않음 3. 선택자를 잘못 지정 여러 웹들을 참고해서 만들다보니 내가 쓰는 선택자들임에도 네이밍이 일관적이지 않고, 가독성이 떨어져서 선택자에 대한 정리를 찾아보다가 너무 유용한 동영상을 발견했다. 웹디자인&퍼블리셔를 위한 선택자 총정리 요즘 공부하면서 계속해서 느끼는데, 양질의 컨텐츠가 무료로 정말 많이 풀려 있는데 비교적 진입장벽이 있는 분야다보니까(?) 컨텐츠 퀄리티에 비해 조회수나 구독수가 몇 안돼서 매번 놀라고 있다. 여튼 이런 자료 공유해주시는 분들 정말 고맙다. 유형 선택자(Type Selector) 태그에 .. Web 구현 중 기능 정리 Position 01 static 기본값으로 element가 원래 있어야할 위치 02 relative 부모 element와의 관계가 포인트 부모와의 관계를 기준으로 static 위치가 정해지면, left | right | top | bottom을 지정할 때 이동 03 absolute 부모 element와의 관계성이 부분 단절 width를 지정하지 않으면 자신의 content 크기만큼 크기 지정됨 offset을 지정하지 않으면 부모 아래 위치 why? 기본값으로 left, top값이 부모 offset만큼 설정되어 있기 때문 부모 element들 자식 element의 position:absolute position: static 부모와 완전 무관, HTML의 시작점(0,0)을 기준으로 시작 top, left.. 생활코딩 CSS 웹브라우저는 원칙적으로 HTML을 읽음 CSS는 전혀 다른 문법으로, 웹에 적용하기 위해 HTML 식 (style 태그 안)으로 적어줘야 함. HTML이 정보의 기능에 집중할 수 있게 하기 위해 CSS가 디자인을 전담하는 게 훨씬 효율적이기 때문에 웹페이지의 유지 보수의 효과, 가독성을 위해 CSS 사용 필수 웹페이지에 CSS를 사용하는 법 1. WEB HTML CSS JavaScript a { color:red; } a - Selector(선택자) | color:red; - Declaration(선언, 효과) color - Property(속성) | red - Value(값) 검색방식 예시 : css text size property Property 암기할 필요 없음, 자동완성되고 검색 금방 할 수 있.. 생활코딩 HTML 요약 # 필수기본태그 굵게 밑줄 제목 웹에 대한 랭크 사이트 줄바꿈, 닫지 않음(즉 쌍이 아님) 단락 (paragraph) 부모태그(구분짓기 위해) list1(항목) list2(항목) Ctrl+화살표 : 커서 여러개 한번에 입력가능 # ol과 ul의 차이 orderedList unorderedList cf. 단락 사이의 간격을 정교하게 조절하고 싶을 때 CSS (좀더 정교함) //src : source 저작권 무료 이미지 사이트 이 문서가 html이라는 관용적 표현 최상위 태그 본문 시작 WEB HTML CSS W3C에 의해 발표 html specification html 명세(만드는 법, 사용법) 링크 태그 (hyper reference) //링크 새탭 툴팁(클릭하면 작은 박스로 알려줌) # 인터넷의 작동 .. CSS 스타일 기초 CSS 선언의 적용 순서 1) 중요도 결정은 중요성으로 결정하며 1단계가 최우선으로 적용됨 1단계 사용자 스타일 시트가 최우선 ( ex. 저시력자, 색약자 개인 고대비 설정) --> 2단계 제작자가 만든 스타일 중 !important가 붙은 스타일 ----> 3단계 제작자가 만든 일반 스타일 -------> 4단계 기본적인 브라우저 스타일 시트 하나의 요소에 여러 스타일이 적용될 경우 어떤 스타일로 만들어지나? cf. 범위로 볼 때는 id < class < 태그로 태그(p, ...)가 가장 크다. 2) 적용 범위 1위 인라인 스타일 - 특정 위치만 스타일 적용, 태그 안에 스타일 적용 2위 id스타일 - #기호 3위 class 스타일 - . 기호 4위 태그 스타일 더보기 Who am I? .. 이전 1 2 다음
