CSS

 

 

HTML이 웹페이지에 들어 가는 여러형태의 구성요소를 만드는 것이라면 CSS는 구성요소의 스타일을 정하는 방법이다. 

 

• CSS가 무엇이고 어떻게 사용하는지 
• 클래스와 아이디를 사용하여 구성요소를 어떻게 조회하는지
• 웹페이지를 재구성하기 위해 DIV를 사용하는 법,
• 테두리와 포지셔닝, 컬러와 폰트, 텍스트와 링크 포맷을 조정하기 위해 CSS를 사용하는 법을 배운다. 

---

CSS란 무엇인가

 

HTML로 웹페이지에 구성요소를 추가할 수는 있지만 이들의 위치, 색깔, 폰트 또는 스타일을 조절하기는 쉽지 않다. 스타일 정보를 페이지 내용과 별도로 저장하여 내용에 영향을 주지 않고 쉽게 스타일을 조정하자는 것이 주된 생각이었다. 실제로 HTML은 전혀 손대지 않고 CSS만 변경하여 웹페이지의 모습과 레이아웃을 바꿀 수 있다. 

 

---

왜 CSS를 배우는가

 

 

CSS없이 HTML만 배우는 것은 흑백으로 그림을 배우는 것과 같다. 무슨 그림이든 그릴 수 있지만 실제 세상에 존재하는 색깔은 쓸 수가 없다. CSS를 이용해 웹사이트를 독특하고 친근하고 아름답게 디자인할 수 있다. 또 웹사이트의 모습을 자기가 원하는 대로 바꿀 수 있다. CSS는 간단하긴 하지만 HTML보다는 더 복잡해서 집중이 필요하다

 

 

---

CSS는 어떻게 생겼는가

 

우선 비어있는 웹페이지에  ' I love HTML'이라는 문장을 쓰고  :  <p> I love HTML.</p> 

다음은 'color:blue'값의 스타일 어트리뷰트를 추가한다.  :  <p style="color:blue">I love HTML.</p>

놀랍게도 CSS를 통해 텍스트가 파란색으로 바뀐다. 

 

 

 

 

 

color:blue 부분이 CSS이다. 특정 <p> 구성요소에 하나의 CSS 규칙이 적용됐다.  style 어트리뷰트를 이용해 CSS를 추가하는 것을 인라인 CSS라고 한다. HTML 줄 안쪽에 있기 때문이다  그러나 전체에는 적용이 안되고 style 어트리뷰트가 삽입되어 있는 것만 적용이 된다는 특징이 있다.