[TIL] 01. CSS Basic Attributes

CSS의 기본 속성을 정리해 보려고 한다. 😊😊

CSS 주석

/* 내용 */

 

text-align

텍스트의 위치를 left,right,center로 정렬할 수 있다.
👉<p>``<div>태그 내용물도 정렬이 가능하다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<style>
h1{
	text-align: center;
}

h2{
	text-align: left;
}

h3{
	text-align: right;
}
</style>

text-decoration

text-decoration을 사용하면 텍스트를 몇 가지 방법으로 꾸밀 수 있다.

Underline

: 밑줄을 긋는 기능

<h1>Hello World!</h1>

<style>
h1 {
  text-decoration: underline;
}
</style>

Overline

: 글 위에 줄이 그어지는 기능

<h1>Hello World!</h1>

<style>
h1 {
  text-decoration: overline;
}
</style>

Line-through

: 줄이 글을 관통한다.

<h1>Hello World!</h1>

<style>
h1 {
  text-decoration: line-through;
}
</style>

None

:아무 줄도 없다. (디폴트 값) 꾸밈을 없애기 위해 주로 사용된다.

• html

<a class="no-decoration" 
href="https://www.google.com" target="_blank">구글</a>

• css

.no-decoration {
  text-decoration: none;
}

color

글에 색을 입히고 싶을 때 color 속성을 사용하면 된다.

색상 값의 다양한 표기

color 속성을 동일하게 파란색(blue)으로 지정했다. 아래 코드는 각각 다른 색상 표기법을 사용하여 텍스트의 색상을 결정하는 코드이다.

1. 색상명

: lime, mint, hotpink 등등..

<h1>Heading 1</h1>

<style>
h1 {
  color: blue;
}
</style>

2. HEX

: 16진수 표기법. #ffffff (흰색)

<h1>Heading 1</h1>

<style>
h1 {
  color: #0000FF;
}
</style>

3. RGB

: rgb 각 광원당 256개의 숫자로 표기. rgb(0,255,0)

<h1>Heading 1</h1>

<style>
h1 {
  color: rgba(0,0,255,1.0);
}

👉rgb에 alpha(불투명도)까지 더불어 표기할 수 있다.
범위는 0.0~1.0까지

rgba(255,255,255,0.3)