티스토리 뷰
CSS로 HTML 스타일 지정하기
CSS는 약자 C의 ascading의 S의 tyle S의 heets.
CSS 는 HTML 요소가 화면, 종이 또는 다른 매체에 표시되는 방법을 설명합니다 .
CSS 는 많은 작업을 저장합니다 . 한 번에 여러 웹 페이지의 레이아웃을 제어 할 수 있습니다.
CSS는 다음 3 가지 방법으로 HTML 요소에 추가 할 수 있습니다.
- 인라인 - HTML 요소의 style 속성 사용
- 내부 - <head> 섹션의 <style> 요소 사용
- 외부 - 외부 CSS 파일 사용
CSS를 추가하는 가장 일반적인 방법은 별도의 CSS 파일에 스타일을 유지하는 것입니다. 그러나 여기에서는 인라인 및 내부 스타일링을 사용합니다. 이는 시연하기 쉽고 직접 시도하기가 쉽기 때문입니다.
인라인 CSS
인라인 CSS는 단일 HTML 요소에 고유 한 스타일을 적용하는 데 사용됩니다.
인라인 CSS는 HTML 요소의 style 속성을 사용합니다.
이 예제는 <h1> 요소의 텍스트 색을 파란색으로 설정합니다.
<h1 style="color:blue;">This is a Blue Hading</h1> |
내부 CSS
내부 CSS는 단일 HTML 페이지의 스타일을 정의하는 데 사용됩니다.
내부 CSS는 HTML 페이지의 <head> 섹션에서 <style> 요소 내에 정의됩니다.
<!DOCTYPE html> <html> |
외부 CSS
외부 스타일 시트는 많은 HTML 페이지의 스타일을 정의하는 데 사용됩니다.
외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
외부 스타일 시트를 사용하려면 HTML 페이지의 <head> 섹션에 링크를 추가하십시오.
<!DOCTYPE html> </html> |
외부 스타일 시트는 텍스트 편집기로 작성할 수 있습니다. 파일에는 HTML 코드가 없어야하며 css 확장자로 저장해야합니다.
다음은 "styles.css"의 모습입니다.
body { background-color: powderblue;} h1 { color: blue; } p { color: red; } |
CSS 글꼴
CSS 색상 속성은 사용할 텍스트 색상을 정의합니다.
CSS font-family 속성은 사용할 글꼴을 정의합니다.
CSS font-size 속성은 사용할 텍스트 크기를 정의합니다.
<!DOCTYPE html> <html><head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> |
CSS 테두리
CSS 테두리 속성은 HTML 요소 주위에 테두리를 정의합니다.
<!DOCTYPE html> <html> <head> <style> p { border: 1px solid powderblue; } </style> </head> <body> <h1>This is a hading</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html> |
CSS 패딩
CSS 패딩 속성은 텍스트와 테두리 사이의 여백 (공백)을 정의합니다.
p { border: 1px solid powderblue;padding: 30px; } |
CSS 여백
CSS 여백 속성은 경계 외부의 여백 (여백)을 정의합니다.
p { border: 1px solid powderblue;margin: 50px; } |
id 속성
특정 특수 요소에 대한 특정 스타일을 정의하려면 id 특성을 요소에 추가하십시오.
<p id="p01">I am different</p> |
다음 특정 ID로 요소의 스타일을 정의하십시오.
#p01 { color: blue;} |
<활용된 코드>
<!DOCTYPE html> <html> <head> <style> #p01 { color: blue; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p id="p01">I am different.</p> </body> </html> |
Attribute 클래스
특수 유형의 요소에 대한 스타일을 정의하려면 클래스 속성을 요소에 추가하십시오.
<p class="error">I am different</p> |
다음에, 특정의 클래스를 가지는 요소의 스타일을 정의합니다.
| p.error { color: red; } |
<활용된 코드>
<!DOCTYPE html> <html> <head> <style> p.error { color: red; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p class="error">I am different.</p> <p>This is a paragraph.</p> <p class="error">I am different too.</p> </body> </html> |
외부 참조
외부 스타일 시트는 전체 URL 또는 현재 웹 페이지와 관련된 경로로 참조 할 수 있습니다.
이 예제에서는 전체 URL을 사용하여 스타일 시트에 연결합니다.
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css"> |
이 예제는 현재 웹 사이트의 html 폴더에있는 스타일 시트에 연결됩니다.
<link rel="stylesheet" href="/html/styles.css"> |
이 예제는 현재 페이지와 같은 폴더에있는 스타일 시트에 연결합니다.
<link rel="stylesheet" href="styles.css"> |
HTML 스타일 태그
'4학년 1학기 > HTML' 카테고리의 다른 글
| HTML Table 만들기 (0) | 2017.03.23 |
|---|---|
| HTML 링크 (0) | 2017.03.09 |
| HTML 주석 (0) | 2017.03.08 |
| HTML 컴퓨터 코드 요소 (0) | 2017.03.08 |
| HTML 인용문 및 인용문 요소 (0) | 2017.03.06 |