CSS의 기초_첫번째

안녕하세요 

웹아이 입니다. 

 오늘은 CSS (Cascading Style Sheet)에 대해 

간단히 설명해 보겠습니다. 

 HTML과 CSS?? 

 HTML이 텍스트나 이미지, 표 같은 

각 요소를 이용하여 웹 문서에 뼈대를 만드는 것이라고 한다면, 

 CSS는 텍스트의 색상이나 크기, 이미지 크기나 위치, 표의 색상 등 

웹 문서의 디자인 요소를 담당하는 것입니다. 

 쉽게 말해 웹페이지의 인테리어라고 이해하시면 될것 같네요!~~ 

CSS는 다음과 같이 태그 안에 넣어서 사용이 가능합니다.

<p style="width=100%"></p>

하지만 저렇게 태그안에 넣지 않고 선택자를 이용해서 사용해주는 경우가 많습니다. 

 왜 그렇게 사용해야할까요? 

1. 웹 문서의 디자인과 내용을 분리할 수 있습니다. 

내용을 건드리지 않고 스타일 시트를 이용해 디자인만 변경해서 

완전히 다른 느낌의 문서로 만들 수 있습니다.  

2. 다양한 매체에 적합한 문서를 간단히 만들 수 있습니다. 

기존의 HTML문서는 개인용 컴퓨터 웹브라우저 화면을 기본으로 하기 때문에 

인쇄가 필요한 문서일 경우, 인쇄용 문서를 따로 제공해야하거나 

모바일용 홈페이지가 필요한 경우, 따로 문서를 만들어야 했습니다. 

하지만 대상기기에 맞게 CSS만 바꿔주면 

같은 내용을 여러 매체에서 사용할 수 있습니다 :) 

다시 한번 예를 들어보겠습니다. 

<p style="width:100%"></p>
<p style="width:100%"></p>
<p style="width:100%"></p>
<p style="width:100%"></p>

 위와 같이 p태그가 있습니다. 

또 다른 방법으로는 

2번. 

<style>
p {
width:100%;    
}
</style>
<p></p>
<p></p>
<p></p>
<p></p>

 위의 두가지 경우에서 

p태그 전체를 width를 50%로 바꾸고 싶을때!! 

1번과 같은 방법이라면 

각 p태그마다 찾아다니면서 색상을 바꿔야 하는데

2번과 같이 스타일을 사용한다면 간단히 수정이 가능하겠요? 

 지금 예제는 단순히 4개의 p태그만 바꾸면 되겠지만 

 실제 웹페이지를 만들때는 몇개가 될지는 알수 없어요... 

하지만 일일이 찾아서 바꾸는게 힘든건 사실입니다. 

오늘은 여기까지 하겠습니다. 

궁금하신 점이나 알고 싶은 것이 있으시다면 댓글에 남겨주세요^^