HTML 기본 튜토리얼

HTML 미디어

HTML 참조 매뉴얼

HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML 태그 모든 것(알파 순으로 찾기)HTML CSS

HTML 이미지

CSS (Cascading Style Sheets)는 HTML 요소 태그의 스타일을 렌더링하는 데 사용됩니다.

온라인 예제 더보기

HTML 스타일 사용
이 예제에서는 <head> 부분에 추가된 스타일 정보를 사용하여 HTML을 포맷하는 방법을 보여줍니다.

스타일 속성을 사용하여 하이픈을 추가하지 않은 링크를 만드는 방법을 보여줍니다。
style 속성을 사용하여 하이픈을 추가하지 않은 링크를 만드는 방법을 보여줍니다。

외부 스타일 시트에 링크하는 방법을 보여줍니다
이 예제에서는 태그가 외부 스타일 시트에 링크됩니다.

CSS 사용 방법

CSS는 HTML 4 시작하는 것이, HTML 요소를 더 나은 방식으로 렌더링하기 위해 도입되었습니다.

CSS는 다음과 같은 방식으로 HTML에 추가될 수 있습니다:

인라인 스타일- HTML 요소에서 "style" 속성을 사용하여
내부 스타일 시트 -HTML 문서의 <head> 영역에서 <style> 요소를 사용하여 CSS를 포함합니다
외부 참조 - 외부 CSS 파일 사용

최선의 방법은 외부 CSS 파일을 참조하는 것입니다.

이 사이트의 HTML 교본에서는 예제를 설명하기 위해 인라인 CSS 스타일을 사용했습니다. 이는 예제를 간소화하고, 코드를 온라인에서 편집하고 실행할 수 있게 합니다.

이 사이트를 통해 CSS 교본 更多的 CSS 지식을 배우세요。

인라인 스타일

특별한 스타일이 개별 요소에 적용되어야 할 때, 인라인 스타일을 사용할 수 있습니다. 인라인 스타일을 사용하는 방법은 관련 태그에서 스타일 속성을 사용하는 것입니다. 스타일 속성은 어떤 CSS 속성을 포함할 수 있습니다. 다음 예제는 단락의 색상과 왼쪽 외경을 변경하는 방법을 보여줍니다.

<p　style="color:blue;margin-left:20px;">이것은 단락입니다。</p>

更多的 스타일을 배우기 위해 방문해 주세요 CSS 교본.

HTML 스타일 예제 - 배경색

배경색 속성（background-color）정의하면 각 요소의 배경색을 지정합니다：

예제

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8>　
<title>기본 가이드(oldtoolbag.com)</title>　
</head>
<body　style="background-color:yellow;">
<h2　style="background-color:red;">이는 제목입니다</h2>
<p　style="background-color:green;">이는 별개의 단락입니다.</p>
</body>
</html>

테스트를 해보세요 ‹/

기초적인 배경색 속성(background-color)는 bgcolor 속성을 사용하여 정의됩니다.

테스트를 해보세요 ‹/›

이제는 일반적으로 font-family(글자), color(색상), 및 font-size(글자 크기) 속성을 사용하여 텍스트 스타일을 정의하면 <font> 태그를 사용하지 않습니다.

HTML 스타일 예제 - 텍스트 정렬 방식

text-align(문자 정렬) 속성은 텍스트의 수평 및 수직 정렬 방식을 지정합니다：

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8>　
<title>기본 가이드(oldtoolbag.com)</title>　
</head>
<body>
<h1　style="text-align:center;">수평 정렬된 제목</h1>
<p>이는 별개의 단락입니다.</p>
</body>
</html>

테스트를 해보세요 ‹/›

텍스트 정렬 속성 text-align이 오래된 태그 <center> 대신 사용됩니다.

내부 스타일 시트

단일 파일이 특별한 스타일이 필요할 때, 내부 스타일 시트를 사용할 수 있습니다. <head> 부분에서 <style> 태그를 사용하여 내부 스타일 시트를 정의할 수 있습니다:

<head>
<style　type="text/css">
body　{background-color:yellow;}
p　{color:blue;}
</style>
</head>

외부 스타일 시트

스타일이 많은 페이지에 적용되어야 할 때, 외부 스타일 시트는 이상적인 선택입니다. 외부 스타일 시트를 사용하면 파일 하나를 변경하여 전체 사이트의 외관을 바꿀 수 있습니다.

<head>
<link　rel="stylesheet"　type="text/css"　href="mystyle.css">
</head>

HTML 스타일 태그

태그	설명
<style>	텍스트 스타일 정의
<link>	자원 참조 주소 정의

지원되지 않는 태그와 속성

HTML에서 4HTML 요소 스타일을 정의하는 태그와 속성은 더 이상 지원되지 않습니다. 이 태그는 새로운 HTML 태그를 지원하지 않습니다.

사용하지 않는 태그는 다음과 같습니다: <font>, <center>, <strike>

不建议使用的属性: 사용하지 않는 속성:

HTML 태그 모든 것(알파 순으로 찾기)HTML CSS