커뮤니티 스타일시트
작성자 정보
- 최고관리자 작성
- 작성일
컨텐츠 정보
- 344 조회
- 목록
본문
커뮤니티 스타일시트
12-1. 기본 텍스트 스타일
1. 제목 스타일
H1 제목 스타일
H2 제목 스타일
H3 제목 스타일
H4 제목 스타일
H5 제목 스타일
2. 문단 스타일
기본 문단입니다. 텍스트가 길어지면 이렇게 표시됩니다. 줄 간격과 여백이 조정되어 가독성이 높습니다.
굵은 글씨와 기울임 글씨, 밑줄, 취소선 등 다양한 텍스트 스타일을 적용할 수 있습니다.
3. 색상 텍스트
파란색 텍스트, 녹색 텍스트, 빨간색 텍스트, 주황색 텍스트, 보라색 텍스트
4. 강조 텍스트
왼쪽 테두리가 있는 강조 텍스트입니다. 중요한 내용을 표시할 때 사용합니다.
12-2. 레이아웃 요소
1. 2단 컬럼 레이아웃 (테이블)
왼쪽 컬럼왼쪽 컬럼의 내용입니다. 테이블을 이용한 2단 레이아웃입니다. |
오른쪽 컬럼오른쪽 컬럼의 내용입니다. 테이블을 이용한 2단 레이아웃입니다. |
2. 3단 컬럼 레이아웃 (테이블)
첫번째 컬럼첫번째 컬럼 내용입니다. |
두번째 컬럼두번째 컬럼 내용입니다. |
세번째 컬럼세번째 컬럼 내용입니다. |
3. 2단 컬럼 레이아웃 (Float)
4. 3단 컬럼 레이아웃 (Float)
12-3. 버튼 및 링크 요소
1. 기본 버튼
2. 둥근 버튼
3. 테두리 버튼
4. 크기별 버튼
5. 버튼 그룹
12-4. 박스 및 카드 요소
1. 기본 박스
기본 박스 제목
기본 박스 내용입니다. 테두리와 여백이 있는 단순한 박스입니다.
2. 색상 박스
정보 박스
정보를 제공하는 파란색 박스입니다.
성공 박스
성공 메시지를 표시하는 녹색 박스입니다.
주의 박스
주의 사항을 알리는 주황색 박스입니다.
경고 박스
경고 메시지를 표시하는 빨간색 박스입니다.
3. 카드 요소
12-5. 목록 및 테이블 요소
1. 기본 목록
순서 없는 목록 (ul)
- 목록 항목 1
- 목록 항목 2
- 목록 항목 3
- 목록 항목 4
순서 있는 목록 (ol)
- 목록 항목 1
- 목록 항목 2
- 목록 항목 3
- 목록 항목 4
2. 중첩 목록
- 상위 항목 1
- 하위 항목 1.1
- 하위 항목 1.2
- 하위 항목 1.3
- 상위 항목 2
- 하위 항목 2.1
- 하위 항목 2.2
- 상위 항목 3
- 하위 항목 3.1
3. 체크 및 엑스 목록
- ✓ 체크 목록 1
- ✓ 체크 목록 2
- ✓ 체크 목록 3
- ✗ 엑스 목록 1
- ✗ 엑스 목록 2
- ✗ 엑스 목록 3
4. 기본 테이블
| 제목 1 | 제목 2 | 제목 3 |
|---|---|---|
| 내용 1-1 | 내용 1-2 | 내용 1-3 |
| 내용 2-1 | 내용 2-2 | 내용 2-3 |
| 내용 3-1 | 내용 3-2 | 내용 3-3 |
5. 스타일이 있는 테이블
| 제목 1 | 제목 2 | 제목 3 |
|---|---|---|
| 내용 1-1 | 내용 1-2 | 내용 1-3 |
| 내용 2-1 | 내용 2-2 | 내용 2-3 |
| 내용 3-1 | 내용 3-2 | 내용 3-3 |
12-6. 인용문 및 코드 블록
1. 기본 인용문
인용문 내용입니다. 좌측에 세로 테두리가 있는 기본 인용문 스타일입니다.- 인용 출처
2. 스타일이 있는 인용문
스타일이 있는 인용문입니다. 큰 따옴표 아이콘을 포함한 인용문 스타일입니다.
- 인용 출처
3. 컬러 인용문
파란색 배경의 인용문입니다. 강조하고 싶은 인용문에 사용할 수 있습니다.
- 인용 출처
4. 기본 코드 블록
// 자바스크립트 코드 예시function greet(name) {console.log("안녕하세요, " + name + "님!");}greet("홍길동");
5. 강조된 코드 블록
<div class="container"><h1>제목</h1><p>문단 텍스트입니다.</p><ul><li>목록 항목 1</li><li>목록 항목 2</li></ul></div>
6. 인라인 코드
이 문장에는
인라인 코드
가 포함되어 있습니다. 인라인 코드는 문장 내에서 코드를 강조할 때 사용합니다.
12-7. 알림 및 팝업 요소
1. 기본 알림
기본 알림 메시지입니다. 일반적인 정보를 제공할 때 사용합니다.
2. 아이콘이 있는 알림
정보: 정보 알림 메시지입니다. 유용한 정보를 제공할 때 사용합니다.
성공: 성공 알림 메시지입니다. 작업이 완료되었을 때 사용합니다.
주의: 주의 알림 메시지입니다. 주의가 필요한 정보를 제공할 때 사용합니다.
경고: 경고 알림 메시지입니다. 오류나 문제점을 알릴 때 사용합니다.
3. 닫기 버튼이 있는 알림
닫기 버튼이 있는 알림 메시지입니다. 닫기 버튼은 스타일링 용도로만 제공됩니다.
4. 스타일이 있는 패널
12-8. 탭 및 아코디언 요소
1. 기본 탭 스타일 (자바스크립트)
탭 1의 내용입니다. 탭을 클릭하여 내용을 전환하는 것처럼 보이는 디자인입니다.
2. 수평 탭 스타일
탭 1의 내용입니다. 수평 탭 스타일의 예시입니다.
3. 기본 아코디언 (CSS)
4. 스타일이 있는 아코디언
12-9. 갤러리 및 이미지 요소
1. 기본 이미지 갤러리
2. 캡션이 있는 이미지 갤러리
3. 이미지 슬라이더 스타일
4. 반응형 이미지
5. 이미지 효과
12-10. 타임라인 및 단계 요소
1. 세로 타임라인
2023년 1월
첫 번째 이벤트 내용
첫 번째 이벤트에 대한 설명을 작성합니다.
2023년 6월
두 번째 이벤트 내용
두 번째 이벤트에 대한 설명을 여기에 작성합니다.
2023년 12월
세 번째 이벤트 내용
세 번째 이벤트에 대한 설명을 작성합니다.
2. 가로 타임라인
단계 1
첫 번째 단계 내용
단계 2
두 번째 단계 내용
단계 3
세 번째 단계 내용
3. 단계별 프로세스
첫 번째 단계
첫 번째 단계 설명입니다.
두 번째 단계
두 번째 단계 설명입니다.
세 번째 단계
세 번째 단계 설명입니다.
12-11. 통계 및 수치 요소
1. 기본 통계 카드
2. 아이콘이 있는 통계 카드
3. 진행 바가 있는 통계 카드
프로젝트 A 진행률
프로젝트 B 진행률
4. 원형 프로그레스 바
12-12. 비교 및 테이블 요소
1. 기본 비교 테이블
| 특징 | 옵션 1 | 옵션 2 | 옵션 3 |
|---|---|---|---|
| 기능 A | O | X | O |
| 기능 B | X | O | O |
| 기능 C | O | O | X |
12-13. 폼 및 입력 요소
12-14. 반응형 레이아웃 요소
이 영역은 최대 너비 100%이며, 화면 크기에 따라 유동적으로 크기가 조절됩니다.
12-15. 나리야빌더 CSS 활용 예시
이 템플릿은 간단한 인라인 CSS를 활용하여, 다양한 웹 요소를 빠르게 꾸밀 수 있습니다.
더 복잡한 연출이 필요하면, 별도 CSS 파일 또는 인라인 스타일을 추가하세요.
이상, 전체 커뮤니티 스타일 템플릿이 모두 완료되었습니다!
각 섹션별로 참고 또는 활용하세요. 필요하시면 더 확장하거나 수정 가능합니다.