CSS 속성 정리

14278 단어 CSShtmlCSS

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

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

2. CSS Combination Selectors

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

3. 자주 쓰는 CSS Pseudo-class Selectors

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

4. CSS Pseudo-element Selectors

SelectorExampleExample description
::afterp::after모든 <p> 요소 뒤에 내용 삽입합니다.
::beforep::before모든 <p> 요소 앞에 내용 삽입합니다.
::first-letterp::first-letter모든 <p> 요소의 첫 글자를 선택합니다.
::first-inlinep::first-inline모든 <p> 요소의 첫 번째 줄을 선택합니다.
::selectionp::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 참조

좋은 웹페이지 즐겨찾기