다른 명령
새 문서: == padding == # padding 속성 사용 법은 margin 과 같음 # 지정값은 px, cm, %로도 지정 가능 ::* margin은 음수 값이 지정 가능하지만 padding은 음수값 지정 안됨. padding-top (상단 여백) padding-right (오른쪽 여백) padding-bottom (아래 여백) padding-left (왼쪽 여백) === 사용 예시 === <source lang=html> p { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } </source> === 4면 한꺼번에 p... |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
== CSS 속성 == | |||
CSS(Cascading Style Sheets)에는 수많은 속성이 있으며, 모든 속성을 한 표에 정리하는 것은 방대하므로 여기서는 주요 CSS 속성과 그 설명을 간략히 정리한 미디어위키 표를 제공합니다. CSS 속성은 계속 업데이트되며, 2025년 기준 최신 속성을 포함하되, 모든 속성을 다루는 대신 자주 사용되는 핵심 속성과 몇 가지 최신 속성을 중심으로 정리하겠습니다. 전체 속성 목록은 MDN Web Docs와 같은 참조 사이트에서 확인 가능합니다. | |||
아래는 미디어위키 표 형식으로 정리된 CSS 속성 일부입니다. 속성은 카테고리별로 그룹화하고, 각 속성에 간단한 설명과 예제를 포함했습니다. 모든 속성을 포함하려면 수백 개 항목이 필요하므로, 대표적인 속성만 다루고, 요청 시 특정 카테고리나 추가 속성을 확장할 수 있습니다. | |||
미디어위키 표: CSS 속성 | |||
{| class="wikitable sortable" style="width:100%;" | |||
! 속성 !! 설명 !! 예제 | |||
|- | |||
| colspan="3" style="text-align:center; font-weight:bold;" | '''박스 모델 (Box Model)''' | |||
|- | |||
| {{mono|width}} || 요소의 너비를 설정합니다. || {{mono|width: 100px;}} 또는 {{mono|width: 50%;}} | |||
|- | |||
| {{mono|height}} || 요소의 높이를 설정합니다. || {{mono|height: 200px;}} 또는 {{mono|height: auto;}} | |||
|- | |||
| {{mono|margin}} || 요소 외부 여백을 설정합니다. || {{mono|margin: 10px 20px;}} (상하 10px, 좌우 20px) | |||
|- | |||
| {{mono|padding}} || 요소 내부 여백을 설정합니다. || {{mono|padding: 15px;}} | |||
|- | |||
| {{mono|border}} || 요소의 테두리를 정의합니다. || {{mono|border: 1px solid black;}} | |||
|- | |||
| {{mono|box-sizing}} || 요소의 크기 계산 방식을 설정합니다. || {{mono|box-sizing: border-box;}} | |||
|- | |||
| colspan="3" style="text-align:center; font-weight:bold;" | '''레이아웃 (Layout)''' | |||
|- | |||
| {{mono|display}} || 요소의 표시 유형을 설정합니다. || {{mono|display: flex;}} 또는 {{mono|display: block;}} | |||
|- | |||
| {{mono|position}} || 요소의 위치 지정 방법을 설정합니다. || {{mono|position: absolute;}} | |||
|- | |||
| {{mono|top}}, {{mono|right}}, {{mono|bottom}}, {{mono|left}} || 위치 지정 요소의 오프셋을 설정합니다. || {{mono|top: 10px;}} | |||
|- | |||
| {{mono|float}} || 요소를 좌우로 띄웁니다. || {{mono|float: left;}} | |||
|- | |||
| {{mono|flex}} || 플렉스박스 속성을 설정합니다. || {{mono|flex: 1;}} | |||
|- | |||
| {{mono|grid-template-columns}} || 그리드 열을 정의합니다. || {{mono|grid-template-columns: 1fr 2fr;}} | |||
|- | |||
| colspan="3" style="text-align:center; font-weight:bold;" | '''텍스트 및 폰트 (Text and Font)''' | |||
|- | |||
| {{mono|font-family}} || 글꼴을 지정합니다. || {{mono|font-family: Arial, sans-serif;}} | |||
|- | |||
| {{mono|font-size}} || 글자 크기를 설정합니다. || {{mono|font-size: 16px;}} | |||
|- | |||
| {{mono|color}} || 텍스트 색상을 설정합니다. || {{mono|color: #333;}} | |||
|- | |||
| {{mono|text-align}} || 텍스트 정렬 방식을 설정합니다. || {{mono|text-align: center;}} | |||
|- | |||
| {{mono|line-height}} || 줄 높이를 설정합니다. || {{mono|line-height: 1.5;}} | |||
|- | |||
| {{mono|text-decoration}} || 텍스트 장식을 설정합니다. || {{mono|text-decoration: underline;}} | |||
|- | |||
| colspan="3" style="text-align:center; font-weight:bold;" | '''배경 (Background)''' | |||
|- | |||
| {{mono|background}} || 배경 속성을 단축 설정합니다. || {{mono|background: #fff url('image.jpg') no-repeat;}} | |||
|- | |||
| {{mono|background-color}} || 배경 색상을 설정합니다. || {{mono|background-color: blue;}} | |||
|- | |||
| {{mono|background-image}} || 배경 이미지를 설정합니다. || {{mono|background-image: url('bg.jpg');}} | |||
|- | |||
| {{mono|background-size}} || 배경 이미지 크기를 설정합니다. || {{mono|background-size: cover;}} | |||
|- | |||
| colspan="3" style="text-align:center; font-weight:bold;" | '''애니메이션 및 전환 (Animation and Transition)''' | |||
|- | |||
| {{mono|transition}} || 속성 변화에 전환 효과를 추가합니다. || {{mono|transition: all 0.3s ease;}} | |||
|- | |||
| {{mono|animation}} || 애니메이션 효과를 설정합니다. || {{mono|animation: slide 2s infinite;}} | |||
|- | |||
| {{mono|transform}} || 요소를 변형(회전, 크기 조정 등)합니다. || {{mono|transform: rotate(45deg);}} | |||
|- | |||
| colspan="3" style="text-align:center; font-weight:bold;" | '''최신 속성 (CSS3 및 2025년 기준)''' | |||
|- | |||
| {{mono|aspect-ratio}} || 요소의 가로세로 비율을 설정합니다. || {{mono|aspect-ratio: 16 / 9;}} | |||
|- | |||
| {{mono|gap}} || 플렉스 또는 그리드 항목 간 간격을 설정합니다. || {{mono|gap: 10px;}} | |||
|- | |||
| {{mono|container-type}} || 컨테이너 쿼리의 타입을 설정합니다. || {{mono|container-type: inline-size;}} | |||
|- | |||
| {{mono|accent-color}} || 폼 요소의 강조 색상을 설정합니다. || {{mono|accent-color: purple;}} | |||
|} | |||
표 설명 | |||
• 카테고리: 속성은 박스 모델, 레이아웃, 텍스트 및 폰트, 배경, 애니메이션, 최신 속성으로 분류했습니다. | |||
• 속성: CSS 속성 이름은 {{mono}}로 표시하여 코드처럼 보이게 했습니다. | |||
• 설명: 각 속성의 주요 용도를 간략히 설명했습니다. | |||
• 예제: 실제 사용 예시를 제공해 이해를 돕습니다. | |||
• 최신 속성: 2025년 기준으로 새롭게 주목받는 CSS3 속성(예: aspect-ratio, container-type)을 포함했습니다. | |||
추가 정보 | |||
• 전체 속성: CSS에는 수백 개의 속성이 존재하며, 모든 속성을 다루려면 방대한 표가 필요합니다. MDN Web Docs의 CSS 속성 참조에서 전체 목록 확인 가능. | |||
• 브라우저 호환성: 일부 최신 속성(예: container-type)은 최신 브라우저에서만 지원되므로, Can I Use로 호환성 확인 권장. | |||
• PyInstaller 연계: 이전 질문에서 요청한 .exe 변환을 활용해 CSS 속성 조회 도구를 만들고 싶다면, 위 표를 JSON으로 저장하고 Python GUI 앱으로 변환 가능:
# css_properties.py | |||
• import json | |||
• css_data = [...] # 위 표를 JSON 형식으로 | |||
• print(json.dumps(css_data, indent=2)) | |||
•
pyinstaller --onefile css_properties.py | |||
• | |||
== padding == | == padding == | ||
2025년 6월 18일 (수) 20:18 기준 최신판
CSS 속성
CSS(Cascading Style Sheets)에는 수많은 속성이 있으며, 모든 속성을 한 표에 정리하는 것은 방대하므로 여기서는 주요 CSS 속성과 그 설명을 간략히 정리한 미디어위키 표를 제공합니다. CSS 속성은 계속 업데이트되며, 2025년 기준 최신 속성을 포함하되, 모든 속성을 다루는 대신 자주 사용되는 핵심 속성과 몇 가지 최신 속성을 중심으로 정리하겠습니다. 전체 속성 목록은 MDN Web Docs와 같은 참조 사이트에서 확인 가능합니다. 아래는 미디어위키 표 형식으로 정리된 CSS 속성 일부입니다. 속성은 카테고리별로 그룹화하고, 각 속성에 간단한 설명과 예제를 포함했습니다. 모든 속성을 포함하려면 수백 개 항목이 필요하므로, 대표적인 속성만 다루고, 요청 시 특정 카테고리나 추가 속성을 확장할 수 있습니다. 미디어위키 표: CSS 속성
| 속성 | 설명 | 예제 |
|---|---|---|
| 박스 모델 (Box Model) | ||
| 틀:Mono | 요소의 너비를 설정합니다. | 틀:Mono 또는 틀:Mono |
| 틀:Mono | 요소의 높이를 설정합니다. | 틀:Mono 또는 틀:Mono |
| 틀:Mono | 요소 외부 여백을 설정합니다. | 틀:Mono (상하 10px, 좌우 20px) |
| 틀:Mono | 요소 내부 여백을 설정합니다. | 틀:Mono |
| 틀:Mono | 요소의 테두리를 정의합니다. | 틀:Mono |
| 틀:Mono | 요소의 크기 계산 방식을 설정합니다. | 틀:Mono |
| 레이아웃 (Layout) | ||
| 틀:Mono | 요소의 표시 유형을 설정합니다. | 틀:Mono 또는 틀:Mono |
| 틀:Mono | 요소의 위치 지정 방법을 설정합니다. | 틀:Mono |
| 틀:Mono, 틀:Mono, 틀:Mono, 틀:Mono | 위치 지정 요소의 오프셋을 설정합니다. | 틀:Mono |
| 틀:Mono | 요소를 좌우로 띄웁니다. | 틀:Mono |
| 틀:Mono | 플렉스박스 속성을 설정합니다. | 틀:Mono |
| 틀:Mono | 그리드 열을 정의합니다. | 틀:Mono |
| 텍스트 및 폰트 (Text and Font) | ||
| 틀:Mono | 글꼴을 지정합니다. | 틀:Mono |
| 틀:Mono | 글자 크기를 설정합니다. | 틀:Mono |
| 틀:Mono | 텍스트 색상을 설정합니다. | 틀:Mono |
| 틀:Mono | 텍스트 정렬 방식을 설정합니다. | 틀:Mono |
| 틀:Mono | 줄 높이를 설정합니다. | 틀:Mono |
| 틀:Mono | 텍스트 장식을 설정합니다. | 틀:Mono |
| 배경 (Background) | ||
| 틀:Mono | 배경 속성을 단축 설정합니다. | 틀:Mono |
| 틀:Mono | 배경 색상을 설정합니다. | 틀:Mono |
| 틀:Mono | 배경 이미지를 설정합니다. | 틀:Mono |
| 틀:Mono | 배경 이미지 크기를 설정합니다. | 틀:Mono |
| 애니메이션 및 전환 (Animation and Transition) | ||
| 틀:Mono | 속성 변화에 전환 효과를 추가합니다. | 틀:Mono |
| 틀:Mono | 애니메이션 효과를 설정합니다. | 틀:Mono |
| 틀:Mono | 요소를 변형(회전, 크기 조정 등)합니다. | 틀:Mono |
| 최신 속성 (CSS3 및 2025년 기준) | ||
| 틀:Mono | 요소의 가로세로 비율을 설정합니다. | 틀:Mono |
| 틀:Mono | 플렉스 또는 그리드 항목 간 간격을 설정합니다. | 틀:Mono |
| 틀:Mono | 컨테이너 쿼리의 타입을 설정합니다. | 틀:Mono |
| 틀:Mono | 폼 요소의 강조 색상을 설정합니다. | 틀:Mono |
표 설명 • 카테고리: 속성은 박스 모델, 레이아웃, 텍스트 및 폰트, 배경, 애니메이션, 최신 속성으로 분류했습니다. • 속성: CSS 속성 이름은 틀:Mono로 표시하여 코드처럼 보이게 했습니다. • 설명: 각 속성의 주요 용도를 간략히 설명했습니다. • 예제: 실제 사용 예시를 제공해 이해를 돕습니다. • 최신 속성: 2025년 기준으로 새롭게 주목받는 CSS3 속성(예: aspect-ratio, container-type)을 포함했습니다. 추가 정보 • 전체 속성: CSS에는 수백 개의 속성이 존재하며, 모든 속성을 다루려면 방대한 표가 필요합니다. MDN Web Docs의 CSS 속성 참조에서 전체 목록 확인 가능. • 브라우저 호환성: 일부 최신 속성(예: container-type)은 최신 브라우저에서만 지원되므로, Can I Use로 호환성 확인 권장. • PyInstaller 연계: 이전 질문에서 요청한 .exe 변환을 활용해 CSS 속성 조회 도구를 만들고 싶다면, 위 표를 JSON으로 저장하고 Python GUI 앱으로 변환 가능: # css_properties.py • import json • css_data = [...] # 위 표를 JSON 형식으로 • print(json.dumps(css_data, indent=2)) • pyinstaller --onefile css_properties.py •
padding
- padding 속성 사용 법은 margin 과 같음
- 지정값은 px, cm, %로도 지정 가능
- margin은 음수 값이 지정 가능하지만 padding은 음수값 지정 안됨.
padding-top (상단 여백)
padding-right (오른쪽 여백)
padding-bottom (아래 여백)
padding-left (왼쪽 여백)
사용 예시
p {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
4면 한꺼번에 padding 지정하기
p {
padding: 5px 7px 3px 0px; (위, 오른쪽, 아래, 왼쪽 순임)
}
4면이 모두 같을 때 padding 지정하기
p {
padding: 5px;
}
위, 오른쪽 왼쪽, 아래 padding 지정하기
p {
padding: 5px 10px 0px:
}
위 아래, 오른쪽 왼쪽 padding 지정하기
p {
padding: 5px 10px;
}
inline style로 넣어줄 때
<p style="padding: 5px 10px;">동해물과 백두산이 마르고 닳토록 </p>