Css 속성

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>

Comments