Web
-
이번 포스트에서는 height 100% 속성과 100vh 라는 속성에 대해서 살펴보자. main content로 화면을 꽉 채우고 싶어요! 화면을 구성하면서 main content 영역으로 화면을 꽉 채우고 싶은 경우가 많다. 위 과정을 처리할 때 height와 min-height 속성을 사용하는데 %단위를 사용하는 경우와 vh를 사용하는 경우에 대해 살펴보자. 다음과 같은 간단한 html을 이용해서 확인해보자. 여기는 header 여기는 main 여기는 footer height: 100%는 요소의 부모의 높이를 100%로 채움 먼저 height는 요소를 감싸고 있는 부모의 높이를 100% 채운다는 이야기이다. .main { background-color: brown; /* 100%에서 header와 f..
[CSS]height 100% vs 100vh이번 포스트에서는 height 100% 속성과 100vh 라는 속성에 대해서 살펴보자. main content로 화면을 꽉 채우고 싶어요! 화면을 구성하면서 main content 영역으로 화면을 꽉 채우고 싶은 경우가 많다. 위 과정을 처리할 때 height와 min-height 속성을 사용하는데 %단위를 사용하는 경우와 vh를 사용하는 경우에 대해 살펴보자. 다음과 같은 간단한 html을 이용해서 확인해보자. 여기는 header 여기는 main 여기는 footer height: 100%는 요소의 부모의 높이를 100%로 채움 먼저 height는 요소를 감싸고 있는 부모의 높이를 100% 채운다는 이야기이다. .main { background-color: brown; /* 100%에서 header와 f..
2022.09.05 -
브라우저 주소창의 한글 URL 복사 한글이 포함된 URL의 표시와 문제 크롬 계열의 브라우저를 사용하면 주소창에 한글이 들어간 경우 일단 한글로 잘 보여준다. 하지만 막상 복사해서 사용하려고 하면 인코딩된 결과가 복사되므로 읽기가 어렵다. https://github.com/quietjun/algo_aps/blob/master/src/main/java/bj/bronze/l5/BJ_B5_8393_%ED%95%A9.java Improved URL copy 사실 브라우저가 공식적으로 지원 해주지 않으면 답은 없어보인다. 비공식적으로는 플러그인을 사용할 수 있다. https://chrome.google.com/webstore/detail/improved-url-copy/nbkaobaododghmjhkjagellf..
[Web]브라우저 주소창의 한글 URL 복사브라우저 주소창의 한글 URL 복사 한글이 포함된 URL의 표시와 문제 크롬 계열의 브라우저를 사용하면 주소창에 한글이 들어간 경우 일단 한글로 잘 보여준다. 하지만 막상 복사해서 사용하려고 하면 인코딩된 결과가 복사되므로 읽기가 어렵다. https://github.com/quietjun/algo_aps/blob/master/src/main/java/bj/bronze/l5/BJ_B5_8393_%ED%95%A9.java Improved URL copy 사실 브라우저가 공식적으로 지원 해주지 않으면 답은 없어보인다. 비공식적으로는 플러그인을 사용할 수 있다. https://chrome.google.com/webstore/detail/improved-url-copy/nbkaobaododghmjhkjagellf..
2022.08.18 -
먼저 mustache에서 사용할 데이터를 설정하는 dto를 작성해보자. DTO import lombok.Builder; import lombok.Data; @Data @Builder public class NoteBook { private String model; private int price; } attribute 출력 {{attribute_name}} model에 담긴 attribute를 출력하기 위해서는 {{attribute_name}}을 사용한다. 이 경우는 text 형태로 attribute의 내용을 단순 출력하는데 간혹 html 형태로 출력하려는 경우 {{{attribute_name}}} 형태나 {{&attribute_name}}을 사용하면 된다. text로 출력: {{ org }} html로..
[mustache] spring boot와 mustache 2먼저 mustache에서 사용할 데이터를 설정하는 dto를 작성해보자. DTO import lombok.Builder; import lombok.Data; @Data @Builder public class NoteBook { private String model; private int price; } attribute 출력 {{attribute_name}} model에 담긴 attribute를 출력하기 위해서는 {{attribute_name}}을 사용한다. 이 경우는 text 형태로 attribute의 내용을 단순 출력하는데 간혹 html 형태로 출력하려는 경우 {{{attribute_name}}} 형태나 {{&attribute_name}}을 사용하면 된다. text로 출력: {{ org }} html로..
2022.03.29 -
SpringBoot에서는 was에 종속적인 JSP를 더 이상 기본으로는 지원하지 않는다. 물론 추가적인 설정을 통해서 사용할 수는 있지만 기본에서 빠진 녀석을 억지로 데려다가 사용하기는 왠지 꺼림직 하다. (암묵적으로 자바 진영의 웹 생태계를 지배하는 Spring의 위력이 새삼 느껴진다.) 이제 SpringBoot에서 미는 녀석들은 Thymeleaf, FreeMarker, Mustache가 있다. 이중 컨셉만 바꾼다면 가장 배우기 쉬운 녀석이 Mustache인것 같다. 이번 포스트에서는 넘나 간단한 Mustache 사용법을 SpringBoot 기반에서 살펴보자. Mustache란? mustache 웹사이트 그냥 간단히 github에 둥지를 틀고 있다. 너무나 썰렁해서 유지보수는 돼나? 싶을 정도다 ㅎ {..
[mustache] spring boot와 mustache 1SpringBoot에서는 was에 종속적인 JSP를 더 이상 기본으로는 지원하지 않는다. 물론 추가적인 설정을 통해서 사용할 수는 있지만 기본에서 빠진 녀석을 억지로 데려다가 사용하기는 왠지 꺼림직 하다. (암묵적으로 자바 진영의 웹 생태계를 지배하는 Spring의 위력이 새삼 느껴진다.) 이제 SpringBoot에서 미는 녀석들은 Thymeleaf, FreeMarker, Mustache가 있다. 이중 컨셉만 바꾼다면 가장 배우기 쉬운 녀석이 Mustache인것 같다. 이번 포스트에서는 넘나 간단한 Mustache 사용법을 SpringBoot 기반에서 살펴보자. Mustache란? mustache 웹사이트 그냥 간단히 github에 둥지를 틀고 있다. 너무나 썰렁해서 유지보수는 돼나? 싶을 정도다 ㅎ {..
2022.03.28 -
처음 웹 프로그램을 하다보면 tomcat을 사용하면서 자주 접하는 오류가 바로 8080 포트를 다른 녀석이 점유하고 있어서 tomcat을 실행할 수 없다는 내용이다. 문제의 원인은 기존에 떠있던 tomcat이 좀비처럼 8080 포트에서 버티고 서있기 때문에 새로운 tomcat 서버가 실행하지 못하는 문제이기 때문에 기존의 tomcat을 종료하고 실행하면 되는 간단한 문제이다. 이번 포스트에서는 프로세스를 죽이는 2가지 방법에 대해서 살펴보자. 프로세스 죽이기 작업관리자 확용 먼저 작업 관리자에서 해당 작업을 끝내줄 수 있다. window 기준으로 [ctrl]+[alt]+[del]을 입력해서 작업 관리자로 이동 후 세부 정보에서 java.exe인 작업의 pic를 확인하고 하단의 작업 끝내기 버튼을 이용해서..
[web] Web server failed to start. Port 8080 was already in use처음 웹 프로그램을 하다보면 tomcat을 사용하면서 자주 접하는 오류가 바로 8080 포트를 다른 녀석이 점유하고 있어서 tomcat을 실행할 수 없다는 내용이다. 문제의 원인은 기존에 떠있던 tomcat이 좀비처럼 8080 포트에서 버티고 서있기 때문에 새로운 tomcat 서버가 실행하지 못하는 문제이기 때문에 기존의 tomcat을 종료하고 실행하면 되는 간단한 문제이다. 이번 포스트에서는 프로세스를 죽이는 2가지 방법에 대해서 살펴보자. 프로세스 죽이기 작업관리자 확용 먼저 작업 관리자에서 해당 작업을 끝내줄 수 있다. window 기준으로 [ctrl]+[alt]+[del]을 입력해서 작업 관리자로 이동 후 세부 정보에서 java.exe인 작업의 pic를 확인하고 하단의 작업 끝내기 버튼을 이용해서..
2022.03.24 -
eclipse 또는 STS에서 spring legacy 프로젝트를 생성 후 web.xml에 무언가를 설정하려 하면 자동완성이 잘 되지 않아 난감할 때가 있다. 어느덧 자동완성에 익숙해진 우리는 이런 경우 손가락이 멈춰버리게 된다. schema의 변경 원인은 web.xml에서 사용하는 namespace들의 값과 schema location이 변경되었기 때문이다. root element인 web-app을 아래와 같이 변경한다. 이제 반가운 팝업을 다시 확인할 수 있다.
[web]web.xml의 태그 자동완성이 안될 때eclipse 또는 STS에서 spring legacy 프로젝트를 생성 후 web.xml에 무언가를 설정하려 하면 자동완성이 잘 되지 않아 난감할 때가 있다. 어느덧 자동완성에 익숙해진 우리는 이런 경우 손가락이 멈춰버리게 된다. schema의 변경 원인은 web.xml에서 사용하는 namespace들의 값과 schema location이 변경되었기 때문이다. root element인 web-app을 아래와 같이 변경한다. 이제 반가운 팝업을 다시 확인할 수 있다.
2021.10.23 -
유연한 박스 모델(Flexible Box Model) HTML 태그들은 기본적으로 BOX 모델이 적용되며 세로로 적층하게 된다. 이를 가로로 배치하기 위해서 가장 널리 사용되는 방법이 float 속성을 이용해서 요소를 띄워주고 clear 속성으로 마무리하는게 일반적인데 부모 컨테이너의 생각과 달리 자식이 배치를 결정하기 때문에 억지스럽고 코드도 복잡해진다. CSS3에서는 flex라는 새로운 display 설정값이 나와서 가로 배치를 한결 손쉽게 처리할 수 있게 되었다. flex container적용하기 먼저 부모 요소에서 진행하느 설정에 대해 알아보자. flex는 display 속성의 값으로 상위 컨테이너가 자식을 어떻게 배치할 지 설정한다. 사용 가능한 값으로는 flex 또는 inline-flex가 있..
display:flex유연한 박스 모델(Flexible Box Model) HTML 태그들은 기본적으로 BOX 모델이 적용되며 세로로 적층하게 된다. 이를 가로로 배치하기 위해서 가장 널리 사용되는 방법이 float 속성을 이용해서 요소를 띄워주고 clear 속성으로 마무리하는게 일반적인데 부모 컨테이너의 생각과 달리 자식이 배치를 결정하기 때문에 억지스럽고 코드도 복잡해진다. CSS3에서는 flex라는 새로운 display 설정값이 나와서 가로 배치를 한결 손쉽게 처리할 수 있게 되었다. flex container적용하기 먼저 부모 요소에서 진행하느 설정에 대해 알아보자. flex는 display 속성의 값으로 상위 컨테이너가 자식을 어떻게 배치할 지 설정한다. 사용 가능한 값으로는 flex 또는 inline-flex가 있..
2020.09.10 -
웹페이지 액박 대처하기 웹 페이지를 만들다보면 아직 이미지가 없는 상태에서 위치, 크기만 지정해야할 경우가 많다. 이런 경우 크기가 맞지 않는 이미지를 가져다가 억지로 배치시켜 볼 수도 있지만 dummyimage.com 같은 사이트를 이용해보면 손쉽게 관련 처리가 가능하다. dummyimage.com dummyimage.com/은 이름그대로 동적으로 dummy 이미지를 생성해주는 사이트이다. Dynamic Dummy Image Generator - DummyImage.com Dynamic Dummy Image Generator by Russell Heimlich (@kingkool68) Documentation Size width x height Colors background color / text c..
웹페이지 액박 대처하기웹페이지 액박 대처하기 웹 페이지를 만들다보면 아직 이미지가 없는 상태에서 위치, 크기만 지정해야할 경우가 많다. 이런 경우 크기가 맞지 않는 이미지를 가져다가 억지로 배치시켜 볼 수도 있지만 dummyimage.com 같은 사이트를 이용해보면 손쉽게 관련 처리가 가능하다. dummyimage.com dummyimage.com/은 이름그대로 동적으로 dummy 이미지를 생성해주는 사이트이다. Dynamic Dummy Image Generator - DummyImage.com Dynamic Dummy Image Generator by Russell Heimlich (@kingkool68) Documentation Size width x height Colors background color / text c..
2020.09.08