5. 기본적인 페이지 만들기 (section)

안녕하세요!!

오늘은 저번 포스팅에 이어서 section 부분을 꾸며볼 텐데요!!

다들 제가 알려드린 http://ovenapp.io  에서 기본 틀 구상은 하셨나요??

아직 하지 않으셨다면 얼른 구상을 시작하고 하세요!!

개발자의 기본 자세는 기본 구상이죠!!

이번에 꾸밀 section을 기본적으로 알려 드린다면 왼쪽에는 20%의 width 값과 오른쪽에는 80%의 width값으로

왼쪽에는 메뉴 오른쪽에는 내용이 들어갈 수 있도록 할 텐데요.

이제 진행해 보도록할께요!!

일단은 width 20% 인 부분을 먼저 꾸며 보도록 할께요!

<div class="width-20">
                    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR9YuC8ykmN63GvrtNcf7ocs1eTJPiw-PyUSSz58flZMw0c8yNv5g">
                    <p>User</p>
                    <a href="#">내정보</a>
                </div>
                <div class="width-20-box2">
                    <ul>
                        <li><a href="#">홈</a></li>
                        <li><a href="#">홈</a></li>
                        <li><a href="#">홈</a></li>
                        <li><a href="#">홈</a></li>
                        <li><a href="#">홈</a></li>
                        <li><a href="#">홈</a></li>
                    </ul>
                </div>
            </div>

여기까지 진행하셨나요??

복사 붙여넣기만 진행하시지 말고 직접 써 보시고 구상해 보시는 것도 추천해 드릴께요!!

이렇게 진행하셨다면 width값이 20%인 div가 하나 만들어 질텐데요!

아직 스타일 적용이 되지 않았기 때문에 한줄 전체를 잡아 먹은 div를 볼 수 있습니다.

.width-20 {
    border-right: 1px solid;
    width: 20%;
    float: left;
}
.width-20-box1 {
    text-align: center;
}
.width-20-box1 img {
    width: 40%;
    height: 90px;
    border-radius: 50%;
}
.width-20-box2 ul li {
    list-style: none;
    margin: 30px 0 10px 10px;
}

이 부분이 스타일이 적용된 부분인데요.

저기에서 사용 된 CSS 는 CSS 게시판에 따로 확인해 주세요!!

CSS에는 여러가지 기능이 있기 때문에 정확히 알고 넘어가 주셨으면 좋겠습니다!!

이렇게 되면 width 20%의 부분이 끝났는데요!

그럼 다음으로 width 80% 를 꾸며볼껀데요!!

여기서 주의할 점!! 저는 여러분에게 경계값을 보여주기 위해서 border를 사용해서 width 80% 부분을 79%로 조정하겠습니다!

border를 주게 되면 자동적으로 1px을 잡아먹기 때문인데요. 

이 부분도 CSS 게시판에 게시해 놓겠습니다!!

그럼 우선 20% 결과값을 한번 볼까요??

이런식으로 결과값이 보이시나요??

이렇게 영역안에 또 영역을 잡고 진행하시는게 편하실 꺼에요.

그렇지 않으면 일일이 밀어주고 맞추고 해야하니... 번거롭겠죠?

자 다음으로 80%의 width 값을 가지고있는 div를 꾸며보겠습니다!

<div class="width-80">
    <div class="width-80-box">
        <div class="width-80-inbox">
            <img src="http://image.wemakeprice.com/dealimg/201308/132620/bf4a8413740f407f8c19e6e335335b3370feb4cc.jpg">
        </div>
        <div class="width-80-inbox">
            <img src="http://image.wemakeprice.com/dealimg/201308/132620/bf4a8413740f407f8c19e6e335335b3370feb4cc.jpg">
        </div>
        <div class="width-80-inbox">
            <img src="http://image.wemakeprice.com/dealimg/201308/132620/bf4a8413740f407f8c19e6e335335b3370feb4cc.jpg">
        </div>
        <div class="width-80-inbox">
            <img src="http://image.wemakeprice.com/dealimg/201308/132620/bf4a8413740f407f8c19e6e335335b3370feb4cc.jpg">
        </div>
        <div class="width-80-inbox">
            <img src="http://image.wemakeprice.com/dealimg/201308/132620/bf4a8413740f407f8c19e6e335335b3370feb4cc.jpg">
        </div>
    </div>
</div>

이렇게 입력해 주시면 되는데요.

앞서 말씀 드렸듯이 부모가 되는 박스를 하나 만들고 그 안에 박스를 나열하는 것이 좋다고 했는데 그 이유가

이번에 나오게 되네요.

잘 보시면 width-80 안에 width-80-box 안쪽으로 inbox 들이 나열되있는 것이 보이시죠??

만약에 width-80이 부모가 된다면 그 안에 들어가는 것이 모두 같은 것이 적용되게 되죠!

그렇게 때문에 box라는 자식을 하나 더 만들어 inbox의 부모가 될 수 있게 만든 것이죠!!

그렇기 때문에 그 이후에 box의 끝나는 부분 다음에 새로 만들게 되면 box안에서 적용되었던 css 들은 영향을 받지 않게 되는 겁니다.

스타일을 한번 볼까요??

.width-80 {
    width: 79%;
    float: left;
}
.width-80 .width-80-box .width-80-inbox{
    width: 15%;
    float: left;
    margin-left: 40px; 
}
.width-80 .width-80-box .width-80-inbox img {
    width: 100%;
}

공교롭게도 80% 부분에는 스타일이 별로 들어가지 않아서 설명드릴 부분이 별로 없네요 ㅠㅠ

그럼 바로 결과를 보겠습니다.

이런식으로 결과가 나오게 되겠죠!!

section 부분에서는 딱히 설명해 드릴 것이 없기 때문에...

댓글로 궁금하신 점을 남겨 주시면 정성스럽게 답변해 드리겠습니다!!

이상으로 포스팅을 마치겠습니다!

footer 부분이 지나면 더욱 자세히 친절하게 포스팅하도록 할꼐요!!

감사합니다!!