간혹 HTML, JSP 화면을 개발하다가 div 태그 안에 width를 직접 정해주면, 텍스트가 자동으로 줄바꿈이 되지 못하고, div 영역 밖으로 텍스트가 벗어나는 경우가 발생한다. 1. 해결 해결 방법은 간단하다. 해당 div 영역 안에 word-break: break-all 을 추가해주면 된다. word-break: break-all 예시) 12312312415613461361346136136134613461346134613463416134612312312312312312312312321 - 아래는 word-break 코드 추가 12312312415613461361346136136134613461346134613463416134612312312312312312312312321 - class로 선언시..

화면을 개발하다 보면, 가끔 공통으로 된 부분이 생기는 경우가 있고, 이 부분을 모든 파일에 작성하는 것은 비효율적이고 유지보수 시에도 해당 부분을 모두 수정해야 하는 상황이 발생한다. 공통부분을 하나의 파일로 만들어두고, 이것을 각 파일에서 불러와 사용할때 include 명령어를 사용한다. (대부분 공통 헤더(header), 바텀(bottom) 등...) 1. 정적인 방식(static=directive) - 동적인 방식보다 빠르다. - 파라미터를 주고 받을 수 없다. - 해당 jsp페이지가 컴파일될 때, 참조하는 파일(include)도 함께 컴파일 된다. => 두 파일의 코드가 합쳐진 상태로 컴파일 된다. 내용 공간 //header.jsp 코드 Header.jsp 내용입니다. 2. 동적인 방식(dyna..

프로젝트를 진행하다보면 모바일에서도 확인이 가능해야 할 페이지가 존재한다. 예를 들어, 에러페이지인데 이미지를 보여준다던가.... 각각의 모바일마다 해상도가 다르기 때문에, 이미지 비율을 유지하여 보여주도록 해야하는데, 이때 간단하게 css로만 설정하여 반응형으로 만들어 적용해봤다. 1. CSS .container { height: 100vh; width: 100vw; } .img_item { width: 100%; height: 100%; margin: 0 auto; background-image: url("이미지URL"); background-repeat: no-repeat; background-position: center center; backgorund-size: 100% 100%; } 2. h..

카카오톡을 통해서 어떠한 정보를 공유하기 위해서 URL을 공유하는 일이 많이 있다. 카카오톡에 URL을 공유하게 되면 위의 그림과 같이 썸네일 이미지와 제목, 내용 등을 보여주게 되는데, 이는 어떻게 보여주게 되는지 확인해보고자 한다. 1. OG(Open Graph), 오픈그래프 - 오픈그래프는 페이스북이 기존의 메타 데이터 표기방법을 참조하여 만들었습니다. - 어떠한 HTML 파일의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 이미지 등 다양한 요소들을 통일해서 사용할 수 있도록 정의해놓은 프로토콜 입니다. 오픈그래프 기본 태그 og:title - 사이트의 제목 og:type - 사이트의 종류 예) website og:image - 사이트를 나타낼 대표 이미지(미리보기 이미지) o..