IT 일기장

이 글은 input type이 text였을 때가 아닌 number인 상황이었을 때 maxlength가 작동하지 않는 점에 대해 작성했다.text였다면 저 maxlength가 제대로 먹혔을 텐데..아래 GIF 이미지와 같이 number로 설정했을 때 우측에 생기는 화살표로는 max와 min 속성이 제대로 작동하지만사용자가 직접 입력했을 때는 먹히지 않는다.maxlength도 마찬가지였다.    따라서 javascript나 jquery를 이용해서 사용자가 입력했을 때 maxLength 속성을 가져와내가 입력한 길이와 비교해서 입력한 길이가 더 길면 maxLength까지 자르는 방식으로 처리한다.   var $fileCountInput = $('input[name="${pageId}ppbFileCount"]'..

검색하다 우연히 구글 검색에 관한 이스터에그를 발견하게 됐는데 그 중 하나인 "do a barrel roll"이다. 구글 검색 이스터에그 검색하면 재밌는 기능들이 숨어있더라~ 공공기관 프로젝트 하면서 항상 정적인 것들만 다뤄서 심심했는데 이런거보면 또 재밌다. 아무튼 "do a barrel roll"이라는 단어를 구글에서 검색하면 아래 화면처럼 검색 결과 화면이 360도 돈다. 별거 아니지만 신기해서 비슷하게 구현을 해봤다. 어떻게 화면이 돌아가는지에 대한 원리만 알면되니까. 간단하게 div 영역잡고 해보자. welcome to "do a barrel roll"~ content class에 양념칠 해보자. CSS를 잘 몰라서 가운데 영역잡고 테두리랑 배경색 칠해주고 글자만 좀 크게.. .content {..

관리자 페이지 만들고 있었던 중 설문조사 대표 이미지 사용여부 부분이 [사용, 미사용] iCheck 부분과 [파일 선택] 부분이 너무 딱 붙어있는데.. 맘에 안든다. 좀 떨어져 있으면 좋겠다 싶어서 CSS를 찾아봤다 방법은 간단했는데 파일 선택 input box에 상단 여백을 주면 된다 #id or .class {margin-top:15px;}

저번에는 id 속성으로 CSS를 먹였었는데 이번엔 class 속성으로 먹였다. index.html My First CSS Example This is a paragraph style.css .center {text-align:center;color:blue;} 아직은 정말 쉽다 class 속성중 center라는 명을 가진 애들은 CSS를 먹일 수 있다. p tag 의 class 속성중 center라는 명을 가진 애들을 지정할수도 있다. style.css p.center {text-align:center;color:blue;} id 속성도 마찬가지지만 class 속성에 여러개 이름을 지정할 수 있다. 뭐 아직까지는 이해하는데 무리가 없다. index.html My First CSS Example This ..

내용은 태그에 속성을 주고 CSS를 줄 수 있다는 내용이다 1번째는 id 속성.. index.html My First CSS Example This is a paragraph style.css #para{text-align:center;color:blue;} 당연히 id 준곳에 CSS가 먹겠지 근데 궁금했던건 저 css에 p tag 옵션을 추가해주면 어떻게 될까? style.css #para{text-align:center;color:blue;} p{text-align:left;color:red;} id 속성에 준건 변하지 않고 아래 p tag만 변경됐다. p tag 소스를 먼저 적어도 마찬가지.

HTML과 CSS는 있는 소스에서 수정을 해본적은 있어도 직접 틀을 잡고 그려보거나 그런적이 없어서 어디서 접해보면 될지 막막하다가 W3SCHOOL에서 한번 해보기로 했다. 개발 툴은 Visual Studio Code로 해보고있다. 여기서는 html에다 style 태그 주고 하나로 만들던데.. 좀 지저분해보여서 css 파일 따로 하나 만들어서 해봤다. index.html My First CSS Example This is a paragraph style.css body{background-color:lightblue;} h1{color:white; text-align:center;} p{font-family:verdana; font-size:20px;} 무난했다. body tag에 배경색 칠하고, h1 ..