HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로 변환기 키보드 단축키

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 연습

연습으로 자신을 테스트하십시오

연습:

CSS를 사용하여 문서(본문)의 배경색을 노란색으로 설정합니다.

<!DOCTYPE html>
<html>
<머리>
<스타일>

  :노랑;

</style>
</head>
<body>

<h1>내 홈페이지</h1>

</body>
</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 태그 참조 를 방문하십시오 .