어제 오늘 내일

1. inline-block .parent { border: 1px solid black; margin: 1px; padding: 10px; text-align: center; } .child { display: inline-block; width: 100px; height: 100px; background-color: skyblue; border: 1px solid black; } 는 기본적으로 'block' 요소입니다. block 요소는 항상 새로운 줄에 표시되고, 가로폭 전체를 차지합니다. 따라서, 요소는 항상 수직으로 배치되어 쌓이게 됩니다. display: inline-block; 를 가로로 배치하기 위해서 inline-block 속성을 지정하였습니다. inline-block은 inline과 b..

Javascript에서 소수점 2번째 자리에서 올림, 내림, 반올림, 버림 하는 방법은 다음과 같습니다. 올림 (ceil()) ceil()은 주어진 숫자 이상의 가장 작은 정수로 값을 올리는 함수입니다. function ceilTest(number) { return Math.ceil(number * 100) / 100; } // 예제 document.write(ceilTest(10.123)); // 10.13 document.write(' '); document.write(ceilTest(5.6781)); // 5.68 입력값이 10.123인 경우를 예로 들어 설명하겠습니다. number * 100; 주어진 숫자 10.123에 100을 곱하면 1012.3입니다. Math.ceil(number * 100)..

CSS로 스크롤바를 항상 보이게 표시하려면 'overflow' 속성을 사용합니다. overflow, overflow-x, overflow-y 다음은 영역에 강제로 스크롤바를 생성한 예제입니다. 전체 scroll 가로 scroll 세로 scroll .mydiv1 { overflow: scroll; } .mydiv2 { overflow-x: scroll; } .mydiv3 { overflow-y: scroll; } div { width: 200px; height: 100px; background-color: skyblue; margin: 10px; border: 1px solid black; text-align: center; } overflow: scroll; 요소의 크기에 상관없이, 가로 세로 방향 스크..

Javascript에서 현재 날짜를 yyyymmddhhmmss 형식으로 표현하려면, 먼저 Date 객체를 활용하여 현재 날짜, 현재 시간을 구하고, 년, 월, 일, 시, 분, 초 정보를 읽어서 yyyymmddhhmmss 형식에 맞게 조합하여 줍니다. 먼저, 현재 날짜, 시간 구하는 방법이나, Javascript에서 날짜, 시간을 다루는 구체적인 방법은 아래 링크의 지난 포스팅을 참조하세요. [Javascript] 현재 날짜, 시간 구하기 [Javascript] Date 객체로 원하는 날짜, 시간 표현하기 [Javascript] 날짜 계산하기 (년/월/일 더하기, 빼기) [Javascript] 월의 마지막 날짜 계산하기 [Javascript] 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기 ..

경우에 따라 input 항목에 자동으로 포커스를 이동시켜서 사용자 편의를 증가시킬 수 있습니다. 다음은, 버튼 클릭 시 input 항목에 focus를 이동시키는 예제입니다. focus() 클릭하세요 function btnClick() { const myinput = document.getElementById('my-input'); myinput.focus(); } HTML 버튼 클릭 시, btnClick() 함수를 호출합니다. JAVASCRIPT document.getElementById('my-input'); getElementById() 함수를 이용하여, 포커스를 이동시킬 input 요소를 선택합니다. myinput.focus(); focus() 함수를 이용하여, 포커스를 input 요소로 이동시킵니..

Javascript를 이용하여 버튼 클릭 시 input form의 값(value)을 변경하는 예제입니다. 버튼 클릭 시, input 값 변경하기 클릭하세요 function btnClick() { const myinput = document.getElementById('my-input'); myinput.value = "안녕하세요"; } HTML 버튼을 클릭하면, btnClick() 함수를 호출합니다. JAVASCRIPT document.getElementById('my-input'); getElementById() 함수를 이용하여, id가 my-input인 input form 요소를 선택합니다. myinput.value = '안녕하세요'; 선택한 input form 요소의 value를 '안녕하세요'로 변..

1. pom.xml(maven인 경우) 또는 build.gradle (gradle인 경우) 파일 확인하기plugins { id 'org.springframework.boot' version '3.2.0' // 스프링부트 버전 } org.springframework.boot spring-boot-starter-parent 3.2.0 2. Project Structure 확인하기 (IntelliJ)File > Project Structure > Project Settings > Modules > main > Dependencies 프로젝트 스트럭처의 Dependencies 목록에서 Spring Boot 라이브러리의 버전을 확인할 수 있습니다. 3...

버튼을 클릭했을 때, Javascript를 이용하여 div 영역을 보여주거나 숨기는 예제입니다. 1. display 클릭하세요 #my-div { width: 100px; height: 100px; background-color: blue; } function btnClick() { const mydiv = document.getElementById('my-div'); if(mydiv.style.display === 'none') { mydiv.style.display = 'block'; }else { mydiv.style.display = 'none'; } } HTML 버튼 클릭 시, 호출할 함수를 연결합니다. JAVASCRIPT document.getElementById('my-div'); 보이기, 숨..

Javascript에서 오늘 날짜를 구하고, yyyymmdd 또는 yyyy-mm-dd 형식으로 출력하는 방법입니다. 먼저, 오늘 날짜를 구하는 방법은 지난 포스팅을 참조하세요. [Javascript] 현재 날짜, 시간 구하기 [Javascript] 현재 날짜, 시간 구하기 JavaScript에서 현재 날짜와 시간을 구하는 방법을 알아보도록 하겠습니다. 현재 날짜 구하기 See the Pen CurrentDate by anna (@hianna) on CodePen. new Date()는 현재 날짜와 시간을 가지는 객체를 리턴합니다. 현 hianna.tistory.com 오늘 날짜 yyyymmdd, yyyy-mm-dd 패턴으로 출력하기 // 오늘 날짜 const today = new Date(); // 년도..

jQuery의 메소드를 사용하여, div 요소를 숨기거나 보여줄 수 있고, 토글처리(숨겼다 보였다 반복) 할 수 있습니다. 1. show(), hide(), toggle() 2. slideDown(), slideUp(), slideToggle() 3. 천천히 숨기기, 보이기, 토글하기 1. show(), hide(), toggle() show() : 요소를 보여줍니다. hide() : 요소를 숨깁니다. toggle() : 실행 할 때마다, 요소 숨김/보여줌을 반복합니다. 보이기 숨기기 토글 #my-div { width: 100px; height: 100px; background-color: purple; margin: 5px; } // 보이기 $('#show-btn').click(function() { ..