[HTML] HTML CSS

- CSS란 무엇인가?

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트
색상, 글꼴, 텍스트 크기, 요소 간의 간격, 요소 위치 및 배치 방법, 배경 사진 또는 색상 사용 등 제어 가능

- CSS 사용

1. Inline CSS

: 요소 내부의 특성을 사용

style 특성을 사용

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

2. Internal CSS

: 단일 페이지의 스타일을 정의하는 데 사용

요소 내의 페이지 <head>, <style> 섹션에 정의

<!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>

2. External CSS

: 많은 페이지의 스타일을 정의하는 데 사용

External CSS를 사용하려면 html <head> 섹션에 링크를 추가해야한다

<!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>

style.css 파일의 형태

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

- CSS 속성

- CSS 색상, 글꼴 및 크기

color : 사용할 색상 정의
font-family : 사용할 글꼴 정의
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>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

- CSS 패딩

padding : 텍스트와 테두리 사이의 공백을 정의

p {
  border: 2px solid powderblue;
  padding: 30px;
}

- CSS 마진

margin : 테두리 외부의 공백을 정의

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

- 외부 CSS 링크 불러오기

전체 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">

Author And Source

이 문제에 관하여([HTML] HTML CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jyj1055/HTML-HTML-CSS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다