등과 같은 HTML 요소의 배경색을 설정할 수 있습니다.

예

<div style="background-color:blue">My background is blue</div>

로그인 후 복사

출력:

2. 색상

HTML 요소의 텍스트 글꼴 색상은 색상 속성을 올바른 색상 이름, HEX 코드 또는 RGB 코드로 설정하여 제어할 수 있습니다.

예

<div style="color:blue">My font color is blue</div>

출력:

3. 테두리 색상

테두리를 추가하려는 경우 HTML 요소의 테두리 색상을 설정할 수 있습니다.

예

<p style="border: 1px solid red">My border is red</p>

출력:

위 코드에서 볼 수 있듯이 테두리 속성은 "테두리-너비-테두리-스타일-테두리-색상" 순서로 세 가지 속성을 허용합니다.

4. 배경-이미지

다음과 같이 background-image 속성을 사용하여 이미지를 배경으로 설정할 수도 있습니다.

예:

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px">

출력:

5. 배경반복

위의 예에서 볼 수 있듯이 background-image 속성을 사용하여 이미지를 배경으로 설정하면 기본적으로 가로 및 세로로 이미지가 반복됩니다. 그러나 일부 이미지는 수직 또는 수평으로 반복되어야 하거나 반복할 필요가 없을 수도 있습니다. 이 동작은 background-repeat 속성에 원하는 값을 설정하여 제어할 수 있으며, background-image를 사용할 때만 사용할 수 있습니다. 그렇지 않으면 독립형 속성으로 사용될 때 스타일 값을 추가하지 않습니다.

'repeat-x' 값을 사용하면 이미지가 수평으로만 반복됩니다.

'repeat-y' 값을 사용하면 이미지가 수직으로만 반복됩니다.

'반복 없음' 값은 배경 이미지의 반복을 중지하는 데 사용됩니다.

위의 예를 수정하여 배경 이미지를 개선해 보겠습니다.

예시

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; background-repeat:no-repeat">

출력:

위의 예를 배경 이미지와 비교하여 이해할 수 있습니다. 이미지를 배경으로 추가할 수 있고, 배경 반복을 통해 배경 이미지의 반복을 제어할 수 있습니다.

6. 배경-위치

이 속성을 사용하면 배경 이미지의 위치를 ​​정의할 수 있습니다.

예

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; width:500px;background-repeat: no-repeat; background-position: left bottom;">
</div>

출력:

7. 여백

CSS는 HTML 요소의 네 면 모두에 여백을 설정하는 속성을 제공합니다. 또는 요소의 특정 면에 여백을 추가할 수도 있습니다.

margin-top을 사용하면 요소 상단에 여백을 추가할 수 있고, margin-right는 요소 오른쪽에 여백을 추가하고, margin-left는 요소 왼쪽에 여백을 추가하고, margin-bottom을 사용하면 하단에 여백을 추가합니다. 이 네 가지 속성을 사용하는 대신 margin 속성을 사용하고 요구 사항에 따라 해당 값을 설정할 수도 있습니다.

예

p {
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
}

또는

p
{
margin: 25px 50px 75px 100px;
}

8. 패딩

padding 속성은 요소의 콘텐츠와 테두리 사이의 공간을 정의합니다. “padding” 속성이나 padding-top, padding-bottom, padding-left, padding-right와 같은 개별 패딩 속성을 사용하여 요소 콘텐츠의 위쪽, 아래쪽, 왼쪽 또는 오른쪽에 대한 패딩을 설정할 수 있습니다.

p {
padding-top: 25px;
padding-bottom: 75px;
padding-right: 50px;
padding-left: 100px;
}

또는

p
{
padding: 25px 50px 75px 100px;
}

9. 높이와 너비

HTML 요소의 높이와 너비를 정의하는 데 사용되는 가장 기본적인 CSS 속성은 높이와 너비입니다. 200px 등의 픽셀 값이나 10%, 20% 등의 백분율로 설정할 수 있습니다.

10. 텍스트 정렬

이 속성을 사용하여 요소의 텍스트 정렬에 대한 가로 방향을 설정할 수 있습니다. 값 옵션은 중앙, 오른쪽, 왼쪽입니다.

p {
text-align: center;
}

또는

p {
text-align: left;
}

or

p {
text-align: right;
}

11. Text-Decoration

Text decoration property can be used to set decorations like underline, line-through, or overline over text in HTML.

Example:

<p style="text-decoration:underline">This is underline</p>

Output:

12. Letter-Spacing

As the name suggests, this property defines the spacing between letters/characters in a word. You can assign a positive or negative pixel value to increase or decrease the spacing between letters.

Example:

<p style="letter-spacing: -3px">My words are overlapped </p>

Output:

13. Line-Height

Line height defines the distance between vertical lines. You can set the line height to a positive or negative pixel value, similar to letter spacing. Let’s review the example below to understand better:

Example:

<p style="line-height: 0.7px">This paragraph has a small line-height.<br>This paragraph has a small line-height.<br>
</p>

Output:

14. Text Direction

Sometimes, if the web page’s content is not in English but in some other language like Arabic, which follows a right to the left convention, we would need to change the direction of the text. In such cases, we can reverse the text direction.

Example:

<p style="direction: rtl"><bdo dir="ltr">I am right to left</bdo></p>

Output:

15. Text Shadow

This property adds a shadow to the text.

Example:

<p style="text-shadow: 3px 2px gray;"> I’ve got a gray shadow</p>

Output:

16. Font Family

We can define the font class for text in an element. We can define multiple font families separated by a comma as a fallback system to handle scenarios where a preferred font class cannot be loaded.

• Font style: We can add italic or oblique effects to the text with the font-style property.

Example:

<p style="font-style: oblique">This is oblique style.</p>

Output:

• Font weight: This property defines the weight of a font.

Example:

<p style="font-weight: 900"> This is a bold paragraph</p>

Output :

The styling attributes showcased above are our building blocks with UI and UX designing. New versions of CSS continue to evolve.

위 내용은 HTML 스타일 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!