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)

margin

margin 속성을 사용하면 요소 사이의 여백을 설정할 수 있다. 여백의 크기도 px 단위로 설정할 수 있다. margin 속성 또한 다양하게 표기 가능하다.

<h1>Heading 1</h1>

<style>
h1 {
 margin-top: 50px;
 margin-right: 50px;
 margin-bottom: 80px;
 margin-left: 50px;
}
</style>

4가지 방식이 존재한다.

1. 한꺼번에 지정하기

<h1>Heading 1</h1>

<style>
h1 {
  margin: 5px 10px 7px 3px; (위,오른쪽,아래,왼쪽)
}
</style>

2. 4면이 모두 같을 때 지정하기

<h1>Heading 1</h1>

<style>
h1 {
  margin: 50px;
}
</style>

3. 위, 오른쪽|왼쪽, 아래

<h1>Heading 1</h1>

<style>
h1 {
  margin: 5px 10px 0px;
}
</style>

4. 위|아래 , 오른쪽|왼쪽

<h1>Heading 1</h1>

<style>
h1 {
  margin: 5px 10px;
}
</style>

CSS Selecter

클래스와 아이디는 같아 보이지만 차이점이 존재한다.
1. 같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없다.
2. 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있다.
👉 즉, 한 요소는 클래스는 여러개 가질 수 있고, 아이디는 하나만 가질 수 있다.

element

• css

li {
}

class

• html

<p class="blue-text">Hello World!</p>

css에서 '.(마침표)' 잊지 말기!

• css

.blue-text {
  color: blue;
  font-size: 10px;
}

id

• html

<p id="my_text">Hello World!</p>

css에서 '#(샾)' 잊지 말기!

• css

#my_text{
  color: blue;
  font-size: 10px;
}