HTML CSS

HTML4.0을 사용하면 모든 포맷 코드를 HTML 문서에서 제거하고, 독립된 스타일 시트에 추가할 수 있습니다.

예제

HTML 스타일
이 예제에서는 <head> 부분에 추가된 스타일 정보를 사용하여 HTML을 포맷하는 방법을 설명합니다.
하이픈이 없는 링크
이 예제에서는 스타일 속성을 사용하여 하이픈이 없는 링크를 만드는 방법을 설명합니다.
외부 스타일 시트 연결
이 예제에서는 <link> 태그를 통해 외부 스타일 시트에 연결하는 방법을 설명합니다.

스타일 사용법

브라우저가 스타일 시트를 읽을 때, 그 스타일 시트에 따라 문서를 포맷하는 것입니다. 스타일 시트를 삽입하는 방법은 다음과 같습니다:

외부 스타일 시트

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

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

내부 스타일 시트

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

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

인라인 스타일

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

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

우리의 CSS 강의스타일에 대한 더 많은 지식을 배우기 위해 방문하십시오.

태그 설명
<style> 스타일 정의를 정의합니다.
<link> 자원 참조를 정의합니다.
<div> 문서 내의 절이나 영역(블록 단위)을 정의합니다.
<span> 문서 내의 행간의 작은 부분이나 영역을 정의합니다.
<font> 텍스트의 글꼴, 글꼴 크기, 글꼴 색상을 정의합니다. 사용하지 않는 것이 좋습니다. 스타일을 사용하십시오.
<basefont> 기본 글꼴을 정의합니다. 사용하지 않는 것이 좋습니다. 스타일을 사용하십시오.
<center> 텍스트를 수평 정렬합니다. 사용하지 않는 것이 좋습니다. 스타일을 사용하십시오.