[css] CSS의 기본 속성

폰트크기

/* css */
h2 {
  font-size: 72px;
}

<!-- html -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>

Heading 1

Heading 2

 

폰트크기를 정하는 단위는 여러가지가 있는데, 그 중에서 px가 가장 많이 사용된다.

 

 

텍스트 정렬

/* css */
h1 {
  text-align: left;
}

h2 {
  text-align: right;
}

h3 {
  text-align: center;
}

<!-- html -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Heading 1

Heading 2

Heading 3

 

텍스트 정렬에는 text-align을 사용하며, left는 왼쪽, right는 오른쪽, center는 중앙 정렬을 할 수 있다.

 

 

텍스트 색

/* css */
h1 {
  color: lime;
}

h2 {
  color: hotpink;
}

h3 {
  color: blue;
}

<!-- html -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

color 속성을 사용하여, 원하는 색을 지정해준다.

 

 

여백

/* css */
h1 {
  margin-bottom: 80px;
}

h3 {
  margin-left: 50px;
}

<!-- html -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

margin 속성을 사용하여 요소 사이의 여백을 설정할 수 있다. 크기는 px로 정한다.