SIKI TISORY

일단 실제로 제가 토이프로젝트 진행시 실수했던 부분입니다! 그럼 스타트!API키 및 시크릿 키가 실수로 application.properties에 담겨 깃허브에 커밋된경우입니다!제가 .gitignore에 올렸지만 올라간이유는  .properties로 적었는데 완벽하게 비슷한 닉네임을 적던가 .*properties로 적었어야하는데 실수로 . properties만 적어서 시크릿키가 올라갔습니다.일단 우선적으로1. gitignore 수정2. Git에서 properties파일 레파지토리에서 제거 후 커밋 푸시까지 git rm --cached src/main/resources/application.properties현재 레파지토리에 올라간 application.properties는 제거됨 하지만 히스토리에는 남아..

◈ 이벤트, 이벤트 핸들러, 이벤트 리스너 ◈  • 이벤트사용자의 동작이나 브라우저의 상태 변화와 관련하여 발생하는 사건을 의미 • 이벤트 핸들러특정 이벤트가 발생했을 때 실행되는 함수 • 이벤트 리스너JavaScript에서 지원하는 addEventListener() 메소드를 의미함 ◈ 이벤트의 종류 ◈  • 이벤트의 종류  ◈ 이벤트 핸들러 예시 ◈ • 이벤트 핸들러 예시 ◈ 이벤트 리스너 예시 ◈ • 이벤트 리스너 예시 ◈ 클릭 이벤트 ◈ • 클릭 이벤트사용자가 요소를 클릭할 때 발생하는 이벤트 • 클릭 이벤트 예시(이벤트 리스너 – 콜백 함수)  • 클릭 이벤트 예시(이벤트 리스너 – 일반 함수)  ◈ 마우스 이벤트 ◈ • 마우스 이벤트마우스와 관련된 동작에 대한 이벤트로써 여러가지가 있지만, 클릭..

◈ CSS 용어 ◈  • 컨테이너(container)요소들을 포함하고 있는 상위(부모) 요소 레이아웃을 구성하는 요소들을 묶어서 그룹화 하는 역할을 수행하며 이를 묶어주는 역할을 하는 요소를 컨테이너 라고 부름* 일반적으로 div, section, article, main 등의 요소에 많이 사용됨  • 아이템(item)레이아웃을 구성하는 요소 container 안에 포함된 각각의 요소들을 아이템이라고 부름* div, span, p 등 다양한 요소들로 구성할 수 있음  ◈ float ◈  • float각각의 요소들의 배치를 변경하여 다른 요소들과 어떻게 상호작용할 지 컨트롤 할 수 있는 속성 (다음 요소 위에 떠있게 함) • 참고float예전에 자주 사용되던 속성으로 최근에는 flexbox 또는 grid로..

◈ 블록 레벨 요소 vs 인라인 레벨 요소 ◈  • 블록 레벨 요소가능한 최대 가로 너비를 차지하여 한 줄 전체를 차지하는 요소 - 종류1. div2. p3. h1 ~ h64. ul5. li6. hr7. footer8. 등등... • 블록 레벨 요소 예시-1h3로 이루어져 있어 한 줄 전체를 차지하는 블록 레벨 요소 • 블록 레벨 요소 예시 - 2                                                                                                 필요하지 않은 영역까지 공간을 차지함 (블록 레벨 요소)   • 인라인 레벨 요소필요한 만큼만 공간을 차지하며 텍스트와 함께 표시되는 요소 - 종류1. span2. a3. strong4. e..

◈ 텍스트 색상 속성 개요 ◈  • 색상 속성 개요 텍스트의 색상을 지정하며 색상 이름이나 RGB값, HEX코드 등을 사용하여 지정 가능 • 사용 방법 ◈ 텍스트 색상 속성 방식 ◈ • 색상 이름red, blue, green과 같이 색상의 이름을 영어로 직접 작성하여 사용하는 방식 • RGB 값0부터 255까지의 숫자로 각 성분의 강도를 나타내며, 투명도 또한 설정 가능 • HEX 코드16진수의 값으로 색상을 표현하는 방식이며 # 기호로 시작함 ◈ 배경 색상 속성 ◈ • 배경 색상 속성 개요 배경의 색상을 지정하며 색상 이름이나 RGB값, HEX코드 등을 사용하여 지정 가능 • 사용 방법기본적인 사용 방법은 텍스트 색상 속성과 동일하다   ◈ 글꼴 속성 ◈ • font-family폰트의 글꼴을 설정해주는..

◈ CSS ◈  • CSS(Cascading Style Sheets)HTML을 꾸며주기 위해 사용되는 마크업 언어 • 기본 구문  ◈ CSS 작성 방식 ◈ • inline 스타일HTML 요소의 style 속성을 사용하여 직접 CSS 스타일을 지정하는 방식 • 내부 스타일 시트HTML 문서의 head 태그 내에  • 외부 스타일 시트 (사용 권장)CSS 스타일을 별도의 외부 파일로 만들고, HTML에서 link 태그를 사용하여 파일을 연결하여 사용하는 방식 ◈ CSS 선택자 종류◈    • 참고고유성 충돌 방지를 위해 적절한 선택자를 사용해야 함 * 고유성 충돌 : 동일한 스타일을 적용하는 여러 선택자가 있을 때 발생하며, 이를 해결하기 위해서는 선택자를 고유하게 만들거나 우선 순위를 조절해야 함  ◈ C..

◈ input 태그 ◈  • input 태그사용자로부터 입력을 받을 때 사용 • type 속성입력 필드의 유형을 지정하는 속성으로써 텍스트 입력 필드, 체크박스, 라디오 버튼 등을 지정할 수 있음 • type 속성의 유형1. text  2. password  3. checkbox  4. radio  5. email  6. number  7. hidden  8. …  ◈ input 태그 속성 ◈   ◈ button 태그 ◈   • button 태그사용자와 상호작용을 할 수 있는 버튼을 생성 • type 속성버튼의 유형을 지정하는 속성으로써 일반 버튼, 제출 버튼, 리셋 버튼 등을 지정 • type 속성의 유형1. button  2. submit  3. reset ◈ button 태그 속성 ◈  ◈ form..

◈ 테이블 태그 ◈  • table 태그웹 페이지에서 테이블(표) 형식의 자료를 만들 때 사용 • table > tr 태그한 개의 행을 만드는 태그 • table > th 태그한 개의 행을 만드는 태그  제목을 표시하는 용도로 사용되며, 중앙 정렬 및 굵은 글씨로 표시됨 • table > tr > td 태그한 개의 열을 만드는 태그 ◈ 행 vs 열 vs 셀 ◈  • 행(row)각각의 한 줄(가로)을 의미 • 열(column)각각의 한 줄(세로)을 의미 • 셀(cell)행과 열의 교차점에 위치하는 각각의 데이터를 의미  ◈ 테이블 태그의 구조 ◈     ◈ 테이블 태그에 CSS 적용하기 ◈   ◈ 행 병합과 열 병합 ◈  • rowspan테이블에서 행 병합을 사용하기 위한 속성  • colspan테이블에..

◈ 목록 관련 태그의 종류 ◈   • ol 태그순서가 있는 목록을 나타내는 태그 • ul 태그순서가 없는 목록을 나타내는 태그 • li 태그목록에서 각 항목을 나타내는 태그로써, ol 또는 ul 태그 안에서 사용됨 • dl 태그정의 목록을 나타내는 태그 ◈ 목록 태그의 사용 방법 ◈  • ol 태그 --------------------------------------------------------------------------------------------------------------  • ul 태그  ◈ ol 타입의 속성 ◈  • type 속성ol 태그에서의 type 속성은 목록의 숫자 유형을 나타내는데 사용됨  • start 속성목록의 시작 번호를 지정하는데 사용되며, type의 옵션과는 무..

◈ 이미지 태그 ◈   • img 태그웹 페이지에 이미지를 삽입할 때 사용되는 태그로써, src 속성을 통해 이미지 파 일의 경로를 지정하여 사용 가능 ex)  ◈ 이미지 태그 속성 ◈  • alt이미지 파일이 로드되지 않았을 경우 대체 텍스트를 제공하는 속성ex)  • width이미지의 가로 크기를 지정하여 기본값은 픽셀(px) 단위로 되어있음 • height이미지의 세로 크기를 지정하여 기본값은 픽셀(px) 단위로 되어있음 ex)  • 픽셀(px)과 퍼센테이지(%)의 차이픽셀(px)은 이미지의 크기를 고정시키며, 퍼센테이지(%)를 사용할 경우브라우저 창의 크기에 따라 유연하게 조절되어 반응형 웹 디자인을 구현하는데 유용함단, 이미지의 원본 크기가 작음에도 %를 사용하여 이미지 크기가 강제로 늘어질 경..