블로그로 코드를 공유하고 바로 그 페이지에서 바로 에디터 확인하여 코드 수정하고 실시간으로 반영되어 볼 수 있게 뷰어도 만들어보자. 처음엔 iframe 만들어서 썼는데 매일 iframe 만들어서 공유하는 것은 정말 쉽지 않은 것 같더라…. 온라인 에디터 & 뷰어 jsdelivr 나 codepen 같은 사이트에서 제공하는 것처럼 최초에 저장되었던 코드가 나오고 그 코드를 수정할 수 있는 에디터 + 실시간 결과가 나오는 뷰어를 만들고 싶다. 어떻게 해야 코드를 수정 가능하게 공유하고 실시간으로 코드를 적용해서 보여줄 수 있을지 방법을 알아보자. 먼저 어떤 기능으로 만들 것인지 정리해보자….

w3.css 헤더 스타일 지정 헤더 스타일을 지정하는 방법을 알아보자. 헤더를 지정하여 포스트의 컨텐츠가 아니라 제목을 눈에 띄게 표현할 수 있다. 보통 헤더에 메뉴를 많이 넣어놓는 편이나 이 포스트에서는 헤더 지정하는 방법까지만 알아보자. 헤더 만들기 1단계) HTML 추가 2단계) CSS 추가 헤더 스타일을 큰 내부 여백, 가운데 정렬된 텍스트, 특정 배경색 및 큰 크기의 텍스트로 지정한다. 코드 실행

HTML, CSS, JS, PHP 등 언어를 블로그에 올릴 때 플러그인 없이 사용하고 싶어졌다. Prism.js랑 Highlight.js 중에 고민하다가 Prism.js가 더 가볍다고 해서 Prism.js로 결정했다. Prism.js 이용하여 구문 강조 하는 방법 알아보자. 구문 강조 (Syntax Highlighter) 구문 강조 파일 구문 강조 파일을 CDN 주소로 테마에 추가하건, 파일 자체를 다운로드 받아서 내 테마에 추가하건 파일이 테마에 추가되어있어야한다. CDN 이용 , , 중 한 곳에서 CDN 주소를 받아서 사용할 수 있다. 위 사이트 중 jsDelivr를 선택, 필요한 언어, 플러그인 등을 선택해봤다. jsDelivr에서 CDN 주소…

w3.css 정보 페이지 정보 페이지/회사 소개 페이지를 만드는 방법을 알아보자. 나는 누구이고 무엇을 하는지에 대한 설명이 들어간다. 요즘은 웹을 접속할 수 있는 장비의 종류가 굉장히 많아 모든 페이지가 다 반응형으로 만들어진다. About 페이지 만들기 1단계) HTML 추가 <div class=”about-section”> <h1>About Us Page</h1> <p>Some text about who we are and what we do.</p> <p>Resize the browser window to see that this page is responsive by the way.</p> </div> <h2 style=”text-align:center”>Our Team</h2> <div class=”row”> <div class=”column”> <div class=”card”> <img src=”/w3images/team1.jpg” alt=”Jane” style=”width:100%”>…

그냥 정말 갑자기 급 WordPress 싱글 포스트에 모달창을 추가로 넣고 싶어졌다. 가능한 WordPress에 플러그인은 최소화하는 것이 목표다. 모달 코드는 이전에 공부했던 것들을 참고하여 내가 새롭게 코드를 다시 짰다.   모달 모달이란, 새로운 윈도우를 여는 팝업이 아닌 현재 페이지의 앞쪽에 다른 화면을 만들어 보여주는 창을 의미한다. 만들고 싶은 모달을 정리해보자. 모달을 열면 주변 배경이 오버레이된다. 오버레이된 부분을 클릭하면 닫힌다. 오버레이된 부분의 우측 상단에 흰색으로 닫힘 버튼(✕)이 들어가있다. 모달 안의 내용이 길어질 경우 스크롤이 생겼으면 좋겠다. 이미지의 경우 이미지를 클릭해도 닫힌다. 간편하게…

w3.css 연락처 섹션 웹 페이지에 반응형 연락처 섹션을 만드는 방법을 알아보자. 일반적으로 연락처 섹션을 만들어서 방문자들에게 메일로 연락을 받을 수 있다. 이 방법은 입력을 받는 것까지 구현한다. 이 이후 작업은 PHP를 다뤄야 한다. 연락처 섹션 만들기 1단계) HTML 추가 <div class=”container”> <div style=”text-align:center”> <h2>Contact Us</h2> <p>Swing by for a cup of coffee, or leave us a message:</p> </div> <div class=”row”> <div class=”column”> <img src=”/w3images/map.jpg” style=”width:100%”> </div> <div class=”column”> <form action=”/action_page.php”> <label for=”fname”>First Name</label> <input type=”text” id=”fname” name=”firstname” placeholder=”Your name..”> <label…

Synology NAS에 DDNS 주소로 등록해놓고 SSL을 등록해놓았는데 인증서 갱신이 자동으로 안되서 계속 오류가 나더라… 그래서 인터넷 찾아보다가 발견한 . 설명을 완전 잘해주셔서 바로 SSL 등록 완료. 자동 갱신까지 잘 되길 바라며 공부하기 위해 정리 해본다. 시놀로지에 Wildcard SSL 인증서 등록하고 자동으로 갱신하는 방법을 알아보자. 준비 진행하기 전, 어떤 것들을 준비해야 하는지 알아보자. Cloudflare에 등록한 개인 도메인 (반드시 Cloudflare에서 구매한 도메인일 필요는 없다.) Cloudflare에 도메인 등록 방법 접속 » 로그인 » 계정 & 암호 입력 후 로그인 [도메인 추가] 클릭 도메인…

Synology에서 Cloudflare DDNS를 등록하여 사용하다가 어느 순간부터 계속 DDNS 등록할 수 없다는 메일과 알림이 확인되었다. 순서대로 따라서 진행하여 Cloudflare DDNS로 도메인을 등록해보자. 준비 진행하기 전, 어떤 것들을 준비해야 하는지 알아보자. DSM 7.0 이상으로 업데이트 Python3 설치 Cloudflare에 등록한 개인 도메인 (반드시 Cloudflare에서 구매한 도메인일 필요는 없다.) Cloudflare에 도메인 등록 방법 접속 » 로그인 » 계정 & 암호 입력 후 로그인 [도메인 추가] 클릭 도메인 주소 입력 » [계속] Free 선택 » [계속] [레코드 추가] » [활성화로 계속] 도메인 등록 완료…

Cloudflare에서 도메인 등록은 끝났고 Synology에 DDNS를 등록하려면 보안을 위해 Cloudflare User API Token을 받아야한다. 어떻게 User API Token 받을 수 있는지 방법을 알아보자. Cloudflare User API Token 접속 » 로그인 » 계정 & 암호 입력 후 로그인 프로필 » 내 프로필 [API 토큰] [토큰 생성] 영역 DNS 편집 – [템플릿 사용] 영역 리소스 – [도메인 선택] » [요약 계속] [토큰 생성] [COPY] – 복사

Synology NAS에 개인 도메인을 DDNS로 연결할 때 외부 DDNS 서버를 이용해야한다. 그 중에 Cloudflare를 선택했고 Cloudflare에 개인 도메인 등록하는 방법을 알아보자. Cloudflare에 도메인 등록 방법 접속 » 로그인 » 계정 & 암호 입력 후 로그인 [도메인 추가] 클릭 도메인 주소 입력 » [계속] Free 선택 » [계속] [레코드 추가] » [활성화로 계속] 도메인 등록 완료 마지막으로 도메인을 구매한 사이트로 접속 후 DNS 서버를 Cloudflare로 설정하면 된다. DNS 변경 반영되기까지 최대 24시간 소요될 수 있다.