w3스쿨즈 HTML(4)

1. CSS를 입히는 세 가지 방법

HTML 앨리먼트에 스타일 속성 사용 (단일 앨리먼트 적용)

※스타일시트의 많은 이점을 잃습니다. 가급적 사용을 하지말아야 한다.

<h1 style="color:blue;">This is a Blue Heading</h1>

<head> 태그 안에서 <style> 앨리먼트 사용 (단일 HTML 페이지 적용)

하나의 단일 HTML 페이지에 고유 한 스타일이있는 경우 내부 스타일 시트를 사용할 수 있다.

<head>
<style>
    body {background-color: powderblue;}
    h1   {color: blue;}
    p    {color: red;}
</style>

</head>

외부 CSS 파일을 사용 (여러개의 HTML 페이지에 적용)

<head>
  <link rel="stylesheet" href="styles.css">
</head>

외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있다.

가장 일반적인 방법은 external 방식이다.

외부 스타일 시트는 전체 URL 또는 현재 웹 페이지에 상대적인 경로를 사용하여 참조 할 수 있다.

절대경로

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

상대경로

<link rel="stylesheet" href="/html/styles.css">

현재폴더경로

<link rel="stylesheet" href="styles.css">

color : color 속성은 사용할 텍스트 색상을 정의합니다.

font-famliy : font-family 속성은 사용할 글꼴을 정의합니다.

font-size : font-size 속성은 사용할 텍스트 크기를 정의합니다.

<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
</style>
</head>

border : border 속성은 HTML 요소 주위에 테두리를 정의합니다.

p {
  border: 1px solid powderblue;
}

padding : padding 속성은 텍스트와 테두리(board) 사이의 패딩 (공백)을 정의합니다.

p {
  border: 5px solid powderblue;
  padding: 90px;
}

margin : margin 속성은 테두리(border) 외부의 여백 (공백)을 정의합니다.

p {
  border: 1px solid powderblue;
  margin: 50px;
}

id 속성

하나의 특정 태그에 특정 스타일을 정의하려면 태그에 id 속성을 추가하십시오.

id 속성은 HTML 페이지안에 단 한개만 선언이 가능합니다.

#p01 {
  color: blue;
}

<p id="p01">I am different</p>

class 속성 : 여러개의 특정 태그에 대한 스타일을 정의하려면 태그에 class 속성을 추가하십시오.

p.error {
  color: red;
}

<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>

w3스쿨즈 HTML(5) - 이미지[image] (0)	2022.03.24
w3스쿨즈 HTML(5) - 링크[link] (0)	2022.03.24
w3스쿨즈 HTML(3) - Quotation, Color (0)	2022.03.24
w3스쿨즈 HTML5(2) - paragraph, style, formatting (0)	2022.03.24
w3스쿨즈 HTML5(1) - 개요, 속성, heading (0)	2022.03.24