본문 바로가기

3분만에 Github Page로 홈페이지제작 3분만에 Github Page 만들기회사, 블로그, 포폴용 페이지 등에 활발히 쓰이고 있으며 kakao의 기술블로그로도 쓰이는 github page를 이용해 3분만에 홈페이지를 제작해보자. Repository 생성repository를 만들되 이름은 아무렇게나 해도 무방하다. username.github.io 로 Repository name을 지정하면 username.github.io 주소의 기본 github page가 생성되고, 그 외의 이름으로 지정하면 username.github.io/지정한 이름이 주소가 된다. 나는 github_page_test로 지정했고, 따라서 주소는 SaintSilver.github.io/github_page_test 가 된다. git init이제 로컬에 폴더를 하나 만들고,..
비밀번호 보기/숨기기 기능구현 비밀번호 보기/숨기기 기능구현최근엔 비밀번호 정책이 엄격해져서, 비밀번호 최소길이는 보통 8자가 기본이고 대문자를 섞으라거나 특수문자를 섞으라는 요구를 하는 곳이 많다. 모바일에서 특히 이런 복잡한 비밀번호를 입력하다보면 나도 모르게 비밀번호가 틀리는 경우가 많고, 어떤 과정을 진행중 비밀번호가 틀렸는데 과정이 초기화되고 리다이렉트 되버리는 상황을 겪는 경우도 있다. 그래서 눈 모양으로 비밀번호 입력창 옆에 자리한 아이콘을 누르면, 내가 지금까지 입력한 비밀번호가 보였다가 다시 *로 바꾸는 기능이 존재하는 곳들이 있으면 반갑기도 하다. IE 11에서는 기본적으로 브라우저에 내장된 기능이기도 하다. (추가) 최근 구글 로그인에 이 기능이 생겼다! 생각보다 구현은 매우 간단하다. 따라할 것도 없이 예제만 보..
"맨 위로" 버튼 구현하기 "맨 위로" 버튼 구현하기SPA 웹페이지나 댓글이 200개 300개 달린 페이지에서 사용자가 직접 맨 위로 되돌아가기 위해 스크롤을 직접 이동하는 것은 고역이다. 특히 모바일로 접속한 사용자라면 더더욱 그렇다.모바일 삼성인터넷 앱은 맨 위로 가는 기능이 내장되어 있지만 모바일 크롬 등은 아직 그런 기능이 없기 때문이다. 그래서 요즘엔 어딜 들어가든 대부분 맨 위로 가는 버튼이 존재하는데, 가끔 이게 없는 사이트를 들어가면 성질이 뻗칠 때가 있다. (대부분 블로그들) 현재 내 블로그에도 적용되어 있다. (우측 하단)1. 태그와 #가장 쉬운 방법은 태그를 사용하는 것이다.아래와 같은 태그 하나만으로 페이지 맨 꼭대기까지 이동시켜준다. #만 사용되면 그것은 곧 자기 페이지 자체를 의미한다.1맨 위로cs 그러나..
An attempt was made to authenticate the locked user 톰캣으로 올려놓은 서버에 어느날An attempt was made to authenticate the locked user "admin"...An attempt was made to authenticate the locked user "tomcat"...메시지가 우르르. 로그를 보니 manager 폴더에 접근해 비밀번호를 무작위로 쳐보는 것 같다. server.xml 에서 아래와 같이 추가해 특정 IP만 접근을 허용한다.컴마(,)로 구분해서 여러개의 IP를 넣어도 무방.123 Colored by Color Scriptercs 반대로 특정 IP만 차단하려면 아래와 같이 한다. 123 Colored by Color Scriptercs
언제 float / inline-block / table / flex 를 사용하는가 I base most of my core layout choices first on browser scope, then by requirement. When I say “browser scope” what I really mean is, “oldest version of IE I have to support”:Showing things side by side:IE7: floats and clearsIE8–9: inline-block, floats, clearsIE10+ flexVertical Centering:IE7–9: inline-table; table-cell; tableIE10+: flexGetting stuff to take up horizontal space based on the conten..
자바스크립트와 세미콜론 자바스크립트와 세미콜론자바스크립트 엔진은 일정 규칙에 따라 세미콜론을 자동으로 삽입해준다.(물론 세미콜론을 붙이는 것이 기본이다)가끔 오픈소스들을 둘러보다 보면 세미콜론을 삽입하지 않은 코드를 어렵지 않게 본다. 단지 가독성을 위해서만 세미콜론이 필요한가?예1아래와 같이 세미콜론이 생략된 코드가 있다.const a = 5const b = 10const c = a + b [1, 2, 3].forEach((e) => console.log(e))cs 코드만 봐도 어렵지 않게 아래와 같은 결과를 기대할 것이다. 123 그러나 직접 실행해보면 아래와 같은 에러를 뱉는다.[1, 2, 3].forEach((e) => console.log(e)) TypeError: Cannot read property 'forEach..
Common Spring boot Properties Common Spring boot Properties# ---------------------------------------- # CORE PROPERTIES # ---------------------------------------- debug=false # Enable debug logs. trace=false # Enable trace logs. # LOGGING logging.config= # Location of the logging configuration file. For instance, `classpath:logback.xml` for Logback. logging.exception-conversion-word=%wEx # Conversion word used when logging e..
CSS : cubic-bezier란? cubic-bezier란?cubic-bezier() function은 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다. #target{transition: all 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75);}Colored by Color Scriptercs그래서 그게 뭔데?베지어 곡선(bezier curves) 이라는 것이 있다. 아래에 위키피디아 소개를 번역해봤다. 베지어 곡선은 부드러운 곡선을 모델링하기 위해 컴퓨터 그래픽에서 널리 사용된다. 커브가 컨트롤 포인트의 볼록한 선체에 완전히 포함되어 있기 때문에 점을 그래픽으로 표시하고 직관적으로 커브를 조작하는 데 사용할 수 ..