1. 개발자가 디자인(CSS)을 알아야 하는 이유

이 페이지에서는 동일한 웹 페이지를 개발할 때 

개발 언어(JavaScript)만 가지고 할 때와 CSS를 같이 사용할 때의 코드를 비교하여 장단점을 정리하였다.

개발 언어는 예제를 간단하게 구현하기 위해 JavaScript (JS)를 사용하였지만

Java 등 다른 언어를 사용했을 때도 동일하다.

이 예제를 이해하기 위해 간단한 달력 만들기를 할 것이고

예제를 만들면서 개발에 대한 이해도 향상시키기 위해 다음과 같이 단계별로 구성하였다.

1. JS 에서 HTML Table 태그 생성하는 예제
2. 해당 월의 모든 날짜를 가지고 오는 예제
3. 1과 2를 섞어서 JS로 만든 간단한 일자 리스트
4. 3을 보강하여 달력 모양 만들기
   
5. 4의 코드를 CSS와 같이 사용하여 만든 달력
   

먼저, 몇 가지 JS의 코드를 이해해야 한다.

Document 클래스에 있는 

getElementById는 파라메터로 넘겨진 ID에 대한 HTML 태그를 가지고 오는 것이고

createElement는 주어진 파라메터(HTML 태그)를 생성하여 반환한다.

태그를 생성한 후 에는 appendChild로 부모를 지정해 줘야 화면에 보인다.

다음 코드는 달력을 만들기 위한 디자인 코드이다.

즉, 위의 코드는 세로 개수(7)만큼 반복해서 테이블의 행(TR) 태그를 만들고

가로 개수(5)만큼 반복해서 행 안의 (TD) 태그를 생성한다. 

동적으로 테이블 태그를 생성한다.

window.onload = function() {
    var calendar = document.getElementById("calendar");
    var table = document.createElement( "table");
    table.border = "1px";   
    table.width = "100px";   
    for (var i=0; i<5; i++) {
        var tr = document.createElement( "tr");
        table.appendChild(tr);
        for (var j=0; j<5; j++) {
            var td=document.createElement( "td");
            td.innerHTML ="<br/>"
            tr.appendChild(td);
        }
    }
    calendar.appendChild(table);
};   

다운로드: calendar1.html

실행하면 다음 그림과 같이 7 * 5로 구성된 테이블(Table) 태그가 생성된다.

다음 코드는 달력을 만들기 위해 날짜를 생성하는 코드이다.

달력은 매월 1일부터 마지막(28, 29, 10, 31)일까지 하루씩 반복하여 출력하는 것이다.

매월 1일(sdate)은 Date 클래스로 현재 날짜를 읽어와 일(day)을 1로 설정하면 된다 (setDate(1)).

마지막 날짜(edate)는 현재 월의 다음달 (edate.getMonth()+1)을 구하여 일자를 1로 설정하면 된다.

마지막 날짜는 다음달 1일인데

반복하는 일자 값을 다음달 1일보다 작게(<) 하면 되기 때문이다 (sdate < edate).

인터넷의 많은 자료가

옛날부터 전해오는 윤달 계산 방식으로 구현되어 있는데,

이 방식은 코드가 복잡하기 때문에

개발언어에서 제공하는 함수를 이용해서 시작일(sdate)과 종료일(edate)을 구하는 간단한 방식을 이용했다.

window.onload = function() {
    var sdate = new Date();
    var edate = new Date();
    sdate.setDate(1);
    edate.setMonth(edate.getMonth()+1);
    edate.setDate(1);
    while (sdate < edate) {
        document.write(sdate + "<br/>");
        sdate.setDate(sdate.getDate()+1);
    }
};   

다운로드: calendar2.html

실행하면 다음 그림과 같이 4월 1일부터 30일까지가 리스트로 출력된다.

첫 번째 코드와 두 번째 코드를 합쳐서 다음 코드를 작성한다.

이 코드는 그림과 같이 모든 날짜가 한 줄에 출력된다.

window.onload = function() {
    var sdate = new Date();
    var edate = new Date();
    sdate.setDate(1);
    edate.setMonth(edate.getMonth()+1);
    edate.setDate(1);

    var calendar = document.getElementById("calendar");
    var table = document.createElement( "table");
    calendar.appendChild(table);
    table.border = "1px";   
    table.width = "100px";   
    var tr = document.createElement( "tr");
    table.appendChild(tr);

    while (sdate < edate ) {
        var td=document.createElement( "td");
        td.innerHTML = sdate.getDate();
        tr.appendChild(td);
        sdate.setDate(sdate.getDate()+1);
    }
};   

다운로드: calendar3.html

실행 결과 다음 그림과 같이 4월의 일자들이 테이블 각 셀에 들어가서 나열되었다.

이 코드에 매주 토요일에 새로운 행(tr)이 만들어 지게 하는 코드를 넣어주면 된다.

getDay함수는 각 날짜의 요일(0~6)을 반환하는 함수로 

일요일은 0을, 토요일은 6을 반환한다.

따라서, 일요일부터 시작하기 때문에 getDay로 반환된 값이 0이면 새로운 행(TR)에 데이터를 출력한다.

조금 더 달력스럽게 보이기 위해 1일의 요일을 맞춰줘야 한다.

매월의 시작일이 무슨 요일일지 찾아서 그 개수만큼 공백을 넣어줘야 달력처럼 보인다.

변수의 값이 1일 일 때 getDay로 요일(0~6)을 파악하고, 요일 개수만큼 열(TD)을 생성하면

요일을 맞춰서 보여주게 된다.

window.onload = function() {
    var sdate = new Date();
    var edate = new Date();
    sdate.setDate(1);
    edate.setMonth(edate.getMonth()+1);
    edate.setDate(1);

    var calendar = document.getElementById("calendar");
    var table = document.createElement( "table");
    calendar.appendChild(table);
    table.border = "1px";   
    var tr = document.createElement( "tr");
    table.appendChild(tr);

    var preColumn = sdate.getDay();
    for (var i=0; i < preColumn; i++) {
        var td=document.createElement( "td");
        td.innerHTML = "<br/>";
        td.width="20px";
        tr.appendChild(td);
    }
   
    while (sdate < edate ) {
        var td=document.createElement( "td");
        td.innerHTML = sdate.getDate();
        td.width="20px";
        if (sdate.getDay()===0) {
            var tr = document.createElement( "tr");
            table.appendChild(tr);
        }
        tr.appendChild(td);
        sdate.setDate(sdate.getDate()+1);
    }
   
};   

다운로드:calendar4.html

다음 그림과 같이 그럴듯한 달력이 완성되고

제법 많은 코드가 생성된 것을 알 수 있다.

마지막으로 CSS를 사용한 다음 코드를 보면 코드 양이 다른 것을 확인할 수 있다.

<style>
    #calendar > div{
        width: 20px;
        border: 1px solid;
        display:inline-block;
        margin-top:-1;
        margin-left:-1;
        text-align:center;
    }
</style>
<script>
window.onload = function() {
    var sdate = new Date();
    var edate = new Date();
    sdate.setDate(1);
    edate.setMonth(edate.getMonth()+1);
    edate.setDate(1);

    var calendar = document.getElementById("calendar");
    var preColumn = sdate.getDay();
    for (var i=0; i < sdate.getDay(); i++) {
        var div=document.createElement( "div");
        div.innerHTML = "<br/>";
        calendar.appendChild(div);
    }
   
    while (sdate < edate ) {
        var div=document.createElement( "div");
        calendar.appendChild(div);
        div.innerHTML = sdate.getDate();
        sdate.setDate(sdate.getDate()+1);
    }
};
   
</script>   

다운로드: calendar5.html

DIV를 동적으로 생성해서 날짜 값을 넣어준 것이 전부이다.

실행 결과는 그림과 같이 JS만 사용했을 때랑 동일하다.

코드에 IF 문을 사용하지 않는다.

(개인적으로 프로그램을 쉽게 짜기 위해 IF 문 사용을 자제하는 걸 선호한다)

이유는 전체를 감싸는 DIV(calendar)의 크기를 150px로 주고

하위의 날짜 DIV의 크기를 20px로 줘서

7번째 (140px)까지 채우고 8번째가 되면 다음라인으로 배치되는 특성을 이용 한 것이다.

JS에서 처리 하지 않았던 글자의 중앙정렬(text-align)도 추가했다.

배경색등 더 추가해도 CSS처리하기 때문에 JS 코드에 변화는 없다.

이외에도 CSS를 이용하여 보다 쉽게 문자열 자르기등의 기능을 이용할 수 있다.

이렇게 처리하는 것이 중요한 이유는

1. 코드가 간단해 진다는 것이다. 

   개발언어에서 모든 것을 처리하면 당연히 양이 많을 수 밖에 없다.

2. 코드와 디자인을 분리하면 디자인 부분을 남(디자이너 등)에게 맡길 수 있다는 것이다.

    코드와 디자인 부분이 같이 있으면 누가 처리할 것 인지 하는 문제와 더불어

    개발자가 하면 디자인 부분의 누수가 생기고

    디자이너가 하면(?) 버그를 양산 할 수도 있다.

    그래서 중간 영역의 작업자가 있지만 쉬운 일은 아니다.

Spring이나 Struts등 Java나 다른 개발 언어를 사용하여 만드는 경우도 위와 동일하다.

IF 문 처리 부분에서 더 복잡한 코드로 처리되는 데 CSS로 처리하면 깔끔하게 구현할 수 있다.

간단하고 깔끔하게 구현되어야

차후에 수정하거나 다른 사람과의 협업 등에 편리하다.