Day68 - [css]디자인실습 4일차.

학원에서 css 를 배우고, 디자인실습을 한지 4일차가 되었습니다.

 

그 동안, 그리고 오늘까지 한 걸 한번 알아야 할 것들만 한번 추려서 정리해 보겠습니다.

 

1. 부트스트랩 의 스타일을 가져와서, 속성을 변경 및 지정하는 것으로 쉽게 디자인 가능

 

부트스트랩에서 만들어져 있는 스타일을 이용할 때, 변경하고 싶은 것이 있다면, 해당 태그 또는 class 이름을 이용해서, 속성을 변경 및 지정 할 수 있음.

 

2.. textarea 의 resize vertical.

 

textarea 를 만들게 되면, 사용자가 임의로 외곽을 드래그 하면, 크기를 조절할 수 있습니다.

 

이를 방지하려면, resize 속성을 사용하면 됩니다.

none -> 금지.

vertical -> 세로크기만 조절 가능.

정도 알면 될 것 같습니다.

 

3. 탭 스타일

 

탭 스타일을 사용하려면, bootstrap.js 와 jquery 가 필요함.

 

부트스트랩에 있는 탭 스타일을 그대로 가져온 후에, 특정 스타일 변경 및 지정.

 

4. 미디어 쿼리를 이용해서, 반응형 디자인 설계.

 

웹 페이지를 디자인 할 때, 화면의 크기에 따라서 달라져야 하는 속성들을 미디어 쿼리를 이용해서 변경 .

ex) @media(min-width: 767px) { p { width: 20% } }

 

5. 컴포넌트 사용

 

무료 컴포넌트 or 부트스트랩 에서 컴포넌트 를 통해서 기호(?) 문자(?) 이모티콘(?) 을 사용할 수 있음

 

예제. 아래처럼 디자인 할 것.

<section style="margin-top: 100px;">
        <div class="container">
            <div class="row">
                <aside class="col-sm-3 aside-facebook">
                    <div class="aside-img">
                        <p><img src="img/profile.png">사라만</p>
                    </div>
                    <ul class="aside-top">
                        <li><a href="#">뉴스피드</a></li>
                        <li><a href="#">메신저</a></li>
                        <li><a href="#">watch동영상</a></li>
                    </ul>
                    <ul class="aside-middle">
                        <li><a href="#">둘러보기</a></li>
                    </ul>
                    <ul class="aside-bottom">
                        <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>
                </aside>
                <div class="col-sm-7 section-facebook">
                    <div class="section-top">
                        <h4>게시글을 등록하세요</h4>
                        <div class="form-group">
                            <textarea class="form-control text-form" rows="5" id="comment"></textarea>
                        </div>
                        <div class="replay">
                            <button type="button" class="btn btn-success btn-left">이미지 업로드</button>
                            <button type="button" class="btn btn-info btn-right">등록하기</button>
                        </div>
                    </div>
                    <div class="section-content">
                        <div class="section-img">
                            <img src="img/profile.png" style="width: 50px;">
                        </div>
                        <div class="section-img-content">
                            <small class="small-top">테스트</small>
                            <small>21시간</small>
                        </div>
                        <p>삶이 우리를 끝없이 시험하기에 고어텍스는 한계를 테스트합니다</p>

                        <div class="facebook-img">
                            <img src="img/facebook.jpg">
                        </div>
                        <div class="facebook-bottom"> 
                            <div class="facebook-hand">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                            </div>
                            522
                        </div>
                        <div class="facebook-bottom-list">
                            <div class="left">
                                <span class="glyphicon glyphicon-thumbs-up">좋아요</span>
                            </div>
                            <div class="center">
                                <span class="glyphicon glyphicon-comment">댓글달기</span>
                            </div>
                            <div class="right">
                                <span class="glyphicon glyphicon-share-alt">공유하기</span>
                            </div>
                        </div>
                    </div>
                </div>
                <aside class="col-sm-2 aside-facebook">
                    <div class="aside-top">
                        <p>목록</p>
                    </div>
                    <ul class="aside-bottom">
                        <li> <a href="#">목록1</a> </li>
                        <li> <a href="#">목록2</a> </li>
                        <li> <a href="#">목록3</a> </li>
                        <li> <a href="#">목록4</a> </li>
                        <li> <a href="#">목록5</a> </li>
                    </ul>
                </aside>
            </div>
        </div>
    </section>

/* ====== 페이스북 디자인 ====== */
@media (max-width: 767px) {
    .aside-facebook {display: none;}
}

.aside-top > li > a , .aside-middle > li > a, .aside-bottom > li > a {
    display: block;
    text-decoration: none;
    color: black;
}

.aside-top, .aside-middle {
    padding-bottom: 15px;
}

.section-facebook {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.section-top {
    padding-bottom: 10px;
}

.section-top > .form-group > .text-form {
    height: 80px;
    resize: vertical;
    border-radius: 5px;

    transition: height 1s ease-in-out;
}

.section-top > .form-group > .text-form:focus {
    height: 130px;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}

.section-top > .replay {
    overflow: hidden;
    margin-top: -5px;
}
.section-top > .replay > .btn-left {
    float: left;
}
.section-top > .replay > .btn-right {
    float: right;
}

.section-content {
    position: relative;
}

.section-content > .section-img {
    position: absolute;
    top: 0;
    left: 0;
}

.section-content > .section-img-content {
    padding-left: 60px;
    min-height: 5px;
}

.section-content > .section-img-content > small {
    display: block;
}

.section-content > .section-img-content > .small-top {
    padding-bottom: 20px;
}

.facebook-bottom {
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.facebook-bottom > .facebook-hand {
    display: inline-block;
    background-color: skyblue;
    color: white;
    border-radius: 10px;
}

.facebook-bottom-list {
    overflow:hidden;
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
}

.facebook-bottom-list > .left, .facebook-bottom-list > .center, .facebook-bottom-list > .right {
    width: 33.3333%;
    float: left;
}