2025년 6월 18일 (수) 11:18에 Devcafe님의 편집

2025-06-18T11:18:23Z

← 이전 판		2025년 6월 18일 (수) 20:18 판
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 ==

Devcafe: 새 문서: == 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면 한꺼번에 p...

2024-10-04T16:14:49Z

새 문서: == 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...

새 문서

== 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면 한꺼번에 padding 지정하기 ===
<source lang=html>
p {
padding: 5px 7px 3px 0px; (위, 오른쪽, 아래, 왼쪽 순임)
}
</source>

=== 4면이 모두 같을 때 padding 지정하기===
<source lang=html>
p {
padding: 5px;
}
</source>

=== 위, 오른쪽 왼쪽, 아래 padding 지정하기 ===
<source lang=html>
p {
padding: 5px 10px 0px:
}
</source>

=== 위 아래, 오른쪽 왼쪽 padding 지정하기 ===
<source lang=html>
p {
padding: 5px 10px;
}
</source>

=== inline style로 넣어줄 때 ===
<source lang=html>
<p style="padding: 5px 10px;">동해물과 백두산이 마르고 닳토록 </p>
</source>
[[category:css]]

Css 속성 - 편집 역사

2025년 6월 18일 (수) 11:18에 Devcafe님의 편집