CSS 마스터하기: 기초부터 중급까지-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 마스터하기: 기초부터 중급까지

Linda Hamilton

Dec 13, 2024 am 03:03 AM

Mastering CSS: From Basics to Intermediate Level

CSS 익히기: 기초부터 중급까지

CSS(Cascading Style Sheets)는 시각적으로 매력적인 웹사이트를 만들기 위한 초석 기술입니다. 이를 통해 개발자는 HTML 요소의 스타일을 지정하고 레이아웃을 제어하며 사용자 경험을 향상시킬 수 있습니다. 이 문서에서는 CSS 기본 및 중급 개념을 안내하여 자신있게 웹페이지 스타일을 지정할 수 있습니다.

1. CSS 소개

CSS란 무엇인가요?

CSS는 HTML 요소의 스타일을 지정하고 모양(예: 색상, 글꼴, 간격)을 정의하는 데 사용됩니다. 콘텐츠(HTML)와 프레젠테이션(CSS)을 분리합니다.

예:

요소:

 <h1>

</li>
<li>
<p><strong>Three Types of CSS</strong>  </p>

<ul>
<li>
<strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
Example:
</li>
</ul>

<pre class="brush:php;toolbar:false">   <p>



<ul>
<li>
<strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
Example:

로그인 후 복사

   <style>
     body {
       background-color: #f0f0f0;
     }
   </style>

로그인 후 복사

외부 CSS: 여러 페이지의 일관성을 위해 .css 파일을 통해 연결됩니다. 예:

   <link rel="stylesheet" href="styles.css">

로그인 후 복사

2. CSS 선택기

선택기는 스타일 지정을 위해 HTML 요소를 타겟팅하는 데 사용됩니다.
- 범용 선택기(*): 모든 요소의 스타일을 지정합니다.
- 유형 선택기(요소):
  과 같은 특정 태그를 대상으로 합니다.
- 클래스 선택기(.classname): 특정 클래스가 있는 요소를 대상으로 합니다. 예:
```
   <style>
     .highlight { color: yellow; }
   </style>
   <p class="highlight">Highlighted text</p>
```
로그인 후 복사
로그인 후 복사
- ID 선택기(#id): 고유 ID를 대상으로 합니다. 예:
```
   <style>
     #unique { color: green; }
   </style>
   <p>
```
로그인 후 복사

3. CSS Properties and Values

Text and Font Styling
- color: Sets text color.
- font-size: Defines text size.
- font-family: Specifies the font. Example:
```
   <style>
     p { color: navy; font-size: 16px; font-family: Arial; }
   </style>
```
로그인 후 복사
로그인 후 복사
배경 스타일링
- background-color : 배경색을 설정합니다.
- background-image: 배경 이미지를 추가합니다. 예:
```
   <style>
     body { background-color: lightblue; background-image: url('background.jpg'); }
   </style>
```
로그인 후 복사
로그인 후 복사

4. CSS 박스 모델

상자 모델은 요소의 구조를 설명합니다.

콘텐츠: 요소 내부의 실제 콘텐츠입니다.
패딩: 콘텐츠와 테두리 사이의 공간입니다.
테두리: 패딩과 콘텐츠를 포함합니다.

여백: 요소와 인접 요소 사이의 공간

예:

 <style>
   div {
     width: 200px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
 </style>

로그인 후 복사

5. CSS 위치 지정 및 레이아웃

포지셔닝
- static: 기본 흐름입니다.
- 상대: 일반 위치를 기준으로 위치 지정됩니다.
- 절대: 가장 가까운 위치의 조상을 기준으로 위치 지정됩니다.
- 고정: 스크롤하는 동안 제자리에 유지됩니다. 예:
```
   <style>
     div { position: absolute; top: 50px; left: 100px; }
   </style>
```
로그인 후 복사

플렉스박스

Flexbox는 유연하고 반응성이 뛰어난 레이아웃 생성을 단순화합니다.

예:

 <style>
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }
 </style>

로그인 후 복사

그리드

CSS 그리드는 강력한 레이아웃 시스템을 제공합니다.

예:

 <h1>

</li>
<li>
<p><strong>Three Types of CSS</strong>  </p>

<ul>
<li>
<strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
Example:
</li>
</ul>

<pre class="brush:php;toolbar:false">   <p>



<ul>
<li>
<strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
Example:

로그인 후 복사

   <style>
     body {
       background-color: #f0f0f0;
     }
   </style>

로그인 후 복사

6. CSS 의사 클래스 및 의사 요소

의사 클래스: 상태에 따라 스타일 요소를 지정합니다.

예: 호버 효과
```
   <link rel="stylesheet" href="styles.css">
```
로그인 후 복사
로그인 후 복사
의사 요소: 요소의 특정 부분에 스타일을 지정합니다.

예: 요소 앞에 콘텐츠 추가:
```
   <style>
     .highlight { color: yellow; }
   </style>
   <p class="highlight">Highlighted text</p>
```
로그인 후 복사
로그인 후 복사

7. 미디어 쿼리를 활용한 반응형 디자인

미디어 쿼리는 화면 크기에 따라 스타일을 조정합니다.

예:

   <style>
     #unique { color: green; }
   </style>
   <p>












  
  
  3. CSS Properties and Values

로그인 후 복사

Text and Font Styling
- color: Sets text color.
- font-size: Defines text size.
- font-family: Specifies the font. Example:
```
   <style>
     p { color: navy; font-size: 16px; font-family: Arial; }
   </style>
```
로그인 후 복사
로그인 후 복사
8. 중급 CSS 기법
- 전환 및 애니메이션
  
  예:
```
   <style>
     body { background-color: lightblue; background-image: url('background.jpg'); }
   </style>
```
  로그인 후 복사
  로그인 후 복사
- CSS 변수
  
  예:
```
 <style>
   div {
     width: 200px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
 </style>
```
  로그인 후 복사
  로그인 후 복사
9. 결론

CSS는 일반 HTML을 아름답고 기능적인 웹페이지로 변환합니다. 기본 사항을 이해하고 중급 개념으로 진행함으로써 반응성이 뛰어나고 시각적으로 매력적인 디자인을 만드는 기술을 습득하게 됩니다. 이러한 기술을 익히려면 개인 포트폴리오와 같은 간단한 프로젝트 스타일링을 연습하세요.