내일을 위한 오늘

Let's Encrypt는 웹사이트에서 HTTPS를 무료로 사용할 수 있도록 SSL/TLS 인증서를 제공하는 비영리 인증 기관입니다. 아래 링크 중 첫 번째 사이트는 Let's Encrypt 홈페이지이고요, 두 번째 사이트는 쉘 엑세스 권한이 있는 경우, 정말 손쉽게 인증서 발급 및 설치를 자동화할 수 있도록 도와주는 곳입니다. Let's Encrypt 에서도 권장하는 방법입니다. 1. Let's Encrypt https://letsencrypt.org/ Let's Encrypt letsencrypt.org 2. Certbot https://certbot.eff.org/instructions?ws=apache&os=centosrhel7 Certbot Instructions Tagline certbot.e..

# 서버 설치 후, 루트 계정 비번 설정 passwd root # 설치 순서 설치 순서는 LAMP 순서대로 합니다. CentOS 7.9 => Apache 최신(2.4.54) => MariaDB 최신(10.8.6) => PHP 7.4 # AMP 설치 전 리눅스 버전 확인 cat /etc/redhat-release # AMP 설치 전 리눅스 커널 버전 확인 - 커널 버전 확인(MariaDB 버전 선택시 필요) cat /proc/version # yum 업데이트 yum update # EPEL 저장소(repository) - 중요! 최신 레포지토리가 아닐 경우, 이후 설치 과정에서 문제가 발생할 수 있습니다. yum install epel-release - 이미 설치된 EPEL 버전이 최신이 아닐 경우, 삭제..

글자나 단어를 세어주는 사이트를 만들어 보았습니다. 앞으로 이런 저런 사이트들을 많이 만들어 공유해보겠습니다. https://count.nurim.net 글자 수 세기 글자 수 세기. 웹사이트 블로그 포스팅, 이력서 작성, 원고지 작성시에 글자, 단어, 원고지 페이지 수 등을 쉽게 확인해드립니다. count.nurim.net 아래는 제가 썼던 글을 붙여넣기 해서 실제로 사용해 본 화면입니다. 1. 글자 수 세기 2. 단어 수 세기 3. 구글 번역 구글 번역도 사이트 내에 넣어보고 싶었지만, 구글에서 api 를 제공해주지는 않는 모양입니다. 제가 못찾은 걸지도.. 그래서 링크만 넣었습니다. 4. 맞춤법 검사 원래는 맞춤법 검사도 넣어보고 싶었습니다. 관련 내용을 검색하다 보니, 안타까운 이슈가 있어서 넣지..

반응형 웹이란? 반응형 웹 Responsive Web 이란 컴퓨터, 태블릿, 스마트폰 등의 여러 디바이스 환경에 따라 웹페이지의 구성이 적절하게 배치되도록 설계된 웹디자인 기법입니다. 그렇다면, 반응형 웹을 만드는 방법은 어떤 것들이 있을까요? 1. 미디어 쿼리를 이용한 방법 첫 번째로 소개할 방법은 가장 많이 사용되는 방법 중 하나인 CSS 미디어 쿼리를 이용한 방법입니다. 일반적으로 아래와 같은 css 코드를 이용합니다. @media 미디어 타입 (너비 및 높이) { (CSS 입력) } 이 방법의 장점은 하나의 HTML 코드만으로 여러 타입의 웹페이지를 분기하여 구성할 수 있다는 점입니다. 전형적인 PC 웹에서부터, 태블릿, 모바일 등을 모두 아우를 수 있는 멋진 방법이라고 할 수 있습니다. 유용한 ..

웹개발을 하다 보면, 늘 새로울 때가 있습니다. 심지어 10년 넘게 해 오던 일임에도 불구하고, 공부를 게을리 하다 보면 그런 경우가 더 자주 일어나곤 합니다. javascript jquery 를 이용해 html 코드 작업을 하다 보면 data-value 를 사용해야 할 경우가 생기는데, 지금에서야 당연하게 쓰고 있지만, 몇 년 전까지만 해도 alt 속성이나 title 속성 등을 이용해서 처리하곤 했습니다. data-value 라는 게 있는지도 몰랐으니까요. 외주 일을 처리하다가 거기 직원으로부터 data-value 에 관한 정보를 들었을 때의 그 새로움이란.. 아, 부끄러움은 덤이었습니다. 이번에는 흔히 콤보박스라고도 불리는 태그를 선택했을 때, 각 옵션값에 따라 파일 업로드와 같은 특정 요소를 추가하..

웹사이트 개발시, 페이지 어딘가에 공지사항을 보여주고 싶을 때 자주 사용하는 텍스트 세로 롤링 코드입니다. 이보다도 좀 더 부드럽게 롤링되는 걸 본 적이 있는데, 차후 수정할 수 있도록 해보겠습니다. Lorem ipsum dolor sit amet.. Lorem ipsum dolor sit amet, consectetur.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..

웹사이트 헤더 영역이 상단에 고정되기를 바라면서도, 스크롤을 내릴 때는 그 높이가 줄어들기를 원할 때가 있습니다. 그냥 딱딱하게 줄어들게 해도 되지만, 이왕이면 보기 좋게 부드럽게 줄어들었다가 다시 늘어났다가 할 수 있다면 더~욱 좋겠지요~ 해서 만들어보았습니다. css 기능 중에서 transition 을 이용하면 쉽게 구현할 수 있습니다. 여기서는 scrolled 라는 클래스명을 이용해 만들어보겠습니다. javascript 로는 스크롤시에 scrolled 라는 클래스를 더하거나 빼도록 하면 됩니다. 아래 내용을 참고 해주세요. HTML 삽입 미리보기할 수 없는 소스

반응형 웹이나 모바일에서 가로 스크롤은 애물단지 같은 존재입니다. 스크롤 기능은 유지하고 싶지만, 스크롤바 모양은 없애버리고 싶을 때.. 그 때 요긴하게 쓸 수 있는 css를 소개합니다. /* 스크롤 박스 기본 css */ .scroll_box { width:100%; height:200px; padding: 10px; overflow:auto; border:2px dashed gray; } /* 스크롤이 안보이게 하는 css */ .no_scroll { /* IE and Edge */ -ms-overflow-style: none; /* Firefox */ scrollbar-width: none; } /* Chrome, Safari,Opera */ .no_scroll::-webkit-scrollbar {..

앞서, Table 코드를 반응형으로 만드는 방법에 관한 글을 포스팅한 적이 있는데요. 2022.06.28 - [컴퓨터/css] - [CSS#1] Responsive Table and CSS 테이블 코드를 반응형으로 만들기 오늘은 또 다른 방향으로 사용할 수 있는 방법을 소개합니다. 표 안의 내용이 많은 경우, 모바일에서도 table 표를 그대로 가져가고 싶을 때가 있는데요. Table 구조는 깨지지 않게 유지하면서 좌우로 터치 스크롤 기능을 넣는 방법입니다. 사실 조금만 고민하면 금방 답이 나오는 것이긴 하지만, 그 생각할 시간마저 아까울 때, 그럴 때 쓰려고 적어 놓습니다. 코드 그대로 카피해서 브라우저로 확인해 보시면 가로 사이즈 480px 이하에서는 가로 스크롤이 확인될껍니다. 가로 스크롤이 거슬린..

웹 퍼블리싱을 하다 보면 꼭 고민에 빠지게 하는 것들이 있습니다. 백엔드 작업시에는 DB 접속을 최소한으로 줄이는 최적화 과정에서 주로 고민이 많고요. 프론트엔드 작업시에는 css 를 이용해 html 코딩을 어떻게 하면 효율적으로 할 수 있을가를 고민하게 됩니다. 그 중에서도 프론트엔드 작업시, 테이블 처리 문제는 없어지지 않는 난제이지요. TABLE 테이블 코딩은 모바일과 반응형웹의 시대로 넘어오면서 정말 계륵과 같은 존재가 되어버렸습니다. 그동안 저도 여러가지 방법을 사용했었는데요. 1. desktop 버전에서는 table 코딩, mobile 버전에서는 div 코딩으로 분기하는 방법 2. table 코딩을 사용하되, 모바일에서는 display:none 을 사용하여 모바일에 그나마 최적화하는 방법 3...