CSS에서 패딩을 작성하는 방법
CSS 패딩을 사용하면 HTML 코더가 HTML 요소 외부의 기본 패딩 또는 데드 스페이스를 설정할 수 있습니다. 이를 수행하면 해당 요소의 각 인스턴스에 대해 해당 패딩 코드를 반복하여 코더를 저장하지 않고 페이지에서 일관성을보다 쉽게 만들 수 있다는 이점이 있습니다. 채워질 HTML 요소는 단락, 표 또는 제목과 같은 여러 가지가 될 수 있습니다.
CSS에서 패딩을 만들려면 먼저 채울 HTML 요소를 식별해야합니다. 패딩하려는이 요소를 선택기라고합니다. 그런 다음 적절한 패딩 값을 지정하려고합니다. CSS에는 다섯 가지 유형의 패딩 속성이 있습니다. 한 번에 한 요소의 4면 모두에 하나씩, 요소의 각 개별면에 4 가지가 있습니다 (예 : 왼쪽, 오른쪽, 위쪽 또는 아래쪽) ). 프로그래머가 HTML 요소의 4면 모두에 대한 값을 한 번에 지정할 수있는 속성을 속기 속성 이라고 합니다 .
CSS 패딩의 하나의 선언을 지정하는 데 사용되는 코딩 언어는 단순히 "패딩"이라는 단어입니다.이 레이블 다음에는 해당 패딩의 관련 "값"또는 원하는 공간의 양에 대한 정보가 일반적으로 픽셀 또는 백분율. 안쪽 여백과 값은 중괄호 또는 중괄호 안에 작성됩니다 (예 : "{"및 "}"). 그 앞에는 채워질 HTML 요소가 있습니다 (예 : 단락의 경우 "p"또는 레벨 2 헤더의 경우 "H2").
값이 표현되는 방식에있어서, 값은 픽셀 (예를 들어, 1px 또는 5px), 포인트 (예를 들어, 1pt 또는 5pt) 또는 인치 (예를 들어, 1 인치 또는 5 인치) 또는 센티미터 (예를 들어, 1cm 또는 5cm)로 표현 될 수있다 . 스타일이 지정된 HTML 요소의 백분율로 값을 선언 할 수도 있습니다. 예를 들어 값이 50 %이면 패딩은 요소 크기의 절반과 같습니다.
다음 예제는 각각 백분율과 길이로 반영된 값으로 HTML 요소를 채우는 HTML 코드입니다. 값이 하나만 지정된 경우 웹 브라우저는이 패딩을 HTML 요소의 네면 모두에 지정합니다.
패딩 : 10 %;
패딩 : 100px;
위의 패딩 선언 유형에 더 많은 값을 추가하면 웹 브라우저가 특정 방식으로 해석 할 수 있습니다. 두 개의 값이 할당되면 첫 번째는 위와 아래에 해당하고 두 번째는 왼쪽과 오른쪽에 해당합니다. 세 개의 값을 사용하면 첫 번째는 맨 위를, 두 번째는 왼쪽 및 오른쪽을, 세 번째는 HTML 요소의 맨 아래를 나타냅니다. 최대 4 개의 값을 할당하면 첫 번째, 두 번째, 세 번째 및 네 번째 값이 순서대로 HTML 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽에 해당합니다. 둘 이상의 값이 제공되면 공백으로 구분하고 세미콜론으로 끝나야합니다 (예 :
패딩 : 10px 20px 10px 20px;
CSS의 패딩은 한 번에 한 쪽만 수행 할 수 있습니다. 이와 관련하여 4 가지 추가 패딩 속성이 있습니다. 안쪽 여백, 오른쪽 여백, 안쪽 여백 및 왼쪽 여백입니다. 보다 정확한 방식으로 CSS에서 패딩을 만들려면 위와 같은 속기 선언과 동일한 구문으로 속성에 레이블을 지정해야합니다. 이러한 패딩 속성은 각각 길이 또는 백분율 중 하나의 값만 사용합니다. 예를 들면 다음과 같습니다.
패딩 탑 : 10px;
오른쪽 여백 : 20px;
안쪽 여백 : 10px;
왼쪽 여백 : 20px;
다음 코드는 웹 페이지를 만들고 스타일 태그 사이에 패딩 속성을 선언 한 다음 p 태그로 지정된 단락 요소에 사용합니다. / *와 * / 사이의 텍스트는 사용 된 패딩 유형을 설명하기위한 참고 사항이며 CSS 패딩 코드에는 포함되지 않습니다.
<html>
<헤드>
<style type = "text / css">
p.example1 {padding : 10px;} / * 네면 모두를위한 숏 패딩 * /
p.example2 {padding : 50px 30px;} / * 위와 아래를위한 숏 패딩 뒤에 왼쪽과 오른쪽 * /
p.example3 {
패딩 탑 : 10px;
안쪽 여백 : 20px;
안쪽 여백 : 10px;
왼쪽 여백 : 20px;
} / * 개별 패딩. * /
</ style>
</ head>
<본체>
<p class = "example1">이 텍스트는 양쪽에 동일한 패딩이 있습니다. 양쪽의 패딩은 10px입니다. </ p>
<p class = "example2">이 텍스트의 상단 및 하단 패딩은 50px이고 왼쪽 및 오른쪽 패딩은 30px입니다. </ p>
<p class =”example3”>이 텍스트의 상단 패딩은 10px, 오른쪽 패딩은 20px, 하단 패딩은 10px, 왼쪽 패딩은 20px입니다. </ p>
</ body>
</ html>
위의 예에서 "example1"등은 클래스에 지정된 이름으로, 단락에서 참조됩니다. 코드 시작 부분에서 p 태그와 클래스 이름 사이의 마침표는 단락에 지정된 클래스의 선언을 나타냅니다. 패딩 속성 값 할당을 묶는 클래스 선언 후 중괄호에 주목하십시오.
이 작업은 많은 작업처럼 보이지만 각 개별 단락에 패딩을 지정하는 것보다 노동 집약적입니다. 위의 예제에서 p 태그 인 원하는 요소에 대해 하나의 패딩 특성을 선언 한 다음 페이지의 본문 태그 사이에서 요소를 사용할 때 클래스를 참조 할 수 있습니다. 모든 단락에 한 가지 유형의 패딩 만 필요한 경우 클래스를 전혀 사용할 필요가 없습니다. 스타일 태그 사이에 다음 코드를 사용하고 클래스를 지정하지 않고 단락을 코딩하십시오. 이 코드는 위 예제의 코드 대신 body 태그 사이를 이동합니다.
p {패딩 : 10px 20px 10px 20px;}
이 CSS 패딩은 클래스가 지정되지 않았더라도 모든 단락에 영향을 미칩니다.