WEB

🔎 개발자 도구웹 페이지를 디버그, 수정, 성능 분석하기 위한 강력한 도구 모음이다. 개발자 도구를 활용하면 웹 개발의 생산성을 높일 수 있다.크롬에서 윈도우는 F12 또는 Ctrl + Shift + I, 맥은 Command + Option + I를 누르면 개발자 도구가 켜진다. 🧩 주요 패널Elementshtml/css 상태 확인ConsoleJavaScript 코드 실행 및 디버깅로그 확인오류 메시지 표시Sources페이지 소스 검사 및 디버깅break point 지정 및 변수 모니터링Network브라우저에서 발생하는 통신 상태네트워크 모니터링네트워크 요청 상세 정보 확인Performance성능 측정페이지 로드 및 상호작용 성능 분석타임라인 기록Application저장소, 쿠키, 캐시 등을 관리Se..

🚨 문제 상황심각: 경로 [/spring_ws_08_2]의 컨텍스트 내의 서블릿 [appServlet]을(를) 위한 Servlet.service() 호출이, 근본 원인(root cause)과 함께, 예외 [Request processing failed: java.lang.IllegalArgumentException: Name for argument of type [java.lang.String] not specified, and parameter name information not available via reflection. Ensure that the compiler uses the '-parameters' flag.]을(를) 발생시켰습니다.java.lang.IllegalArgumentExcept..

HTML에서 JavaScript를 포함할 때 script 태그를 사용한다. 이 script 태그가 어디에 위치하느냐에 따라 조금씩 차이점이 있는데 이를 알아보도록 하자! 1. head 태그 안에 script 태그 포함 head 태그 안에 script 태그를 포함할 경우, HTML을 파싱하다가 멈추고 JavaScript 파일을 먼저 다운받는다. JavaScript를 다 다운받으면 실행한 후 그 이후에 HTML을 마저 파싱한다. 단점: 자바스크립트 용량이 커서 다운로드가 오래 걸리면 그동안 뒤의 HTML이 파싱되지 않기 때문에 페이지 로드가 느려진다. 2. body 태그 마지막에 script 태그를 포함 1번의 문제점을 해결할 수 있는 방법이다. script 태그를 body의 마지막에 포함하게 되면, HTM..

- 문제상황 multer를 이용하여 파일을 업로드하는 코드를 실행하니 다음과 같은 에러가 떴다. MulterError: Unexpected field at wrappedFileFilter (D:\study\node_modules\multer\index.js:40:19) at Busboy. (D:\study\node_modules\multer\lib\make-middleware.js:115:7) at Busboy.emit (node:events:520:28) at Busboy.emit (D:\study\node_modules\busboy\lib\main.js:38:33) at PartStream. (D:\study\node_modules\busboy\lib\types\multipart.js:213:13) ..

미디어 태그는 이미지, 오디오, 비디오 등 멀티미디어를 넣을 때 사용한다. 내용물 여부 태그 설명 내용물을 가질 수 있는 태그 음악 삽입 영상 삽입 내용물을 가질 수 없는 태그 이미지 삽입 audio 태그는 HTML5부터 추가된 기능이기 때문에 그 이하 버전에선 동작하지 않는다. 미디어 태그 속성 이미지, 오디오, 비디오에 필요한 추가 정보는 속성을 사용한다. 태그 속성 설명 img 태그 src 이미지의 경로 지정 alt 이미지가 없을 때 나오는 글자 지정 width 이미지의 너비 지정 height 이미지의 높이 지정 audio, vedio 태그 scr 음악, 비디오 파일의 경로 지정 preload 음악, 비디오를 준비 중일 때 데이터를 모두 불러올지 여부 지정 autoplay 음악, 비디오의 자동 재생..

표를 만들 때는 테이블 태그를 사용한다. 태그 설명 table 표 삽입 tr 표에 행(table row) 삽입 th 표의 제목 셀(table heading) 생성 td 표의 일반 셀(table data) 생성 월 화 수 목 금 1교시 영어 국어 과학 미술 기술 2교시 도덕 체육 영어 수학 사회 테이블 태그의 속성 th와 td에 colspan과 rowspan 속성을 사용하여 표에서 셀이 차지하는 영역을 조절할 수 있다. 태그 속성 설명 table border 표의 테두리 두께 지정 td, th colspan 셀의 너비 지정 rowspan 셀의 높이 지정 지역별 홍차 중국 정산소종 기문 운남 인도 및 스리랑카 아삼 실론 다질링 닐기리 중국, 정산소종은 둘 다 두 번째 행이다. 그래서 같은 tr 태그 안에 있..

내비게이션 메뉴 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼이다. 목록 태그 네비게이션 메뉴를 만들기 위해 주로 사용된다. 태그 설명 ul 순서가 없는 목록(unordered list) 생성 ol 순서가 있는 목록(ordered list) 생성 li 목록 요소(list item) 생성 과일과 채소는 ul 태그를 사용한 모습이다. 사과, 바나나, 오렌지 또는 상추, 치커리, 양배추는 ol 태그를 사용한 모습이다. [참고] HTML5 웹 프로그래밍 입문(3판)

글자 태그는 웹 페이지에서 가장 큰 비중을 차지한다. 제목 글자 태그 문서의 제목을 표현할 때 사용한다. h는 heading(제목)을 의미한다. 태그 설명 h1 첫 번째로 큰 제목 글자 생성 h2 두 번째로 큰 제목 글자 생성 h3 세 번째로 큰 제목 글자 생성 h4 네 번째로 큰 제목 글자 생성 h5 다섯 번째로 큰 제목 글자 생성 h6 여섯 번째로 큰 제목 글자 생성 절대적인 글자 크기는 아니라서 동일한 태그여도 웹 브라우저의 종류가 다르면 글자 크기가 다를 수 있다. 한 웹 브라우저 내에서는 우선 순위에 따라 순차적으로 사용한다. 본문 글자 태그 p는 paragraph(단락), br은 break(줄 바꿈), hr은 horizontal rule(수평 줄)을 의미한다. 태그 설명 p 본문 문단 생성 b..