분류 전체보기113

• 

  jQuery 핵심 정리 유튜브 동영상 링크 - https://www.youtube.com/watch?v=dKOmNOR5D7I jQuery는 HTML 문서 작업 프로세스를 간소화하는 자바스크립트 라이브러리이며, jQuery 셀렉터는 DOM(Document Object Model)에서 요소를 선택하고 이에 대한 작업을 수행할 수 있다. REACT VIEW등의 등장으로 사용성이 거의 사라졌지만 레거시 사이트에서 사용하는 경우가 있어서 알아두면 매우 편하게 페이지를 개발할 수 있다. 본 포스팅의 내용정도만 이해하면 개발하는데 문제가 없다. jQuery 셀렉터를 사용하여 태그 이름, 클래스 또는 ID를 기준으로 요소를 선택한 다음 jQuery 메서드를 사용하여 선택한 요소에 대해 작업을 수행할 수 있다. jQuery 셀레터만 알아도 절.. 핵심정리 2023. 1. 25.

• 

  스프링으로 웹개발 기초 초창기 자바 웹개발에서는 jsp도 없었고 서블릿 클래스만 있었다. 클래스로 개발자가 직접 웹브라우저 요청을 받아 처리하고 리턴할 스트림을 만들어야 했다. jsp가 나왔지만 이 역시 내부적으로는 서블릿클래스로 컴파일되어 서비스되는 것이다. 모델2라는 아키텍쳐가 나오면서 모델과 서비스를 분리하고 개발하기 시작했다. 프레임웍이라는 개념이 도입되면서 여러 프레임웍이 경쟁하다 살아남은게 스프링이다. 스프링 기반 MVC아키텍쳐로 개발자가 직접 서블릿코드를 만들어내지 않고 콘트롤러와 서비스와 뷰에 집중하여 개발하면 , 스프링이 설정을 통해 조합해서 특정 경로로 요청하면 해당 콘트롤러가 실행되면서 서블릿으로 서비스를 하게 된다. 스프링에서 지원하는 자동화 설정에 따라 DB정보, SQL매핑쿼리, 공통설정을 해 놓고 @어.. 핵심정리 2023. 1. 25.

• 

  SQL 기초 정리 by postgres 쿼리는 postgres를 기준으로 작성되었습니다. DBMS마다 다른 부분이 존재하나 기본적인 골격을 이해하면 적응하는데 크게 이슈가 없습니다. 시간이 되면 maria db, sqlLite 버전도 만들어 볼 예정입니다. 전체적으로 직원, 부서, 고객, 매출 테이블을 기반으로 구성되어 있고, 꾸준히 샘플데이터를 넣어서 테스트해보면서 쿼리를 심화해서 이 포스팅을 갱신할 예정입니다. 포스트그레스 SQL 설치 https://itcamp24.tistory.com/190 POSTGRESQL 11 다운로드 및 설치 실습용으로 윈도우버전을 사용하며, 윈도우에서는 튜닝옵션제한이 있어서 서비스용으로는 어렵다. 웹서비스용이 아닌 수십기가이상의 대용량의 데이터를 조인하거나 할 때는 work_mem 설정값을 itcamp24.ti.. 핵심정리 2023. 1. 25.

• 

  postgresql 메타 정보 조회 테이블목록을 조회하고 컬럼리스틀 조회하고 논리명을 조회하는 쿼리 -- 테이블 목록 조회 SELECT RELNAME AS TABLE_NAME FROM PG_STAT_USER_TABLES; -- 컬럼 목록 조회 SELECT * FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_CATALOG = '데이터베이스명' AND TABLE_NAME = '테이블명' ORDER BY ORDINAL_POSITION; -- 기본키 조회 SELECT CC.COLUMN_NAME AS COLUMN_NAME FROM INFORMATION_SCHEMA.TABLE_CONSTRAINTS TC ,INFORMATION_SCHEMA.CONSTRAINT_COLUMN_USAGE CC WHERE TC.TABLE_CATA.. 실무·운영 팁 2023. 1. 25.

• 

  CSS(Cascading Style Sheets) CSS(Cascading Style Sheets)는 마크업 언어로 작성된 문서의 프레젠테이션을 설명하는 데 사용되는 스타일 언어이다. CSS를 사용하려면 스타일시트를 작성하고 HTML 문서에 연결해야 한다. 스타일은 규칙으로 정의되며, 규칙을 적용할 element를 지정하는 선택기와 선택한 element의 스타일을 정의하는 하나 이상의 선언이 있다. CSS 규칙의 기본 구문은 다음과 같다. selector { property: value; property: value; ... } HTML 문서의 HTML element의 스타일 속성을 사용하여 특정 HTML element에 CSS 스타일을 적용할 수 있다. This text will be blue. 개발자가 직접 디자인하기에는 한계가 있다. 디자인을 의뢰.. CSS 2023. 1. 25.

• 

  font style CSS에서 글꼴 스타일 속성을 사용하여 텍스트의 글꼴 스타일을 제어할 수 있다. 글꼴 스타일 속성은 글꼴을 기울임꼴 또는 사선으로 설정하는 데 사용된다. p { font-style: italic; } 이렇게 하면 태그 내의 모든 텍스트가 기울임꼴이 된다. 글꼴 가중치 속성을 사용하여 텍스트의 굵기를 제어할 수도 있다 또한 태그 내의 모든 텍스트가 20px로 지정할 수 있다. p { font-weight: bold; } p { font-size: 20px; } 글꼴 패밀리 속성은 텍스트에 대한 글꼴 패밀리를 설정하는 데 사용된다. p { font-family: Arial, sans-serif; } 이것은 태그 Arial 글꼴 내의 모든 텍스트를 만들 것이다. 또한 @font-face 규칙을 사용하여 서버에.. CSS 2023. 1. 25.

• 

  상대위치 , 절대위치 CSS에서 위치 속성은 웹 페이지에서 element의 레이아웃과 위치를 제어하는 데 사용된다. 위치 속성은 다음 네 가지 가능한 값 중 하나를 가질 수 있다: static: 기본값이며, 문서의 정상적인 흐름에 따라 element가 배치됨을 의미한다. relative: element는 정상 위치에 상대적으로 배치되며, 위쪽, 오른쪽, 아래쪽 및 왼쪽 특성을 사용하여 위치를 조정할 수 있습다. [Example] element는 20px 오른쪽으로 이동하고 10px 정상 위치에서 아래로 이동한다. p { position: relative; left: 20px; top: 10px; } absolute: element는 가장 가까운 위치에 있는 상위 항목에 상대적으로 배치되지만(고정된 것처럼 뷰포트에 상대적으로 .. CSS 2023. 1. 25.

• 

  z-index CSS에서 z-index 속성은 element의 적층 순서를 제어하는 데 사용된다. 키보드 탭키를 사용할 때 이동순서이기도 하다. 인덱스가 높은 element는 z 인덱스가 낮은 element 앞에 나타난다. z-index 속성은 정적이 아닌 위치 값을 가진 element에만 적용할 수 있다. 즉, 절대, 상대 또는 고정 값의 element는 z-인덱스를 가질 수 있다. 예를 들어, 한 페이지에 두 개의 element가 있고 한 element가 다른 element 앞에 나타나도록 하려면 z-index 속성을 사용하여 쌓기 순서를 제어할 수 있다. [Example] #element1 { position: absolute; z-index: 1; } #element2 { position: absolute; z.. CSS 2023. 1. 25.

• 

  width와 height , 마진과 패딩 width와 height CSS에서 width와 height 속성은 element의 크기를 제어하는 데 사용된다. width는 element의 너비를 설정하는 데 사용됩니다. 값은 픽셀(px), 백분율(%) 또는 기타 단위로 지정할 수 있다. p { width: 500px; } element의 폭이 상위 컨테이너의 80%로 설정된다. p { width: 80%; } 높이는 element의 높이를 설정하는 데 사용됩니다. 값은 픽셀(px), 백분율(%) 또는 기타 단위로 지정할 수 있다. p { height: 200px; } element의 높이가 상위 컨테이너의 50%로 설정된다. p { height: 50%; } 너비 및 높이 특성에는 패딩, 테두리 또는 여백이 포함되지 않는다. element의 전체 .. CSS 2023. 1. 25.

• 

  div 스타일 HTML의 element는 다른 element를 함께 그룹화하고 스타일을 적용하는 데 사용할 수 있는 컨테이너 element이다. CSS에서 element 선택기를 사용하여 element를 선택하고 스타일을 적용할 수 있다. 예를 들어, ID가 "컨테이너"인 element가 있고 배경색을 파란색으로 지정하고 너비를 500픽셀로 지정한다고 가정해 보면 다음 CSS를 사용할 수 있다: #container { background-color: blue; width: 500px; } 클래스 셀렉터를 사용하여 동일한 클래스를 가진 여러 div에 스타일을 적용할 수도 있다. .box { background-color: blue; width: 500px; } "box" 클래스가 있는 모든 div에 스타일이 적용된다 e.. CSS 2023. 1. 25.

• 

  display inline-block CSS에서 표시 속성은 element의 레이아웃과 웹 페이지에 표시되는 방법을 제어하는 데 사용된다. 디스플레이 속성에는 여러 값이 있을 수 있으며, 그 중 하나는 inline-block이다. 표시 속성이 inline-block으로 설정되면 element는 인라인 element처럼 동작하지만(즉, 필요한 만큼의 너비만 차지하고 이후에는 새 줄을 만들지 않음) 너비와 높이가 설정될 수 있다. 예를 들어 클래스 "컨테이너"를 가진 element가 있고 이를 인라인 블록 element로 표시하려고 한다고 가정하면 다음 CSS를 사용할 수 있다. .container { display: inline-block; } .box { width: 30px; height: 30px; background-color: blu.. CSS 2023. 1. 25.

• 

  css 외곽선 css out-line type CSS에서 외곽선 속성은 경계 속성과 유사하게 element 주위에 경계를 추가하는 데 사용된다. 그러나 아웃라인 특성은 페이지의 공간을 차지하지 않으며 다른 element의 레이아웃에 영향을 미치지 않는다는 점에서 보더 특성과 다르다. 아웃라인 속성은 보더 속성과 동일한 방식으로 element에 보더를 추가하는 데 사용할 수 있다. p { outline: 1px solid black; } 이렇게 하면 모든 element 주위에 1픽셀 너비의 검은색 solid 테두리가 추가된다. 또한 윤곽선 색상, 윤곽선 스타일 및 윤곽선 너비 특성을 개별적으로 지정할 수 있다. p { outline-color: red; outline-style: dotted; outline-width:.. CSS 2023. 1. 25.

• 

  table css border CSS에서 경계 속성은 element와 셀 주위에 경계를 추가하는 데 사용될 수 있다. 테이블에 테두리를 추가하려면 element의 테두리 속성을 사용할 수 있다. Header 1 Header 2 Data 1 Data 2 table { border: 1px solid black; } 이렇게 하면 전체 테이블 주위에 1픽셀 너비의 검은색 solid 테두리가 추가된다. 또한 테두리 축소 속성을 사용하여 테이블의 셀 주위에 테두리가 표시되는 방식을 제어할 수 있다. table { border: 1px solid black; border-collapse: collapse; } 이렇게 하면 셀 사이의 경계가 접히고 전체 테이블 주위에 단일 경계가 만들어진다. 테이블의 특정 셀 또는 행에 테두리를 추가하려면 또는 .. CSS 2023. 1. 25.

• 

  css float CSS에서 float속성은 웹 페이지에서 element의 위치를 제어하는 데 사용된다. 예를 들어, 탐색 항목 목록을 포함하는 클래스 "nav"를 가진 element가 있고 페이지 오른쪽으로 이동하려고 한다고 가정하면 다음 CSS를 사용할 수 있다: Home About Contact [Example] .nav { float: right; } 그러면 "nav" div가 페이지 오른쪽으로 이동하고 탐색 항목이 오른쪽으로 정렬된다. 여러 element가 서로 옆에 나타나도록 컨테이너 내에 여러 element를 띄울 수도 있다. Home About .nav { float: left; } .logo { float: right; } 이렇게 하면 nav div가 왼쪽으로 이동하고 로고 div가 오른쪽으로 이동하여 컨.. CSS 2023. 1. 25.

• 

  <html> - Hypertext Markup Language HTML은 하이퍼텍스트 마크업 언어(Hypertext Markup Language)의 약자 웹 페이지를 구성한 표준 마크업 언어이다. 일반적인 HTML 태그는 다음과 같다: : HTML 문서의 루트 Home About Contact Welcome to my website! Here you will find information about my interests and hobbies. Copyright © 2021 My Website jsfiddle.net에서 테스트 https://jsfiddle.net/ html, css, javascript영역에 해당 코드를 작성하고 좌측 상단의 Run을 실행하면 테스트가 가능하다. javascript란에서 라이브러리를 지정할 수 있다. 또한 우측 하단의 console.. HTML 2023. 1. 25.

• 

  <div> 태그 - 레이어 HTML의 div 태그는 다른 block타입 컨트롤로 사용시 기본 줄바뀜이 된다. 다른 요소를 위한 컨테이너를 만들고 CSS를 사용하여 해당 요소에 스타일이나 레이아웃을 적용하는 데 사용한다. id 스타일 A link #container{ background-color: #ccc; padding: 20px; text-align: center; } let div = document.getElementById("container"); console.log(div.innerHTML); 또한 div 요소에 id 또는 class를 추가하여 CSS 및 JavaScript에서 각각 스타일을 적용하거나 동작을 수행할 수 있다. This is some text inside the div element. A link 이 .. HTML 2023. 1. 25.

• 

  <img src="..."> 태그 HTML의 태그는 웹 페이지에 이미지를 표시하기위해 사용되며 src속성에 이미지 파일의 URL을 지정한다. src 속성은 표시할 이미지 파일의 URL인 "image.jpg"로 설정됩니다. alt 속성은 이미지의 텍스트 설명을 제공하는 데 사용되며, 이는 접근성 및 SEO 목적에 중요하다. 또한 width 및 height 특성을 사용하여 이미지의 너비와 높이를 설정할 수 있다: 또한 클래스나 ID를 img 요소에 추가하여 스타일을 위한 css와 수행 작업을 위한 javascript에 사용할 수 있다. 이미지 테스트 let div = document.getElementById("demo"); let img = document.getElementsByClassName("image")[0]; div.innerH.. HTML 2023. 1. 25.

• 

  <p> , <br> - paragraph , 줄바꿈 태그 p태그 HTML의 태그는 텍스트 단락을 만드는 데 사용되며 문단의 텍스트 내용은 여는 태그와 닫는 태그 사이에 배치한다. This is the first paragraph. This is the second paragraph. 또한 클래스나 ID를 태그에 추가하여 스타일을 위해 CSS에서, 수행 동작을 위해 JavaScript에서 사용할 수 있다. This is a paragraph of text. #style정의 .paragraph{ font-size: 20px; } // paragraph클래스명을 selector로 사용해서 객체 핸들링 let p = document.getElementsByClassName("paragraph") br 태그 HTML의 태그는 줄 바꿈을 만드는 데 사용된다. 빈 태그로,.. HTML 2023. 1. 25.

• 

  <link> 태그 HTML에서 태그는 외부 CSS 스타일시트에 링크하는 데 사용된다. href 속성은 CSS 파일의 위치를 지정하는 데 사용되며, rel 속성은 HTML 문서와 링크된 파일(이 경우 "스타일시트") 사이의 관계를 정의하는 데 사용된다. 예를 들어, 다음 코드는 HTML 문서와 같은 디렉터리에 있는 "styles.css"라는 이름의 CSS 파일로 링크된다: HTML 2023. 1. 25.

• 

  <UL> <LI> 태그 - 리스팅 HTML의 태그와 태그는 정렬되지 않은 목록을 만드는 데 사용된다. 태그는 정렬되지 않은 목록 전체를 나타내며, 태그는 각 개별 목록 항목을 나타낸다. Item 1 Item 2 Item 3 .list{ list-style-type: none; /* remove bullet points */ } .item{ font-size: 20px; } let items = document.getElementsByClassName("item") console.log(items[0].innerHTML); console.log(items[1].innerHTML); console.log(items[2].innerHTML); 이 예에서는 태그를 사용하여 정렬되지 않은 목록 컨테이너를 생성하고, 태그를 사용하여 컨테이너 내의 .. HTML 2023. 1. 25.

• 

  display 속성 display: block : 이 값은 요소를 블록 레벨 요소로 만든다. 즉, 블록 컨트롤은 상위 컨테이너의 전체 너비를 차지하고 해당 요소 뒤에 새 줄을 작성하여 줄바뀜이 일어난다. 일반적인 블록 레벨 요소에는 , , 및 이 있다. This is a block-level element .block-element{ display: block; width: 50%; /* takes up 50% of the parent container width */ background-color: #ccc; /* adds a background color */ } display: inline :필요한 만큼의 너비만 차지하고 줄바뀜이 일어나지 않는다. 일반적인 인라인 요소로는 , 및 가 있다. This is a inlin.. HTML 2023. 1. 25.

• 

  <table> <tr> <td> 태그 table 태그 태그는 테이블 전체를 나타낸다. 태그는 테이블 행을 나타낸다. 태그는 테이블 셀을 나타낸다. Header 1 Header 2 Header 3 Row 1, Column 1 Row 1, Column 2 Row 1, Column 3 Row 2, Column 1 Row 2, Column 2 Row 2, Column 3 이렇게 하면 3개의 열과 2개의 행이 있는 테이블이 생성되고 각 셀에는 태그에 정의된 텍스트가 포함된다. 또한 내부에서 태그를 사용하여 테이블 헤더를 만들 수 있다. Header 1 Header 2 Header 3 Row 1, Column 1 Row 1, Column 2 Row 1, Column 3 셀병합 : rowspan colspan HTML 테이블의 rowspan 및 cols.. HTML 2023. 1. 25.

• 

  <style> 태그 HTML의 태그는 텍스트 형식, 색상, 레이아웃 등 HTML 문서의 요소에 스타일을 적용하는 데 사용된다. 태그는 일반적으로 HTML 문서의 Welcome to my website This is some text on my website. 태그 내에서 정의된 CSS 스타일은 HTML 문서의 섹션에 있는 요소에 적용됩니다. 본문 요소의 배경색은 #f0f0f0이고 h1 요소의 색상은 파란색이며 텍스트는 가운데에 정렬된다. 태그를 사용하여 CSS 파일을 HTML 문서에 연결하여 외부적으로 스타일을 포함할 수도 있다: You can use the tag to customize the appearance of your web page and make it HTML 2023. 1. 25.

• 

  <h1>, <h2>, <h3> ..<h6>태그 HTML의 , , 태그는 제목을 정의하는 데 사용된다. 태그는 페이지에서 가장 중요한 제목, 일반적으로 페이지의 제목 또는 주요 주제 태그는 일반적으로 내용을 섹션으로 나누는 데 사용되는 하위 제목 태그는 일반적으로 내용을 더 작은 섹션으로 나누는 데 사용되는 하위 제목 6레벨까지 제목 테그를 정의할 수 있다. Welcome to my website This is some text on my website. About Us Learn more about our company and mission. Our Team Meet the people behind our success. 이 예에서 태그는 주 제목인 "Welcome to my website"에 사용되고, 태그는 소제목인 "About Us"에 사용되고.. HTML 2023. 1. 25.

• 

  <a href="..."> 앵커태그 HTML의 태그는 다른 웹 페이지 또는 동일한 웹 페이지의 특정 위치에 대한 하이퍼링크를 만드는 데 사용된다. 태그를 사용하려면 링크의 대상을 지정하는 데 사용되는 href 속성을 사용해야 한다. go naver.com 이 예에서는 태그를 사용하여 example.com 웹 사이트에 대한 링크를 생성합니다. 웹페이지에 "Example.com 방문"이라는 텍스트가 링크로 표시되며, 사용자가 이를 클릭하면 example.com 웹사이트로 안내된다. 또한 를 사용하여 ID 속성을 사용하여 동일한 웹 페이지의 특정 위치에 연결할 수 있으며 "책갈피"라고도 한다. go naver.com Go to section 1 empty div Section 1 이 링크를 클릭하면 해당 ID를 가진 웹 페이지 섹션으로 이동하는.. HTML 2023. 1. 25.

• 

  <form> <input> <select> <textarea> 태그 form enctype 속성 HTML 양식의 enctype 속성은 양식이 제출될 때 서버로 전송되는 데이터의 형식을 지정하는 데 사용된다.enctype 특성은 태그와 함께 사용되며, 폼에 파일 업로드가 포함되어 있거나 non-ASCII가 아닌 경우 설정해야 한다. multipart/form-data: 이 값은 양식에 파일 업로드가 포함된 경우 사용. Name: Email: Upload a file: form type method 메소드 속성은 태그와 함께 사용되며 "get"과 "post"의 두 가지 가능한 값을 가질 수 있다. "get" 메서드는 기본 메서드이며 서버에서 데이터를 검색하는 데 사용된다. "get" 메서드를 사용하여 양식을 제출하면 데이터가 쿼리 매개 변수로 URL에 추가되고 데이터가 UR.. HTML 2023. 1. 25.

• 

  selector 선택자 - id(#), class(.) HTML에서 id와 클래스 속성은 HTML 문서에서 요소를 식별하고 CSS를 사용하여 스타일을 적용하는 데 사용된다. id 속성은 페이지의 특정 객체에 고유 식별자를 제공하는 데 사용됩니다. ID는 페이지에서 한 번만 사용할 수 있으며 전체 문서에서 고유해야 한다. 객체는 CSS에서 "#" (샾)기호를 사용하여 ID로 선택할 수 있다 #header { background-color: blue; } 클래스 속성은 하나 이상의 객체에 동일한 식별자를 제공하여 여러 객체에 동일한 스타일을 적용할 수 있도록 하는 데 사용된다. 클래스는 한 페이지에서 여러 번 사용될 수 있으며, 전체 문서에서 고유하지 않아야 한다. 객체는 "."(점) 기호를 사용하여 CSS의 클래스에 의해 선택될 수 있다 .header { ba.. HTML 2023. 1. 25.

• 

  <link href="..."> href 속성은 CSS 파일의 위치를 지정하는 데 사용되며, rel 속성은 HTML 문서와 링크된 파일(이 경우 "스타일시트") 사이의 관계를 정의하는 데 사용된다. 예를 들어, 다음 코드는 HTML 문서와 같은 디렉터리에 있는 "styles.css"라는 이름의 CSS 파일로 링크된다: HTML에서 태그는 외부 CSS 스타일시트에 링크하는 데 사용된다. href 속성은 CSS 파일의 위치를 지정하는 데 사용되며, rel 속성은 HTML 문서와 링크된 파일(이 경우 "스타일시트") 사이의 관계를 정의하는 데 사용된다. HTML 2023. 1. 25.

• 

  <script> 태그 script> 태그는 일반적으로 웹 사이트에 대화형 기능이나 동적 콘텐츠를 추가하는 데 사용된다. 이 예제에서 태그는 HTML 문서의 또는 섹션 내에 배치해야 한다. 섹션의 하단에 태그를 배치하는 것이 가장 좋다. 이렇게 하면 스크립트가 실행되기 전에 페이지를 로드하고 렌더링할 수 있으므로 페이지의 성능을 향상시킬 수 있다. HTML 2023. 1. 25.

• 

  <canvas> 태그 HTML에서 캔버스 태그는 이미지, 드로잉, 애니메이션과 같은 그래픽을 위한 컨테이너이다. 웹 페이지에서 그래픽을 만들고 표시하는 데 사용되며 자바스크립트를 사용하여 조작할 수 있다. 캔버스의 크기는 캔버스 요소에 직접 너비와 높이 속성을 설정하거나 CSS 스타일을 사용하여 정의할 수 있다. 캔버스에 그림을 그리려면 JavaScript를 사용해야 한다. 캔버스 요소는 캔버스에 도형, 선, 이미지 및 텍스트를 그릴 수 있는 JavaScript API를 제공한다. 다음은 자바스크립트를 사용하여 단순한 직사각형을 만드는 방법의 예이다: var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle.. HTML 2023. 1. 25.