이 튜토리얼에서는 두 가지에 중점을 둡니다: 바깥쪽 간격과 바깥쪽 가장자리입니다.
바깥쪽 여백부터 시작하겠습니다. 본문 내에 직접 정의된 p 요소의 경우 왼쪽 및 오른쪽 창 여백은 본문 요소의 바깥쪽 테두리까지의 거리입니다. 여러 단락이 서로 이어지는 경우 위쪽과 아래쪽 바깥쪽 여백의 정보는 개별 단락 사이의 거리를 의미합니다.
바깥쪽 간격과 여백을 정의할 때 음수 값도 가능하므로 겹치는 부분이 생길 수 있습니다.
바깥쪽 여백 정의하기
외부 여백과 간격은 현재 요소와 부모 또는 인접 요소 사이의 강제 공간입니다. 다음 CSS 속성은 자체 단락을 만들거나 블록을 형성하는 HTML 요소에 유용합니다.
여백은 여백 상단, 여백 오른쪽, 여백 하단 및 여백 왼쪽의 네 가지 속성의 축약된 형태입니다. 다음 값을 사용할 수 있습니다:
- 자동 - 여백이 자동으로 계산됩니다.
- 백분율 - 여백이 지정된 요소를 나타냅니다.
- 길이 지정 - 음수 값도 허용됩니다. 이렇게 하면 요소가 겹칠 수 있습니다.
최대 4개의 값까지 허용됩니다:
- 하나의 값 - 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백
- 두 값 - 상단과 하단의 외부 거리에 대한 첫 번째 값, 오른쪽과 왼쪽의 외부 거리에 대한 두 번째 값
- 세 가지 값-상단의 외부 거리에 대한 첫 번째 값, 왼쪽 및 오른쪽의 외부 거리에 대한 두 번째 값, 하단의 외부 거리에 대한 세 번째 값입니다.
- 네 개의 값 - 상단의 외부 거리에 대한 첫 번째 값, 오른쪽의 두 번째 값, 하단의 세 번째 값, 왼쪽의 네 번째 값.
다음 예시는 일반 여백 속성의 사용법을 보여줍니다:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> p { background-color: yellow; } p..ex { 여백: 30px 50px 30px 50px; 배경색:#FF99FF; </style> </head> <body> <p>카메라 리그 만들기</p> <p class="ex">이 동영상 교육에서는 카메라 리그를 만들고 3D 공간에서 안전하게 이동하는 방법을 배웁니다. 프로젝트 파일이 포함되어 있습니다.</p> </body> </html>
이 예제에서는 두 개의 텍스트 단락이 정의되었습니다.
두 번째 단락에도 간격이 지정되었습니다.
여백: 30px 50px 30px 50px;
이 사양은 다음을 의미합니다:
- 상단까지 30픽셀 거리
- 오른쪽으로 50픽셀 간격
- 아래쪽 30픽셀 간격
- 왼쪽으로 50픽셀 거리
간격에 대한 개별 사양
일반적인 여백 사양은 앞서 소개했습니다. 그러나 개별 사양을 지정할 수도 있습니다. 다음 속성을 사용하여 요소의 개별 여백에 대해 위쪽, 왼쪽, 아래쪽 또는 오른쪽까지의 거리를 지정할 수 있습니다.
- margin-top - 상단의 바깥쪽 여백/거리
- margin-right - 오른쪽 바깥쪽 여백/간격
- 여백-하단 - 하단의 바깥쪽 여백/간격
- margin-left - 왼쪽 여백/간격
다음 값은 네 가지 속성 모두에 사용할 수 있습니다:
- 자동 - 여백이 자동으로 계산됩니다.
- 백분율 - 여백-[위, 오른쪽, 아래, 왼쪽]이 지정된 요소를 나타냅니다.
- 길이 지정 - 음수 값도 허용됩니다. 이렇게 하면 요소가 겹칠 수 있습니다.
다음 예는 개별 사양을 효과적으로 사용하는 방법을 보여줍니다.
<!DOCTYPE HTML> <html> <head> <style> p { background-color: yellow; } p.ex { 여백 상단: 100px; 여백 하단: 100px; 여백 오른쪽: 150px; 여백 왼쪽: 50px; } </style> </head> <body> <p>카메라 리그 제작하기</p> <p class="ex">이 동영상 교육에서는 카메라 리그를 제작하고 3D 공간에서 안전하게 이동하는 방법을 배웁니다. 프로젝트 파일이 포함되어 있습니다.</p> </body> </html>
결과는 브라우저에서 다음과 같이 표시됩니다.
내부 거리 설정
내부 간격은 요소 콘텐츠와 자체 요소 가장자리 사이의 강제 공간입니다. 다음 CSS 속성은 자체 단락을 만들거나 블록을 형성하는 HTML 요소에 유용합니다.패딩은 패딩 상단, 패딩 오른쪽, 패딩 하단 및 패딩 왼쪽의 네 가지 속성의 축약된 형태입니다. 프레임과 요소의 콘텐츠 사이의 너비, 즉 내부 간격을 정의하는 데 사용할 수 있습니다.
- 퍼센트 - 부모 요소를 나타냅니다.
- 길이 지정
최대 4개의 값을 지정할 수 있습니다:
- 하나의 값 - 내부 간격 위, 아래, 왼쪽 및 오른쪽
- 두 값 - 상단과 하단의 내부 간격에 대한 첫 번째 값, 오른쪽과 왼쪽의 내부 간격에 대한 두 번째 값
- 세 가지 값 - 상단의 내부 거리에 대한 첫 번째 값, 왼쪽과 오른쪽의 내부 거리에 대한 두 번째 값, 하단의 내부 거리에 대한 세 번째 값입니다.
- 네 개의 값 - 상단의 내부 거리의 첫 번째 값, 오른쪽의 두 번째 값, 하단의 세 번째 값, 왼쪽의 네 번째 값.
다음은 또 다른 예시입니다:
<!DOCTYPE HTML> <html> <head> <style> p { background-color: yellow;} p.ex { padding-top: 25px; padding-bottom: 25px; padding-right: 50px; padding-left: 50px; } </style> </head> <body> <p>카메라 리그 만들기</p> <p class="ex">이 비디오 교육에서는 카메라 리그를 만들고 3D 공간에서 안전하게 이동하는 방법을 배웁니다. 프로젝트 파일이 포함되어 있습니다.</p> </body> </html>다음은 브라우저의 결과물입니다:
네 가지 패딩 속성을 사용하여 내부 간격을 정의할 수 있습니다. 이를 위해 다음 네 가지 CSS 속성을 사용할 수 있습니다:
- padding-top - 콘텐츠의 상단 가장자리와 상단 여백 사이의 거리
- padding-bottom - 콘텐츠의 아래쪽 가장자리와 아래쪽 여백 사이의 거리
- 패딩-왼쪽 - 콘텐츠의 왼쪽 가장자리와 왼쪽 여백 사이의 거리
- 패딩 오른쪽 - 콘텐츠의 오른쪽 가장자리와 오른쪽 여백 사이의 거리입니다.
네 가지 속성 모두에 다음 값을 사용할 수 있습니다:
- 퍼센트 - 부모 요소를 참조합니다.
- 길이 사양
