728x90 프로그래밍/Web [HTML]9 리다이렉트가 필요한 이유 ( 포워드 차이점 ) 쇼핑몰로 예를 들겠습니다. 이 쇼핑몰에는 회원 등급이 매겨져 있습니다. ( 게스트, 일반, vip, vvip 등등 ) 같은 쇼핑몰의 이용자라도 특정 등급이 되어야만 열람할 수 있는 게시글이 있습니다. 즉, 특정 게시물의 접근 권한을 부여해야 한다는 것입니다. 만약에.. 등급을 요하는 게시글의 URL을 알아내여 주소창에 입력해서 접근을 한다면 권한이 없으니 응답하지 말아야 합니다. 그러니 글에 접근하려고 시도할때마다 권한을 검사하도록 리다이렉트를 시키는 겁니다. ( 로그인이 안되어있으면 로그인 페이지로 리다이렉트 함 ) 라다이렉트와 포워드의 차이점 특정 URL을 사용자가 접속시 리다이렉트, 포워드가 일어나게 되면 작업 중인 페이지가 전환된다. 이렇게만 두고 본다면 이 둘의 차이점을 느낄 수가 없다. 겉을 .. 2023. 4. 3. Thymeleaf를 사용하는 프로젝트 Thymeleaf를 사용하기 위해서는 프로젝트를 생성할때 템플릿 엔진 항목에서 Thymeleaf를 추가한다. Thymeleaf를 이용하는 프로젝트는 변경 후 만들어진 결과를 보관(캐싱)하지 않도록 설정 해두는 것이 편리합니다. 이 말의 뜻을 아직까지 잘 모르겠다.... 하다보면 보관하면 안되는 이유를 알지 않을까 싶다. 설정법은 다음과 같다. application.properties 파일에 아래의 구문을 넣어준다. spring.thymeleaf.cache=false 책의 예제를 따라해보려고 한다. 우선은 SampleController 클래스를 추가해 보자 첫번째로 잘 작동하는지 알아보기 위해 SampleController 에 @Log4j2 를 적용을 한다. 아하... 그러면 의문점이 생긴다 @Log4j2.. 2023. 4. 3. 노드 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운로드 받습니다. npx create-react-app my-react-practice npx, create-react-app은 노드 명령어 react-practice는 폴더이름 react-preactice폴더에 리액트 프로젝트 생성 리액트 실행 구문 cd my-react-practice npm start npm start 파일의 구조입니다. 리액트 파일 구조를 익히도록 하자. 파일을 임포트 하는 것은 비슷하다. 이러하다. js파일에 css를 임포트 하여 모양을 꾸민다. css파일도 복잡할 것 없이 .. 2023. 3. 23. 폰트 편 - 간단하게 설정하자 먼저 파일로 폰트를 바꾸는 법을 알아보자 https://fonts.cafe24.com/ 카페24 상업용 무료 폰트 다운로드 - 카페24 라이선스 걱정 없이 어디서나 사용할 수 있는 상업용 무료 폰트 fonts.cafe24.com 여기서 원하는 폰트를 다운받아서 작업할 위치에 폰트 폴더를 생성후 파일을 붙여넣어 준다. 여기서 아마모네 폰트가 눈에 띄였다. 그래서 아마모네 폰트로 설정해보자. 카페24 아네모네 폰트!! 이렇게 파일을 설정하면 폰트가 바뀐다. 이렇게 하면 폰트파일을 여러가지로 많이 가지고 있어야 한다는 단점이 있다. 간단히 구글 폰트로 바꿔보자 https://googlefonts.github.io/korean/ Google Fonts + 한국어 • Google Fonts + Korean goo.. 2022. 12. 2. 체크 박스 편 - 모양만 만듭니다. 웹서핑을 하다보면 선택을 할수있는 체크 박스가 있다. 그것을 만들어 보도록 하자. 3개를 추가했으니 3개가 만들어진다. 실행해서 클릭하면 꺼졌다 켜졌다 잘 작동된다. 아하... 체크표시가 처음부터 되어있게 하고싶으면 뒤에다 checked를 입력하면 체크표시가 활성화 되있는 상태에서 실행이 된다. 라디오 기능을 써보자 이 기능은 그룹중에 하나만 선택이 된다. 예를 들어 5개의 선택지중 하나만 선택한다는 문제를 만들었을때 사용하는 기능이다. 간단히 만들수가 있다. 이것을 어떻게 활용하면 좋을지 기대가 된다. 2022. 12. 2. 아이콘 편 html에서 아이콘을 불러와서 원하는대로 사용해보자. 무엇을 해볼까? 간단하게 오늘 온도가 추우니 기온이 궁금하다 자자 온도계를 꺼내서 써보자 우선 아이콘을 찾을 링크를 알려줘야한다. https://cdnjs.com/libraries/font-awesome font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service truste.. 2022. 12. 2. 등급 분류 모양 만들기 우선 크게 생각한다. 2개로 나누면 관람가 아이콘과 관람가 설명이다. html파일을 만들면 wrap으로 감싸고 그안에 서클을 추가한다. 12 12세이상 관람가 15 15세이상 관람가 청불 청소년 관람불가 전체 전체관람가 wrap에는 12세이상 관람가, 15세이상 관람가 등등 글자 설정이 먹힌다. 그러면 css폴더를 생성하고 스타일 css파일을 생성해보자 #wrap { width: 800px; height: 50px; text-align: center; background-color: #663399; float: left; font-size: 20px; } #age12 { width: 50px; height: 50px; color: white; background-color: #1E90FF; border-.. 2022. 12. 1. margin 편 우선 margin의 사용법을 알아보자. 마진 (margin)은 요소 사이 간격을 뜻한다. 방향대로 나열해보자. margin-left : 왼쪽 마진 margin-right :오른쪽 마진 margin-top : 위쪽 마진 margin-bottom :아랫 마진 방향을 하나씩 할 때는 이렇게 하고 한번에 하는 방법은 margin : 4방향 마진 다 설정 margin : 10px; - 4방향 마진 모두 10xp margin : 10px 20px; - 윗마진 10 픽셀 오른쪽 마진 20 팍셀 - 아랫마진 10픽셀 왼쪽 마진 20 픽셀 margin : 10px 20px 30px; - 윗 마진 10픽셀 오른쪽 마진 20픽셀 아래 마진 30픽셀 왼쪽 마진 20픽셀 margin : 10px 20px 30px 40px; -.. 2022. 12. 1. Visual Studio Code - 설치방법 1. 공식 홈페이지에서 운영체제에 맞게 다운 받는다 (링크는 아래에) https://code.visualstudio.com Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. 설치 파일을 실행시켜 완료한다. 3. 확장탭을 클릭하여 아래의 확장도구를 .. 2022. 11. 26. 이전 1 다음 728x90
