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 참조
Author And Source
이 문제에 관하여(CSS 속성 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sanna422/CSS-속성-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)