게시판 템플릿(전체)
작성자 정보
- 최고관리자 작성
- 작성일
컨텐츠 정보
- 400 조회
- 목록
본문
- 제목 스타일링
- 텍스트 서식(강조, 색상 등)
- 기본 레이아웃 구조
- 다양한 버튼 스타일
- 박스 및 카드 요소
- 알림 메시지(정보, 성공, 주의, 경고)
- 팝업 및 모달 창
- 기본/고급 테이블
- 순서/비순서 목록
- 코드 블록
- 이미지 갤러리
- 이미지 슬라이더
- 반응형 이미지
- 탭 인터페이스
- 아코디언(접고 펼치기)
- 프로그레스 바
- 타임라인
- 단계별 프로세스
- 통계 카드
- 원형 프로그레스 표시
기본 텍스트 스타일
1. 제목 스타일
H1 제목 스타일
H2 제목 스타일
H3 제목 스타일
H4 제목 스타일
H5 제목 스타일
2. 문단 스타일
기본 문단입니다. 텍스트가 길어지면 이렇게 표시됩니다. 줄 간격과 여백이 적절히 조정되어 가독성이 좋습니다.
굵은 글씨와 기울임 글씨, 밑줄 글씨, 취소선 등 다양한 텍스트 스타일을 적용할 수 있습니다.
3. 색상 텍스트
파란색 텍스트,녹색 텍스트,빨간색 텍스트,주황색 텍스트,보라색 텍스트
4. 강조 텍스트
왼쪽 테두리가 있는 강조 텍스트입니다. 중요한 내용을 표시할 때 사용합니다.
12.2 레이아웃 요소html
레이아웃 요소
1. 2단 컬럼 레이아웃 (테이블)
왼쪽 컬럼왼쪽 컬럼의 내용입니다. 테이블을 이용한 2단 레이아웃입니다. |
오른쪽 컬럼오른쪽 컬럼의 내용입니다. 테이블을 이용한 2단 레이아웃입니다. |
2. 3단 컬럼 레이아웃 (테이블)
첫번째 컬럼첫번째 컬럼의 내용입니다. 테이블을 이용한 3단 레이아웃입니다. |
두번째 컬럼두번째 컬럼의 내용입니다. 테이블을 이용한 3단 레이아웃입니다. |
세번째 컬럼세번째 컬럼의 내용입니다. 테이블을 이용한 3단 레이아웃입니다. |
3. 2단 컬럼 레이아웃 (Float)
4. 3단 컬럼 레이아웃 (Float)
버튼 및 링크 요소
1. 기본 버튼
2. 둥근 버튼
3. 테두리 버튼
4. 크기가 다른 버튼
5. 버튼 그룹
박스 및 카드 요소
1. 기본 박스
기본 박스 제목
기본 박스 내용입니다. 테두리와 여백이 있는 단순한 박스입니다.
2. 색상 박스
정보 박스
정보를 제공하는 파란색 박스입니다.
성공 박스
성공 메시지를 표시하는 녹색 박스입니다.
주의 박스
주의 사항을 알리는 주황색 박스입니다.
경고 박스
경고 메시지를 표시하는 빨간색 박스입니다.
3. 카드 요소
목록 및 테이블 요소
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. 컬러 인용문
파란색 배경의 인용문입니다. 강조하고 싶은 인용문에 사용할 수 있습니다.
4. 기본 코드 블록
// 자바스크립트 코드 예시function greet(name) {console.log("안녕하세요, " + name + "님!");}greet("홍길동");
5. 강조된 코드 블록
6. 인라인 코드
이 문장에는
인라인 코드
가 포함되어 있습니다. 인라인 코드는 문장 내에서 코드를 강조할 때 사용합니다.
알림 및 팝업 요소
1. 기본 알림
기본 알림 메시지입니다. 일반적인 정보를 제공할 때 사용합니다.
2. 아이콘이 있는 알림
정보: 정보 알림 메시지입니다. 유용한 정보를 제공할 때 사용합니다.
성공: 성공 알림 메시지입니다. 작업이 완료되었을 때 사용합니다.
주의: 주의 알림 메시지입니다. 주의가 필요한 정보를 제공할 때 사용합니다.
경고: 경고 알림 메시지입니다. 오류나 문제점을 알릴 때 사용합니다.
3. 닫기 버튼이 있는 알림
닫기 버튼이 있는 알림 메시지입니다. 닫기 버튼은 스타일링 용도로만 제공됩니다.
×4. 스타일이 있는 팝업
탭 및 아코디언 요소
1. 기본 탭 스타일
탭 1 내용
탭 1의 내용입니다. 탭을 클릭하여 내용을 전환하는 것처럼 보이는 디자인입니다.
2. 수평 탭 스타일
탭 1 내용
탭 1의 내용입니다. 탭을 클릭하여 내용을 전환하는 것처럼 보이는 디자인입니다.
3. 기본 아코디언
4. 스타일이 있는 아코디언
갤러리 및 이미지 요소
1. 기본 이미지 갤러리
2. 캡션이 있는 이미지 갤러리
3. 이미지 슬라이더 스타일
4. 반응형 이미지
5. 이미지 효과
타임라인 및 단계 요소
1. 세로 타임라인
첫 번째 이벤트 내용을 여기에 작성합니다.
두 번째 이벤트 내용을 여기에 작성합니다.
세 번째 이벤트 내용을 여기에 작성합니다.
2. 가로 타임라인
첫 번째 단계 내용
두 번째 단계 내용
세 번째 단계 내용
3. 단계별 프로세스
첫 번째 단계
첫 번째 단계에 대한 설명을 여기에 작성합니다. 상세한 내용과 필요한 정보를 제공하세요.
두 번째 단계
두 번째 단계에 대한 설명을 여기에 작성합니다. 상세한 내용과 필요한 정보를 제공하세요.
세 번째 단계
세 번째 단계에 대한 설명을 여기에 작성합니다. 상세한 내용과 필요한 정보를 제공하세요.