HTML 스타일 - CSS
CSS는 Cascading Style Sheets의 약자입니다.
CSS는 많은 작업을 절약합니다. 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.
CSS = 스타일 및 색상
CSS 란 무엇입니까?
CSS(Cascading Style Sheets)는 웹페이지 레이아웃의 형식을 지정하는 데 사용됩니다.
CSS를 사용하면 색상, 글꼴, 텍스트 크기, 요소 사이의 간격, 요소가 어떻게 배치되고 배치되는지, 어떤 배경 이미지나 배경색을 사용할지, 다양한 장치와 화면 크기에 따라 다른 디스플레이를 제어할 수 있습니다. 훨씬 더!
팁: 계단식 배열 이라는 단어 는 상위 요소에 적용된 스타일이 상위 요소 내의 모든 하위 요소에도 적용됨을 의미합니다. 따라서 본문 텍스트의 색상을 "파란색"으로 설정하면 본문 내의 모든 제목, 단락 및 기타 텍스트 요소도 동일한 색상을 갖게 됩니다(다른 것을 지정하지 않는 한)!
CSS 사용
CSS는 3가지 방법으로 HTML 문서에 추가할 수 있습니다.
- 인라인 -
styleHTML 요소 내부의 속성 사용 - 내부 - 섹션 의
<style>요소 사용<head> - 외부 -
<link>요소를 사용하여 외부 CSS 파일에 연결
CSS를 추가하는 가장 일반적인 방법은 외부 CSS 파일에 스타일을 유지하는 것입니다. 그러나 이 튜토리얼에서는 인라인 및 내부 스타일을 사용할 것입니다. 왜냐하면 이것이 더 쉽게 시연하고 직접 시도해 볼 수 있기 때문입니다.
인라인 CSS
인라인 CSS는 단일 HTML 요소에 고유한 스타일을 적용하는 데 사용됩니다.
인라인 CSS는 styleHTML 요소의 속성을 사용합니다.
다음 예제에서는 요소의 텍스트 색상 <h1>을 파란색으로 설정하고 요소의 텍스트 색상 <p>을 빨간색으로 설정합니다.
예시
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
내부 CSS
내부 CSS는 단일 HTML 페이지의 스타일을 정의하는 데 사용됩니다.
내부 CSS는 요소 <head>내의 HTML 페이지 섹션에 정의됩니다.<style>
다음 예제에서는 <h1>해당 페이지에 있는 모든 요소의 텍스트 색상을 파란색으로 설정하고 모든 <p>요소의 텍스트 색상을 빨간색으로 설정합니다. 또한 페이지는 "powderblue" 배경색으로 표시됩니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
외부 CSS
외부 스타일 시트는 많은 HTML 페이지의 스타일을 정의하는 데 사용됩니다.
<head>외부 스타일 시트를 사용하려면 각 HTML 페이지 의 섹션에 외부 스타일 시트에 대한 링크를 추가 하십시오.
예시
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있습니다. 파일에는 HTML 코드가 포함되어서는 안 되며 .css 확장자로 저장해야 합니다.
"styles.css" 파일은 다음과 같습니다.
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
팁: 외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
CSS 색상, 글꼴 및 크기
여기에서는 일반적으로 사용되는 몇 가지 CSS 속성을 보여줍니다. 나중에 그들에 대해 더 배우게 될 것입니다.
CSS color속성은 사용할 텍스트 색상을 정의합니다.
CSS font-family속성은 사용할 글꼴을 정의합니다.
CSS font-size속성은 사용할 텍스트 크기를 정의합니다.
예시
CSS 색상, 글꼴 패밀리 및 글꼴 크기 속성 사용:
<!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>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS 테두리
CSS border속성은 HTML 요소 주위에 테두리를 정의합니다.
팁: 거의 모든 HTML 요소에 대해 테두리를 정의할 수 있습니다.
예시
CSS 테두리 속성 사용:
p {
border: 2px
solid powderblue;
}
CSS 패딩
CSS padding속성은 텍스트와 테두리 사이의 패딩(공백)을 정의합니다.
예시
CSS 테두리 및 패딩 속성 사용:
p {
border: 2px
solid powderblue;
padding: 30px;
}
CSS 여백
CSS margin속성은 테두리 외부의 여백(공백)을 정의합니다.
예시
CSS 테두리 및 여백 속성 사용:
p {
border: 2px
solid powderblue;
margin: 50px;
}
외부 CSS에 대한 링크
외부 스타일 시트는 전체 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 파일 경로 장에서 파일 경로에 대한 자세한 내용을 읽을 수 있습니다 .
단원 요약
style인라인 스타일 에 HTML 속성 사용- HTML
<style>요소를 사용하여 내부 CSS 정의 - HTML
<link>요소를 사용하여 외부 CSS 파일 참조 - HTML
<head>요소를 사용하여 <style> 및 <link> 요소 저장 color텍스트 색상 에 CSS 속성 사용font-family텍스트 글꼴 에 CSS 속성 사용- 텍스트 크기 에 CSS
font-size속성 사용 - 테두리 에 CSS
border속성 사용 - 테두리 내부 공간 에 CSS
padding속성 사용 margin테두리 외부 공간 에 CSS 속성 사용
팁: CSS 튜토리얼 에서 CSS에 대해 더 많이 배울 수 있습니다 .
HTML 연습
HTML 스타일 태그
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
사용 가능한 모든 HTML 태그의 전체 목록을 보려면 HTML 태그 참조 를 방문하십시오 .