개발 이야기 거의 하는 방

아래처럼 pattern 속성값을 추가해줍니다 (출처 : 출처: https://kcmschool.com/184 [web sprit])

<input type="number" pattern="\d*">

간혹 css를 아무리 변경해도 바로 적용이 안 되는 경우가 있습니다.

서버 스크립트 문제인가 싶어서 설정을 해봐도 적용이 되지 않았는데, 크롬에서 시크릿모드로 호출시 바로 적용이 되더라구요.

 여기서 브라우저 캐시문제라고 예상되어 해결책을 찾아봤는데 생각보다 간단했습니다.

    <link href="<?php echo base_url(); ?>static/css/sb-admin-2.css?after" rel="stylesheet">

 css link 경로에서 css끝에 아무 파라미터만 연결해주면 됩니다.

위에서는 경로에 '?after'라는 파라미터를 추가해 주니 바로 반영이 잘 되었습니다.

브라우저가 다른 css를 인식하게 해주는 방법 중 하나인데요, 아래 블로그 글에서 참고하여 잘 해결하였습니다.

감사합니다.

https://meaownworld.tistory.com/89​

무료 템플릿 추천사이트

 많은 Front-End Framework가 있지만 사용자도 많고 접근성이 좋은 Bootstrap을 활용해보겠습니다.

무료 템플릿을 제공하는 사이트가 많이 있는데 제가 자주 이용하는 사이트는 아래 링크에 연결해놨습니다.

https://startbootstrap.com/

접속 후 아래 화면처럼 원하시는 카테고리를 선택 할 수 있습니다.

 학습이나 회사 내부 사이트를 구축할 때 아래의 'SB Admin 2'라는 무료템플릿을 자주 이용합니다.

다음에 이 템플릿을 서버(웹 사이트)에 어떻게 적용할지 알아보겠습니다

https://startbootstrap.com/theme/sb-admin-2

Content 부분만 은은한 배경화면 구성을 해봤읍니다.

블로그관리 > 스킨편집 > html 편집

위 순서로 접근 하신 후 '파일업로드 > + 추가' 버튼을 눌러 원하는 배경화면을 추가해줍니다.

그 다음 파일업로드 옆 'CSS'을 선택하여 Ctrl + F로 'content-inner' 검색을해보면 Content관련된 클래스가 있으며 아래처럼 수정을 해주면 배경화면이 반영됩니다.

/*
 * content
 */
#content { margin: 0 0 0 330px; padding: 0; }
#content-inner { max-width: 1030px; width: 100%; padding-right: 30px; 
	 position: relative;
}

#content-inner::before {    
  background-color: #ffffff;
	content: "";
	background-image: url(https://tistory2.daumcdn.net/tistory/4854076/skin/images/header_new222.png);
        opacity: 0.1;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
}

#content-inner::befor 을 생성하여 배경화면에 투명값(Opacity)를 넣을 경우 텍스트 포함한 전체가 투명해지기 때문에 'before'라는 가상박스를 활용하여 투명해지는 부분을 분리하였습니다.

(참고 : https://ddorang-d.tistory.com/89)