CSS 속성별 예제 및 설명

1. Color

• 요소의 텍스트 색상을 설정합니다.

예제:

<p style="color: red;">이 텍스트는 빨간색입니다.</p>

---

2. Background

• 배경 색상, 이미지, 위치 등을 설정합니다.

예제:

<div style="background-color: lightblue;">배경이 파란색입니다.</div> 
<div style="background-image: url('example.jpg');">배경 이미지가 설정됩니다.</div>

 

---

3. Font

• 텍스트의 폰트 스타일을 정의합니다.

예제:

<p style="font-size: 20px; font-family: Arial, sans-serif; font-weight: bold;"> 
이 텍스트는 20px 크기의 Arial 폰트이며 굵게 표시됩니다. </p>

 

---

4. Text

• 텍스트 정렬, 장식 및 변환을 설정합니다.

예제:

<p style="text-align: center;">이 텍스트는 가운데 정렬됩니다.</p> 
<p style="text-decoration: underline;">밑줄이 그어진 텍스트입니다.</p> 
<p style="text-transform: uppercase;">이 텍스트는 대문자로 변환됩니다.</p>

 

---

5. Box Model

• 요소의 크기와 여백(패딩, 마진 등)을 설정합니다.

예제:

<div style="width: 200px; height: 100px; border: 2px solid black; margin: 10px; padding: 20px;"> 
박스 모델 예제 </div>

---

6. Position

• 요소의 위치를 설정합니다.

예제:

 

<div style="position: relative; left: 50px;">Relative Position</div> 
<div style="position: absolute; top: 20px; left: 20px;">Absolute Position</div>

---

7. Flexbox

• 요소를 유연하게 정렬합니다.

예제:

<div style="display: flex; justify-content: center; align-items: center; height: 100px; background: lightgrey;"> 
<p>Flexbox 중심 정렬</p> </div>

---

8. Grid

• 요소를 격자(grid) 레이아웃으로 배치합니다.

예제:

<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 10px;"> 
   <div style="background: lightcoral;">첫 번째</div> 
   <div style="background: lightgreen;">두 번째</div> 
</div>

---

9. Animation

• 요소에 애니메이션을 추가합니다.

예제:

<style> 
    @keyframes fade {
    from { opacity: 0; } to { opacity: 1; } 
    } 
</style> 
<div style="animation: fade 2s;">2초 동안 서서히 나타납니다.</div>

---

10. Transform

• 요소를 회전, 이동, 크기 변경 등 변형합니다.

예제:

<div style="transform: rotate(45deg); width: 100px; height: 100px; background: blue;"> 
회전된 박스 </div>

---

11. Transition

• 속성 변경에 애니메이션 효과를 추가합니다.

예제:

<style> 
     div { 
        width: 100px; 
        height: 100px; 
        background-color: blue; 
        transition: background-color 0.5s ease;
     } 

     div:hover { 
        background-color: orange; 
     } 
</style> 

<div>이곳에 마우스 올리면 색이 바뀝니다.</div>

---

12. Shadow

• 요소에 그림자 효과를 추가합니다.

예제:

<div style="box-shadow: 5px 5px 10px grey; width: 100px; height: 100px; background: lightblue;"> 
그림자 있는 박스 </div> 
<p style="text-shadow: 2px 2px 5px grey;">그림자 있는 텍스트</p>

---

자세한 속성값은 다음에 개별로 올려드릴게요~