HTML 스타일 속성

HTML 코드에는 Chrome, Firefox, IE와 같은 웹 브라우저에서 렌더링된 웹 페이지가 의도한 대로 표시되도록 스타일 속성이 필요합니다. HTML 태그에는 다양한 정보가 포함될 수 있으며 스타일 속성은 인라인 스타일을 사용하여 HTML 블록의 정보 모양을 제어합니다.

이 기사에서는 웹 브라우저에서 페이지가 렌더링되는 방식을 정의하는 일련의 규칙에 지나지 않는 HTML 스타일 속성에 대해 자세히 알아봅니다.

HTML 스타일 속성 목록

다음은 실제 예와 함께 HTML 요소의 디자인에 영향을 미치고 제어하는 ​​데 사용할 수 있는 모든 스타일 속성 목록입니다.

1. 배경색

이 CSS 속성을 사용하면

,

등과 같은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

firefox css chrome html define if for continue using class Attribute Property default this position margin padding border background ux ui word

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.