Rails를 공부하면서 간단한 사이트를 만들고 있습니다.
프로젝트를 진행하다 큰 벽을 만났습니다. Ruby, Rails는 어떻게 어떻게 해결하고 있지만 Design은 정말.. 프로그래머인 저에게는 너무 힘든일입니다. ㅠ.ㅠ;; ( CSS는 JavaScript보다 어려운것 같습니다. ^^ )

덕분에 CSS를 공부하고 있습니다.
예전에도 관심이 조금 있어서 힐끔 힐끔 거리기는 했지만 필요할때 조금 찾아보는 정도였는데, 이번에는 체계적(?)으로 다가서고 있습니다. 메인에 보여줄 데이터를 가져오는 프로그램 작업보다 Layout을 위해 CSS를 수정하는 시간이 더 길었습니다. 'postion, float, clear등'과 같은 속성들을 정확하게 이해할 수 있어서 즐거운 시간을 보내고 있습니다. 덕분에 저의 Ruby - Rails 사이트는 표류중입니다. ^^

이것이 완성된 저의 main입니다. 보여드리기 위해서 'border'값을 무리하게 넣었습니다. 이 부분들은 살짝 수정해서 사용하시면 됩니다.


layout.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 36</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
    html,body{margin:0;padding:0}
    div#container{width:700px;margin:2px auto; border:1px solid red;}

    div#header{position:relative; border:2px solid blue}

    div#navigation{float:left;width:196px; border:2px solid green;}
    div#content{float:right;width:496px;  border:2px solid green;}
    div#footer{clear:both;width:696px; border:2px solid blue}

    div#content ul {float:left;  list-style: none; width:70px; margin:8px 0 8px 0; padding:8px; border:1px solid black; margin-left:10px;}
    
    div#navigation_1 {background-color:#efefef; margin:5px;}
    div#navigation_1 ul { list-style: none; margin:0px; padding:8px; }
    div#navigation_1 ul li.big { font-weight:bold;}
    div#navigation_1 ul li.small { padding-left:15px; }
</style>
</head>
<body>
    <div id="container">
        <div id="header"><h1>Header</h1></div>
        <div id="navigation">
            <div id="navigation_1">
                    <ul>
                        <li class="big">navi</li>
                        <li class="small">navi1</li>
                        <li class="small">navi2</li>
                    </ul>
                    <ul>
                        <li class="big">navi</li>
                        <li class="small">navi1</li>
                        <li class="small">navi2</li>
                    </ul>
            </div>
            <div id="navigation_1">
                    <ul>
                        <li class="big">navi</li>
                        <li class="small">navi1</li>
                        <li class="small">navi2</li>
                    </ul>
                    <ul>
                        <li class="big">navi</li>
                        <li class="small">navi1</li>
                        <li class="small">navi2</li>
                    </ul>
            </div>            
        </div>
        <div id="wrapper">
            <div id="content">
                    <ul>
                        <li>test</li>
                        <li>test1</li>
                        <li>test2</li>
                    </ul>
                    <ul>
                        <li>test</li>
                        <li>test1</li>
                        <li>test2</li>
                    </ul>
                    <ul>
                        <li>test</li>
                        <li>test1</li>
                        <li>test2</li>
                    </ul>
                    <ul>
                        <li>test</li>
                        <li>test1</li>
                        <li>test2</li>
                    </ul>
                    <ul>
                        <li>test</li>
                        <li>test1</li>
                        <li>test2</li>
                    </ul>
                    <ul>
                        <li>test</li>
                        <li>test1</li>
                        <li>test2</li>
                    </ul>
                    <ul>
                        <li>test</li>
                        <li>test1</li>
                        <li>test2</li>
                    </ul>                                                                                                                        
            </div>
        </div>


        <div id="footer"><h1>Footer</h1></div>
    </div>
    
</body>
</html>


http://blog.html.it/layoutgala
layout공부를 하다가 만난 사이트입니다. 많은 도움이 되었습니다. 프로그래머이면서 CSS를 공부해야 할 일이 있으시다면 한번쯤 들러보시면 좋을 것 같습니다.

Posted by 달빛변신
TAG ,

댓글을 달아 주세요

  1. 아름 2008.12.23 06:01  댓글주소  수정/삭제  댓글쓰기

    가끔씩 골치를 썩히는 아이지만, CSS라는거 배워두면 참 재밌는 녀석입니다 ^^
    저같은 경우는 JS와 PHP같은 걸 배우고 싶은데 쉽게 시작이 안 되네요 ㅠㅠ

    • 달빛변신 2008.12.23 10:46 신고  댓글주소  수정/삭제

      JS는 점점 거칠어 지고 있습니다. ^^.
      Web2.0이라는 녀석이 등장한 이후 부터는 더 많은 것들을 JS로 처리하기 시작하면서 소스 또한 복잡해저 가고 있습니다. 하지만 역시 한번 도전해볼 가치는 충분히 있습니다.