개발 이야기 거의 하는 방

무료 템플릿 추천사이트

 많은 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)