CSS 소개

1. CSS의 등장

브라우저를 과학 목적으로만 사용하는 것이 아니라 엔터테인먼트 목적으로 사용하는 것이 분명해지자, 곧바로 멀티미디어가 부족하다는 것을 알게 되었어: 동영상, 애니메이션, 색상, 소리, 투명도 등등.

처음에는 이를 위해 더 많은 태그를 추가하려고 했지만, 새 태그가 수백 개가 되고 HTML 문서 작업이 너무 복잡해질 것이라는 것을 깨달았어. 그래서 문서의 "디자인" (스타일)을 그 내용물로부터 분리하자는 아이디어가 나왔고, 그렇게 해서 CSS가 만들어졌어.

Cascading Style Sheets (CSS) 또는 캐스케이딩 스타일 시트는 웹 페이지의 비주얼 스타일을 담당하는 웹 개발의 핵심 구성 요소 중 하나야.

CSS는 각각 이름과 값을 가진 속성들의 모음이야. 웹 개발자가 이러한 속성을 정의하면 브라우저가 그것을 표시하는 역할을 해. 이러한 속성들은 거의 모든 요소에 대해 정의할 수 있어. CSS 스타일의 예:

이러한 CSS 속성(혹은 CSS 특성이라고도 불러)들은 백 개 이하로 존재해. 하지만 서로 교묘하게 상호작용하면서 매우 예상치 못한 효과를 낼 수 있지. CodeGym에서 이를 배우고 페이지에서 진정한 마법을 만들어낼 수 있을 거야 🦄.

2. 요소 스타일

각 HTML 요소에 대해 style 속성을 사용하여 고유한 CSS 스타일을 지정할 수 있어.

예시:

      
<p style="color: blue; font-size: 16px;">이것은 인라인 스타일의 예입니다.</p>
      
    

이 스타일은 브라우저에게 단락 내부의 텍스트를 파란색으로 그리고 글꼴 크기를 높이 16 픽셀로 설정하라고 말하는 거야.

사실 여기에는 두 가지 "스타일"이 있어:

• color = blue
• font-size = 16px

그냥 한 줄로 작성되어 있고 세미콜론으로 구분되어 있지.

또한 검정색 직사각형을 만들고 그 안에 흰색 텍스트를 쓸 수도 있어. 이 코드는 이렇게 보일 거야:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
흰색 텍스트 검정 배경 
</div>
      
    

3. 색상

CSS 스타일은 HTML을 배울 때 더 자세히 다룰 거야. 하지만 더 재미있게 하기 위해 오늘 색상을 자세히 살펴보자. CSS를 사용하면 컴퓨터가 표시할 수 있는 모든 색상, 아니 그 이상으로 색상을 정의할 수 있어.

CSS에서 색상은 웹 페이지 스타일링에서 중요한 부분이야. 시각적으로 매력적이고 직관적인 인터페이스를 만들 수 있게 도와줘. 색상을 정의하는 몇 가지 방법이 있고, 각각 고유한 특징과 용도가 있어.

1. 색상 이름 (Color Names)

CSS는 140개 이상의 표준 색상 이름을 지원해. 이건 간단하고 이해하기 쉬운 색상 지정 방법이야.

      
<div style="color: lightblue;"> 하늘색 텍스트</div>
      
    

몇 가지 일반적인 색상 이름:

2. 16진수 값 (Hexadecimal Values)

색상을 지정할 수 있는 또 다른 방법은 16진수 표기법이야. 이를 통해 16백만 개의 색상 셰이드를 표현할 수 있어. 이 수많은 색상에 이름을 붙이는 것은 불가능하기 때문에 숫자를 사용하는 거야.

16진수 값은 # 기호 다음에 6자리 숫자나 문자가 오고, 빨강, 초록, 파랑 색상의 강도를 나타내 (RRGGBB)?

      
<div style="color: #ff0000; background-color: #00ff00;"> 빨강의 배경 </div>