CSS 속성 정리

CSS는 Cascading Style Sheets로, 웹 페이지 스타일과 HTML 문서의 스타일을 지정하는 데 사용하는 언어이다.
CSS의 기본 속성 정리를 해 보았다.

1. CSS 선택자

CSS Selector는 스타일을 지정하려는 HTML 요소를 "찾거나" 선택하는 데 사용된다.

CSS 선택자는 다섯 가지 범주로 나눌 수 있다:

• Simple selectors(이름, ID, 클래스를 기반으로 요소 선택)
• Combination selectors (특정 관계에 따라 요소 선택)
• Pseudo-class selectors (특정 상태를 기반으로 요소 선택)
• Pseudo-elements selectors ( 요소 의 일부를 선택하고 스타일 지정)
• Attribute selectors (속성 또는 속성 값을 기반으로 요소 선택)

1. CSS Simple Selectors

Selector	Example	Example description
#id	#firstname	id="firstname"인 요소를 선택합니다.
.class	.intro	class="intro"인 요소를 선택합니다.
*	*	모든 요소를 선택합니다.
element	p	모든 <p> 요소를 선택합니다.
element,element,..	div,p	모든 <p>와 <div> 요소를 선택합니다.

2. CSS Combination Selectors

Selector	Example	Example description
element element	div p	<div> 요소 내의 모든 <p> 요소를 선택합니다.
element>element	div>p	부모가 <div> 요소인 모든 <p> 요소를 선택합니다.
element+element	div+p	<div> 요소 바로 뒤에 배치되는 첫 번째 <p> 요소를 선택합니다.
element1~ element2	p~ul	<p> 요소가 앞에 오는 모든 <ul> 요소를 선택합니다.

3. 자주 쓰는 CSS Pseudo-class Selectors

Selector	Example	Example description
:active	a:active	활성 링크를 선택합니다.
:hover	a:hover	마우스가 가리키는 링크를 선택합니다.
:visited	a:visited	방문한 모든 링크를 선택합니다.
:first-child	p:first-child	부모의 첫 번째 자식인 모든 <p> 요소를 선택합니다.
:nth-child(n)	p:nth-child(2)	부모의 두 번째 자식인 모든 <p> 요소를 선택합니다.

4. CSS Pseudo-element Selectors

Selector	Example	Example description
::after	p::after	모든 <p> 요소 뒤에 내용 삽입합니다.
::before	p::before	모든 <p> 요소 앞에 내용 삽입합니다.
::first-letter	p::first-letter	모든 <p> 요소의 첫 글자를 선택합니다.
::first-inline	p::first-inline	모든 <p> 요소의 첫 번째 줄을 선택합니다.
::selection	p::selection	사용자가 선택한 요소의 일부를 선택합니다.

2. CSS Colors

CSS 배경 색상

<h1 style="background-color:DodgerBlue;">Hello World</h1>

CSS 텍스트 색상

<p style="color:DodgerBlue;">Lorem ipsum...</p>

CSS 테두리 색상

<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Color Values

CSS에서는 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수도 있다.

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%,0.5);">hsl(9, 100%, 64%,0.5)</h1>

3. CSS 배경

CSS 배경 속성은 요소에 배경 효과를 추가하는 데 사용된다.

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

(약식 속성)

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

• background-color - 요소의 배경 색상을 지정합니다.
• background-image - 배경으로 사용하는 화상을 지정한다.
• background-repeat - 이미지를 가로 및 세로로 반복합니다.
• background-attachment- 배경 이미지를 스크롤해야하는지 아니면 고정해야하는지 여부를 지정합니다
• background-position - 배경의 위치를 정합니다.
• background (약식 속성) - 코드를 줄이기 위해 하나의 단일 속성에 모든 배경 속성을 지정할 수도 있습니다.
• opacity - 요소의 불투명도 / 투명도를 지정합니다. 0.0 - 1.0의 값을 사용할 수 있습니다. 값이 낮을수록 더 투명해집니다.

4. CSS 테두리

CSS 테두리 스타일은 다음과 같다:

• dotted - 점선 테두리를 정의합니다.
• dashed -파선 테두리를 정의
• solid - 단색 테두리를 정의합니다.
• double - 이중 테두리 정의
• groove- 3D 홈 테두리를 정의. 효과는 테두리 색상 값에 따라 다릅니다.
• ridge- 3D 융기된 테두리를 정의. 효과는 테두리 색상 값에 따라 다릅니다.
• inset- 3D 삽입 테두리를 정의. 효과는 테두리 색상 값에 따라 다릅니다.
• outset-3D 아웃 셋 테두리를 정의. 효과는 테두리 색상 값에 따라 다릅니다.
• none - 경계를 정의하지 않음
• hidden - 숨겨진 테두리를 정의합니다.
  
  

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

5. CSS 여백과 패딩

CSS 여백

여백은 정의된 테두리 외부의 요소 주위에 공간을 만드는 데 사용된다.

CSS에는 요소의 각 측면에 대한 여백을 지정하는 속성이 있다.

• margin-top
• margin-right
• margin-bottom
• margin-left
  
  
  모든 여백 속성은 다음 값을 가질 수 있습니다.
• auto-브라우저가 여백을 계산합니다.
• 길이 - 여백을 px, pt, cm 등으로 지정합니다.
• % - 포함하는 요소 너비의 %로 여백을 지정합니다.
• 상속 - 여백이 부모 요소에서 상속되어야 함을 지정합니다.

CSS 패딩

패딩은 정의된 테두리 내부의 요소 콘텐츠 주위에 공간을 만드는 데 사용된다.

CSS에는 요소의 각면에 패딩을 지정하는 속성이 있습니다.

• padding-top
• padding-right
• padding-bottom
• padding-left
  
  
  모든 패딩 속성은 다음 값을 가질 수 있습니다.
• 길이 - px, pt, cm 등으로 패딩을 지정합니다.
• % - 포함하는 요소 너비의 %로 패딩을 지정합니다.
• 상속 - 패딩이 부모 요소에서 상속되어야 함을 지정합니다.

6. CSS 텍스트

CSS에는 텍스트 서식을 지정하는 많은 속성이 있다.

텍스트 색상

color속성은 텍스트의 색상을 설정하는 데 사용됩니다.

h1 {
  color: green;
}

텍스트 정렬

text-align속성은 텍스트의 수평 정렬을 설정하는 데 사용됩니다.

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

텍스트 장식

text-decoration속성은 텍스트에서 설정 제거를 장식하는 데 사용됩니다.

h1 {
  text-decoration: overline;
}
h2 {
  text-decoration: line-through;
}
h3 {
  text-decoration: underline;
}

텍스트 변환

text-transform속성은 대문자와 텍스트에서 소문자를 지정하는 데 사용됩니다.

p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

7. CSS 링크

CSS를 사용하면 다양한 방식으로 링크의 스타일을 지정할 수 있다.

링크는 상태 에 따라 다르게 스타일을 지정할 수 있다.
네 가지 링크 상태는 다음과 같다:

• a:link - 방문하지 않은 정상적인 링크
• a:visited - 사용자가 방문한 링크
• a:hover - 사용자가 마우스를 가져가면 링크
• a:active - 클릭하는 순간 링크

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

8. CSS 플로트

이 float속성은 콘텐츠의 위치를 지정하고 서식을 지정하는 데 사용된다.

float속성은 다음 값 중 하나를 가질 수 있다 :

• left - 요소는 컨테이너의 왼쪽에 떠 있습니다.
• right - 요소는 컨테이너의 오른쪽에 떠 있습니다.
• none- 요소는 부동하지 않습니다(텍스트에서 발생하는 바로 그곳에 표시됩니다). 이것은 기본값입니다
• inherit - 요소는 부모의 float 값을 상속합니다.

가장 간단한 용도로 float속성을 사용하여 이미지 주위에 텍스트를 줄 바꿈할 수 있다.

div {
  float: left;
  padding: 15px; 
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

CSS 를 참조하고 싶다면 아래 링크로 들어가보면 좋을것 같다:
CSS 참조