템플릿 모음
작성자 정보
- 최고관리자 작성
- 작성일
컨텐츠 정보
- 207 조회
- 목록
본문
왼쪽 컨텐츠 제목왼쪽 컨텐츠 내용이 들어갑니다. 인라인 스타일이 적용됩니다. |
오른쪽 컨텐츠 제목오른쪽 컨텐츠 내용이 들어갑니다. 인라인 스타일이 적용됩니다. |
첫번째 컬럼첫번째 컬럼 내용입니다. |
두번째 컬럼두번째 컬럼 내용입니다. |
세번째 컬럼세번째 컬럼 내용입니다. |
정보
정보 박스 메시지입니다. 유용한 정보를 제공할 때 사용합니다.
성공
성공 알림 메시지입니다. 작업이 완료되었을 때 사용합니다.
주의
주의 알림 메시지입니다. 주의가 필요한 정보를 제공할 때 사용합니다.
경고
경고 알림 메시지입니다. 오류나 문제점을 알릴 때 사용합니다.
닫기 버튼이 있는 알림 메시지입니다. 닫기 버튼은 스타일링 용도로만 제공됩니다.
- 목록 항목 1
- 목록 항목 2
- 목록 항목 3
- 목록 항목 4
- 목록 항목 1
- 목록 항목 2
- 목록 항목 3
- 목록 항목 4
- 상위 항목 1
- 하위 항목 1.1
- 하위 항목 1.2
- 하위 항목 1.3
- 상위 항목 2
- 하위 항목 2.1
- 하위 항목 2.2
- 상위 항목 3
- 하위 항목 3.1
- ✓ 체크 표시가 있는 목록 항목 1
- ✓ 체크 표시가 있는 목록 항목 2
- ✓ 체크 표시가 있는 목록 항목 3
- ✗ 엑스 표시가 있는 목록 항목 1
- ✗ 엑스 표시가 있는 목록 항목 2
- ✗ 엑스 표시가 있는 목록 항목 3
| 제목 1 | 제목 2 | 제목 3 |
|---|---|---|
| 내용 1-1 | 내용 1-2 | 내용 1-3 |
| 내용 2-1 | 내용 2-2 | 내용 2-3 |
| 내용 3-1 | 내용 3-2 | 내용 3-3 |
| 제목 1 | 제목 2 | 제목 3 |
|---|---|---|
| 내용 1-1 | 내용 1-2 | 내용 1-3 |
| 내용 2-1 | 내용 2-2 | 내용 2-3 |
| 내용 3-1 | 내용 3-2 | 내용 3-3 |
인용문 내용입니다. 좌측에 세로 테두리가 있는 기본 인용문 스타일입니다.5.2 스타일이 있는 인용문html- 인용 출처
스타일이 있는 인용문입니다. 큰 따옴표 아이콘을 포함한 인용문 스타일입니다.
- 인용 출처
파란색 배경의 인용문입니다. 강조하고 싶은 인용문에 사용할 수 있습니다.
- 인용 출처
// 자바스크립트 코드 예시function greet(name) {console.log("안녕하세요, " + name + "님!");}greet("홍길동");
5.5 강조된 코드 블록html
HTML 코드 예시<div class="container"><h1>제목</h1><p>단락 텍스트입니다.</p><ul><li>목록 항목 1</li><li>목록 항목 2</li></ul></div>
이 문장에는
인라인 코드
가 포함되어 있습니다. 인라인 코드는 문장 내에서 코드를 강조할 때 사용합니다.
2023년 1월
첫 번째 이벤트 내용
첫 번째 이벤트에 대한 설명을 여기에 작성합니다.
2023년 6월
두 번째 이벤트 내용
두 번째 이벤트에 대한 설명을 여기에 작성합니다.
2023년 12월
세 번째 이벤트 내용
세 번째 이벤트에 대한 설명을 여기에 작성합니다.
단계 1
첫 번째 단계 내용
두 번째 단계
두 번째 단계에 대한 설명을 여기에 작성합니다. 상세한 내용과 필요한 정보를 제공하세요.
세 번째 단계
세 번째 단계에 대한 설명을 여기에 작성합니다. 상세한 내용과 필요한 정보를 제공하세요.
프로젝트 A 진행률
프로젝트 B 진행률
탭 1의 내용입니다. 탭을 클릭하여 내용을 전환하는 것처럼 보이는 디자인입니다.
실제로는 각 탭 클릭 시 페이지 이동이나 다른 방법으로 컨텐츠를 전환해야 합니다.
탭 1의 내용입니다. 수평 탭 스타일의 예시입니다.
아코디언 항목 1
아코디언 항목 1의 내용입니다. 제목을 클릭하면 내용이 펼쳐지거나 접히는 것처럼 보이는 디자인입니다.
실제로는 각 아코디언 항목 클릭 시 페이지 이동이나 다른 방법으로 컨텐츠를 전환해야 합니다.
아코디언 항목 2
아코디언 항목 3
아코디언 항목 1
아코디언 항목 1의 내용입니다. 스타일이 있는 아코디언 디자인입니다.
아코디언 항목 2
아코디언 항목 3
Q: {QUESTION_1}
{ANSWER_1}
Q: {QUESTION_2}
{ANSWER_2}
Q: {QUESTION_3}
{ANSWER_3}
| 특징 | {OPTION_1} | {OPTION_2} | {OPTION_3} |
|---|---|---|---|
| {FEATURE_1} | {VALUE_1_1} | {VALUE_1_2} | {VALUE_1_3} |
| {FEATURE_2} | {VALUE_2_1} | {VALUE_2_2} | {VALUE_2_3} |
| {FEATURE_3} | {VALUE_3_1} | {VALUE_3_2} | {VALUE_3_3} |
| {FEATURE_4} | {VALUE_4_1} | {VALUE_4_2} | {VALUE_4_3} |
{PERSON_NAME}
{PERSON_POSITION}
| 이메일: | {PERSON_EMAIL} |
| 전화번호: | {PERSON_PHONE} |
| 소속: | {PERSON_ORGANIZATION} |
| 웹사이트: | {PERSON_WEBSITE_LABEL} |
{PERSON_BIO}
단계 2
두 번째 단계 내용