1일차 : 수업소개 ~ CSS의 등장

1일차 : 수업소개 ~ CSS의 등장

 

WEB1 HTML과 INTERNET을 마치고 WEB2 CSS로 넘어왔습니다.

 

○ CSS란?

 

HTML을 통해 정보를 표현하게 된 사람들은 이제 디자인을 신경쓰게 되었는데요.

사람들은 웹페이지를 아름답게 만들기 위해 두 가지 방법을 생각해 냈습니다.

 

1. 쉬운 길 :  HTML에 디자인에 대한 새로운 태그를 추가

2. 어려운 길 : 디자인을 표현할 수 있는 새로운 언어를 개발

 

 

○  쉬운 길

 

CSS가 등장하기 이전에는 1번 쉬운 길인 태그를 통해 문자의 디자인을 변경해 주었습니다.

예를 들어, font 태그를 이용하면 문자의 색을 변경할 수 있습니다.

위처럼 <font color="원하는색"> 문구 </font> 이렇게 설정하여 색을 변경하면 됩니다.

웹이 태어난 직후에 HTML에는 이처럼 디자인을 위한 코드가 대거 추가됩니다.

 

그런데 만약.. 이렇게 색을 변경해야하는 문구가 엄청나게 많다면요?

여기에 더해서 색상도 매일 변경해줘야 한다면?

당장 어떤 웹사이트에 접속하면 검정색 회색 빨강색 흰색 등등 다양한 색상의 문구를 볼 수 있죠.

이걸 하나씩 다 타이핑해서 수정해야한다면 어떨까요?

생각만해도 괴롭네요 ㅠㅠ

 

쉬운 길로 가려다보니 오히려 더 귀찮고 힘들어진 것이죠.

 

 

○ 어려운 길

 

어려운 길을 택한 사람들이 만들어낸 것이 바로 CSS입니다.

CSS는 여러 가지를 한번에 변경할 때 유용하니, 하이퍼링크가 붙은 문자의 색상을 모두 빨강으로 변경해 봅시다.

<style> 을 사용해서, CSS를 적용시켜주면 됩니다.

변경해줄 것들의 공통점인 하이퍼링크! a를 우선 적어주고 여기는 대괄호{}로 바깥을 씌워줍니다.

그 안에 (color):원하는색상; 을 입력해주면 한번에 변경이 가능합니다.

만약 색상을 파랑으로 변경한다면요? red만 blue로 변경하면 되겠죠.

 

블루로 타이핑하면 전체 색상이 이렇게 변경됩니다.

 

비주얼 스튜디오 코드에서는 색상 위에 커서를 갖다대면 타이핑 하지 않아도 원하는 색상으로 변경이 가능합니다.

아래처럼 rbg(a,a,a) 같은 형태로 자동 변환됩니다!

 

이처럼 디자인과 관련된 코드는 이 style 코드 안쪽에만 넣어주면 됩니다.

내용/정보는 아래쪽에 그대로 남아있는거죠. 일일히 태그를 달지 않아도 됩니다.

 

 

○ CSS의 장점

1. 여러가지 디자인을 한 번에 변경 가능

2. 중복 코드를 단 하나의 코드로 나타내어 효율성을 높임

3. 정보 부분이 들어있는 코드는 그대로 유지가 가능

 

규모가 큰 웹사이트일수록 CSS를 사용하는 것이 태그를 사용하는 것보다 훨씬 더 효율적입니다.

 

오늘은 CSS가 어떻게 등장하게 되었는지 그 배경과 기본적인 개념 및 활용 방법을 배웠습니다.

물론 CSS는 새로운 언어이기 때문에, 새로 학습해야하는 단점이 있지만, 어차피 저희는 첫걸음을 떼는 중이니까요.

 

다음 시간에는 CSS에 대해 조금 더 자세히 알아보겠습니다.