AD

TGD 템플릿 디자인 게시판 기본 제공 CSS 사용방법

Global Moderator 제이포
2019-03-02 04:32:12 10486 27 8

현재 사용되고 있는 CSS입니다. 사용 및 편집 수정은 자유입니다.

4가지 부분으로 구성되어있습니다.


1. 폰트 가져오기 - 웹폰트를 사용합니다.

2. 컬러 파레트 및 기본설정 - 아래의 메인 CSS와 컴포넌트를 사용하기 위해 설정값을 미리 정해둡니다.

3. 메인 CSS - 대부분의 규칙들을 이곳에 몰아둡니다.

- PC버전모바일버전

4. 컴포넌트 - 특별한 효과를 추가적으로 넣어줍니다.

- 드롭다운 리스트 효과

서치박스 효과


사실 1개의 css에 다 몰아 넣어도 상관없습니다.

하지만 CSS를 잘 몰라도 모듈화가 잘 된 코드조각들을 입맛에 따라 선택해 적용가능하도록 구성하고 싶습니다.


CSS 디자인 게시판과 똑같이 사용하고 싶으시다면, 4개의 항목을 모두 붙여넣어주시고,

2번 항목에서 색깔 코드와 로고 이미지 링크만 바꿔주시면 됩니다.


< 설정 화면 >

c58dca36a205469910ff29a0c521b7fe.png


※ 주의사항

@import 로 가져온 파일 내에서 재차 @import를 사용하는 경우, 로딩성능에 영향이 있을 수 있습니다.

초기버전을 만드실 때에는 쪼개어서 테스트 해보시고, 어느정도 변경사항이 없어지면 하나의 파일로 묶는 것을 추천드립니다.

댓글 8개  
이전 댓글 더 보기
▲윗글 데스크톱 CSS 데모 2 Million_Air
▼아랫글 백그라운드 눈오는 효과 css와 이미지 주소 0114생일챙겨주세요
공지사항자유게시판질문 답변튜토리얼정보 나눔TGD 템플릿Twip 템플릿
18
TGD 템플릿
데스크톱 CSS 데모 3 [2]
Million_Air
03-21
6
03-13
18
TGD 템플릿
데스크톱 CSS 데모 2 [14]
Million_Air
03-08
»
03-02
24
TGD 템플릿
백그라운드 눈오는 효과 css와 이미지 주소 [21]
0114생일챙겨주세요
03-02
37
03-02
89
TGD 템플릿
CSS 템플릿 (모바일 버전) [2]
Moderator 우연의일치
03-01
126
TGD 템플릿
CSS 템플릿 (데스크톱 버전) [18]
Moderator 우연의일치
03-01
인기글 글 쓰기