CSS 기본 1강 - CSS가 왜 필요한가? -
는 특정인물과 상황을 만들었습니다.
제 1장 내 이름은 최삼순
대학교 3학년에 재학 중인 “최삼순”은 최근 어려워지는 경제상황, 취업 문제 등으로 고민에 빠져 있었습니다. 주위의 몇몇 친구들이 인턴쉽이 취업에 큰 힘이 된다는 말에 여름방학을 맞이하여 여러회사의 인턴쉽 프로그램에 지원서를 넣었습니다. 큰 기대를 하지 않았던 “최삼순” 그런데 한 기업이 “최삼순”에게 기회를 주었습니다. “이게 왠 떡이냐” 하면서 빠르게 인턴쉽 프로그램에 참가하게 된 “최삼순”, 그가 일하게 된 부서는 회사의 영업부였습니다.
어느 회사의 영업부에서 일하고 있는 “무”대리는 최근 여름 인턴쉽 프로그램을 통해서 회사의 각 부서별로 인턴사원이 들어온다는 소리를 들었습니다. 최근 영업부에서 실적이 좋지 않은 “무”대리는 부장으로부터 인턴사원을 관리하라는 임무를 받았습니다. 조금 귀찮기도 하지만 이번 기회에 인턴사원을 이용해서 “무”대리에게 주어진 귀찮은 일을 신속하게 처리해 부장에게 좋은 모습을 보여서 최근 실적을 만회해야겠다는 생각을 했습니다. 이 귀찮은 일이란 회사의 사원목록을 웹페이지로 개편하는 작업이였습니다.
평소 싸이월드, 클럽, 까페에 글을 자주 쓰고 블로그도 운영으로 기본적인 HTML을 알고 있었던 “최삼순”도 흔쾌히 개편작업에 뛰어 들었습니다. 이렇게 “최삼순”과 “무”대리는 서로 처음 만나게 되었습니다. 그리고 바로 회사 사원목록 개편 작업을 시작하게 되었습니다.
이제 인턴사원이 된 “최삼순”은 “무”대리로부터 회사의 사원 명부를 받았습니다. 제법 규모가 있는 회사여서 그런지 500여명이나 되는 사원들이 있었습니다. “최삼순”은 오랜 시간이 걸리기는 하지만 최선을 다해서 500여명의 사원들 정보를 모두 웹페이지로 옮기기 시작했습니다. 드디어 완성한 웹페이지로 사원목록을 완성하여 “무”대리에게 보고를 하기 위해 찾아 갔습니다.
“최삼순”의 작업속도에 “무”대리는 큰 칭찬을 보냈습니다. 하지만 “무”대리는 이 웹페이지가 뭔가 마음에 들지 않아 보였습니다. “이름의 색깔이랑 크기를 바꾸어서 다른 글씨들과 구별을 하는게 좋을 것 같은데?” 여러분도 잘고 있듯이 이런 상황에서는 <font> 태그를 이용하면 간단하게 글씨의 크기와 색을 바꿀 수 있습니다. 물론 “최삼순”인턴사원도 그렇게 생각하면서 다시 작업에 들어갔습니다. 500명의 회원의 이름의 글꼴과 색깔을 바꾸기 위해 <font> 태그를 500개 만들어 주었습니다. 처음 사원 명부를 만들때 보다는 시간이 조금 덜 들어가기는 했지만 제법 귀찮은 일이였습니다.
이런 인고의 시간 끝에 회원들의 이름의 글꼴과 크기를 모두 변경한 “최삼순”인턴사원은 스스로 만족하며, 다시 “무”대리에게 보고를 하게 되었습니다. “최”부장은 자신이 원하는 방향으로 사원목록 웹페이지를 만들어온 “최삼순”인턴사원에게 다시 한번 큰 칭찬을 해주었습니다. 그런데 “최삼순”인턴사원이 웹페이지를 만들고 편집하는 것이 얼마나 귀찮은 일인지 모르고 “무”대리는 2차례에 걸쳐 기존에 만들어진 웹문서를 계속 편집하게 시켰습니다. 사원들의 소속의 색을 바꾸는 등 웹페이지에 다양한 효과를 주도록 했습니다. “최삼순”인턴사원에게는 “무”대리가 시키는 일을 할 때 마다 500여명의 사원 목록을 모두 수정해야하는 번거로움이 있었습니다.
이렇게 힘들게 “무”대리의 요구에 맞추어가면서 웹페이지를 수정하고 있는 “최삼순”인턴사원... 여러분은 이런 상황에 처한 “최삼순”인턴사원에게 조언을 할 수 있습니까? 몇몇 사람들은 PHP와 데이터 베이스를 사용하라고 말할 것입니다. 물론 지금 “최삼순”인턴사원이 처한 상황에 적용이 될 수 있지만 근본적인 해결책 즉 “스타일”을 적용한다는 점을 해결해 주지는 못합니다. 반면에 아무런 대답도 할 수 없는 분들도 있을 것입니다. 바로 “최삼순”과 같이 말이죠. 그럼 “최삼순”이 어떻게 지금 상황을 풀어나가는지 “최삼순”을 계속 따라가 본다면 여러분도 위와 같은 상황을 해결 할 수 있을 것입니다.
매번 이런식으로 “무”대리가 원하는 스타일로 웹문서를 바꾸는 것은 매우 비효율적이고 “최삼순” 자신도 힘이 많이 들것이라는 생각에 우리의 “최삼순”은 근본적인 해결책을 찾아 나서게 됩니다. 자신에 상황에 맞는 HTML을 활용하여 간단하게 웹문서의 편집과 스타일을 적용할 수 있는 그런 멋진 해결책을 말이죠.
처음에 PHP와 데이터베이스를 만나게 됩니다. 서버와 PHP 그리고 데이터베이스에 대한 전반적인 이해가 필요하며, PHP와 SQL이라는 고급언어를 배워야 하는 번거로움이 있습니다. 그리고 회원들을 반복적으로 표현해 줄 수는 있지만 스타일을 적용시키는 과정에는 어려움이 있었습니다. 이외에도 여러 가지 새로운 언어와 프로그램 등이 있었지만 전부 어려운 언어로 되어 있고, 시간을 많이 투자해야 했습니다. 그러던 중 우연히 해결책을 발견하게 되었습니다. 평소 친하던 학교 선배와 술자리를 하던 중 “최삼순”은 지금까지 인턴사원을 하면서 있었던 일을 한탄하듯이 선배에게 이야기 했습니다. 이런 이야기를 들은 선배는 “내가 그 해결책이란거 가르쳐 줄까? 네 이름이잖아 최삼순!” “내 이름?” “그래 CSS라는거 한번 알아봐 네 상황에서 정확한 해결책이니까” 이렇게 조금은 간단하게 최삼순은 CSS라는 해결책을 찾게 됩니다.
다음 강의에서 계속됩니다... CSS기본 2강을 봐주세요