본문 바로가기

Spring-Java59

Day42_배열, 배열의 다양한 기능 2023.10.17 Day42 네 줄 요약 push와 unshift를 통해 배열에 값을 추가로 삽입할 수 있다. pop과 shift를 통해 배열에 값을 제거할 수 있다. join = array to string, split = string to array delete는 값만 삭제되고 index는 유지, splice는 해당 index 자체가 삭제됨 배열 값 추가 삭제 push 배열의 마지막 index에 값 추가 pop 배열의 맨 마지막 index 값을 삭제 shift 배열의 첫 번째 index 값을 삭제 unshift 배열의 첫 번째 index에 값 추가 source code [push] result [pop] result [shift] result [unshift] result join / split j.. 2023. 10. 21.
Day41_자바스크립트, 자료형, 변수와 함수(addEventListener, jQuery) 2023.10.16 Day41 네 줄 요약 자바스크립트(JS)는 웹 페이지상에서 동적인 처리를 담당한다. 변수의 type에는 var, let, const가 있다. document.getElementById() 메소드를 통해 웹 페이지(body)의 특정 id의 value를 받아올 수 있다. jQuery를 사용해 js 문법을 간소화 할 수 있다. 자바스크립트 JavaScript(JS) 웹 페이지의 동적인 처리를 담당 ", "" ], "description": "기본구조" } } 위와 같은 형식으로 기본구조에 2) addEventListener 사용해서 함수 구현 버튼을 클릭해보세요 결과 버튼 실행결과 jQuery jQuery js 문법을 간소화 시켜주는 환경 설정 - document.getElementByI.. 2023. 10. 21.
Day40_상속, 넘침 2023.10.13 Day41 세 줄 요약 부모요소(상위 태그)로 부터 style 속성을 물려받는 것을 '상속'이라 한다. 각 선택자마다 점수가 있어 우선순위에 따라 어떤 속성을 가질지 결정된다. 넘침(overflow) 속성이 scroll이면 scrollbar 생성 상속 inherit(상속) 부모요소로 부터 물려받는 속성 1) font-style : 기울기 2) font-weight : 굵기 3) font-size : 크기 4) line-family : 서체 5) color : 글자색 6) text-align : 정렬 /* inherit.css */ .ecosystem { font-size:30px; text-align: right; } .animal{ font-style: italic; font-siz.. 2023. 10. 16.
Day39_입력 태그, 선택자 2023.10.12 Day39 네 줄 요약 태그로 입력받은 값들을 특정 주소로 넘길 수 있다. 태그와 달리 태그는 누름과 동시에 submit이 일어난다. URL에서 '?' 뒤에서 부터 query 시작, 'key=value' 형태로 구성 (구분 기호는 '&') 자주 사용하는 선택자에는 1) 전체, 2) 태그, 3) 클래스, 4) 아이디 선택자가 있다. 입력 태그 태그 태그를 감싸서 특정 주소로 선택 값들을 전송하는 역할 - 주소창에 정보를 표시할 땐 method="get" (default) - 주소창에 정보를 표시하지 않을 땐 method="post" submit 발생 시에 태그의 값들을 action 속성에 적힌 주소로 전송 - key=value 형태로 전송 - name 속성 : key 값 - value .. 2023. 10. 15.
Day37_여백(margin/padding) 속성, 테이블 태그 2023.10.10 Day37 세 줄 요약 외부 여백은 margin 내부 여백은 padding table 행(row) : , table 열(column) : rowspan : 행 병합, colspan : 열 병합 margin / padding 속성 margin 속성 요소의 외부 여백을 지정하는 style 속성 단위에는 px, em, vw 등이 있음 (음수 허용) - 0 : 외부 여백 없음 - auto : 브라우저가 여백을 계산 (가운데 정렬 활용) * 여백 적용 순서 1) margin : 100px; - top, bottom, right, left 모두 100px의 외부 여백 2) margin : 100px 10px; - top, bottom = 100px / right, left = 10px 3) ma.. 2023. 10. 12.
Day34_img/audio/video 태그, list 태그 2023.10.04 Day34 세 줄 요약 이미지(혹은 오디오, 비디오) 태그로 특정 주소에 있는 이미지(혹은 오디오, 비디오) 파일을 불러올 수 있다. youtube 영상에서 '마우스 우클릭 -> 소스 코드 복사'를 통해 해당 영상의 src 추출 태그로 순서가 있는 리스트 작성 가능 미디어 관련 태그 * 아래와 같이 workspace 구성 img(이미지) 태그 인라인 요소이며 닫는 태그 없이 단일 태그로 사용 * 속성 - src : 이미지 경로(주소) - alt : 이미지 설명(경로가 잘 못 되어있는 경우 이미지 대체 텍스트) - width : 가로 너비(height와 같이 쓰면 원본 비율이 틀어짐) - height : 세로 길이 * 경로 종류 1) 상대 경로 : 현재 폴더를 기준으로 자원(src)의 .. 2023. 10. 10.