에스 (6) 썸네일형 리스트형 스프링부트 뷰 템플릿 (타임리프, 제이에스피) 동적화면을 표시하기 위해 스프링 부트에서 사용가능한 다양한 도구가 존재합니다. 오늘은 어떠한 툴을 어떻게 연결하는 지와 사용방법을 살펴보겠습니다. HTML 삽입 미리보기할 수 없는 소스 파일업로드 파일은 유저가 가진 이미지, 비디오, 문서 등을 의미하며, 일반 폼에 비해 형식과 보안 등에 있어 조금 더 많은 작업이 필요합니다. 오늘은 노드제이에스 서버에 파일을 업로드하는 방법을 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 검색 엔진최적화 (다국어 블로그) 다국어블로그를 만들고 검색 엔진최적화 부분을 알아보던 중 마침 구글의 경우 동일한 콘텐츠를 여러 언어버전으로 생성한 경우 인덱싱과 검색결과를 보여줄 때 반영할 수 있는 기능이 있어 소개해 드리고자 합니다 구현하기 구현은 아래 태그를 동일한 콘텐츠를 포함하는 모든 페이지에 삽입합니다. 'lang_code'는 두 자리 언어코드를 'url'은 해당하는 페이지 주소를 사용합니다. 예시 보기 티스토리에서 만든 다국어 블로그를 가지고 해당 기능을 구현해 보겠습니다. 관리자 화면에서 '블로그 관리' -> '스킨편집' -> 'HTML 편집' -> 'HTML' 순으로 이동하여 아래처럼 'alternate' 링크 태그를 삽입합니다. 주소 없이 링크만 삽입하는 이유는 구현된 다국어블로그 각 페이지마다 링크를 삽입하지 않고 .. 노드제이에스 서버 만들기 웹 서버는 웹애플리케이션에 사용자가 접근 가능하도록 사이트의 모든 정보 (파일들)를 담고 있습니다. 해당 정보요청과 요청에 대한 응답은 HTTP(S)로 많이 이루어지는데요. 오늘은 Node.js에 탑재된 모듈인 'http'를 사용하여 웹 서버를 만들어보겠습니다. HTML 삽입 미리보기할 수 없는 소스 CSS 컴포넌트 - 토글버튼 HTML과 CSS로 토글 버튼을 만들어보겠습니다. 구현 코드 방법 1 HTML CSS /* toggle */ label { height: 30px; width: 60px; border-radius: 30px; } input { display: none; } input:checked + span { background-color: gray; } input:checked + span::before { left: 30px; } .toggle-circle { height: 100%; width: 100%; display: block; border-radius: 30px; transition: 0.4s ease; border: 1px solid black; position: relative; } .toggle-c.. CSS 컴포넌트 - 카운트다운 CSS animation을 활용해서 카운트다운을 구현해 보겠습니다. 구현 코드 HTML 카운터로 표시될 만큼의 숫자를 추가합니다. 1 2 3 Go CSS 애니메이션에서 delay를 통해 순차적으로 작동하도록 구현합니다. /* count */ .count { height: 50px; width: 50px; position: relative; margin: auto; overflow: hidden; } .count .num { height: 40px; position: absolute; bottom: -5px; left: 50%; transform-origin: bottom; transform: translateX(-50%) rotate(180deg); font-size: 1.5rem; } .count .n.. 이전 1 다음
