mjeongriver
Published 2022. 12. 27. 16:24
day54-css TIL/HTML&CSS

* 전날 과제 예제(html, css)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- css 링크 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 제이쿼리 링크 -->
    <script src="jquery/jquery-3.6.3.min.js"></script>

    <!-- 부트스트랩 테마가 필요하면 이쯤 추가.. -->

    <!-- js링크 -->
    <script src="js/bootstrap.min.js"></script>

    <!-- 커스터마이징 디자인(가장 밑에 만들어 줄 것)-->
    <link rel="stylesheet" href="index03.css">

</head>
<body>

    <section>
        <div class ="container">
            <h3>상세내용</h3>

            <div class ="row">
                <div class ="col-sm-6 col-xs-12">
                    <img src="img/detail.jpg" alt="이미지">
                </div>
                <div class ="col-sm-6 col-xs-12">
                    <div class = "detail"> <!--위-->
                        <p class = "title">[게릴라특가] 30일체험가능! 벨라페이스 3컬러 LED마스크 눈마사지 겸용/4단계 시간조절/피부홈케어 +사은품까지!</p>
                        <p class = "price">135,000원</p>
                        <p class = "deliver">무료배송<br>
                        상품별배송 ㅣ 택배배송 ㅣ당일출고, 12시 이전 결제 건까지 해당 (주말, 공휴일 제외)</p>
                    </div>

                    <div class ="detail-control"> <!--아래-->
                        <div class = "price">
                            <p class ="left">총 상품 금액</p>
                            <p class ="right">0원</p>
                        </div>
                        <div class = "order">
                            <button class = "left btn btn-default">장바구니</button>
                            <button class = "right btn btn-primary">구매하기</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section style="margin-top: 100px;">
        <div class = "container">
            <div class = "row">
                <div class ="col-xs-12">
                    <form class = "reply-wrap">
                        <div class = "reply-img">
                            <img src = "img/profile.png" alt ="프로필">
                        </div>
                        <div class = "reply-content">
                            <textarea class = "form-control" placeholder="500글자 이내"></textarea>
                            <div class ="reply-control">
                                <div class ="left"> <!--왼-->
                                <input type="text" class ="form-control" placeholder="아이디">
                                <input type="password" class ="form-control" placeholder="비밀번호">
                                </div>
                                <button class ="right btn btn-success">등록하기</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    
</body>
</html>
* {margin: 0px; padding: 0px; line-height: none;}
img{max-width: 100%; height: auto;}
.btn{border-radius: 0;}
.form-control {border-radius: 0;}

.detail .title {min-width: 350px;}
.detail .price {
    font-size: 25px; 
    font-weight: 700; 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.detail .deliver{font-size: 12px; color: #888;}

.detail-control .price,
.detail-control .order {
    overflow: hidden;
}

.detail-control .price .left{float: left; font-weight: 500; height: 29px; line-height: 29px;}
.detail-control .price .right{float: right; font-size: 20px; font-weight: 700;}

.detail-control .order .left {float: left; width: 50%; padding: 10px 0;}
.detail-control .order .right {float: right; width: 50%; padding: 10px 0;}


/* *****댓글창***** */
.reply-wrap {
    border: 1px solid #ddd; 
    background-color: #f5f5f5; 
    position: relative;
    padding: 15px;
}
.reply-img {
    position: absolute;
    left: 15px;
    top: 15px;
} 

.reply-content {
    padding-left: 55px;
}

.reply-content textarea {
    resize: vertical;
    height: 70px;
    margin-bottom: 5px;
    transition: all .3s ease-in-out;
}

.reply-content textarea:focus{ /*커서 찍으면 크기 늘어남*/
    height: 150px;
}

.reply-control {overflow: hidden;}
.reply-control .left{float: left;}
.reply-control .left input:nth-child(1){ /*input 태그에 1번째 자식*/
    margin-bottom: 5px;
}
.reply-control .right{float: right;}

 

1. flex

- 레이아웃을 구성할 때 flaot, position 을 사용하지만, flex문법을 통해서도 할 수 있습니다.

- flex 레이아웃은 부모박스에 flex를 선언하고, 안에 있는 박스 요소를 유연하게 배치하는 속성입니다.

 

1) 부모 박스 적용 속성

- display: flex container를 정의

- flex-direction: flex items의 주 축을 설정

- flex-wrap: flex items의 여러 줄 묶음 설정

- justify-content: 주 축의 정렬 방법을 설정

- align-content: 교차 축의 정렬 방법을 설정(2줄 이상)

- align-items: 교차 축에서 items의 정렬 방법을 설정(1줄)

 

2) display

- flex: block 특성의 flex container를 정의(80%)

- inline-flex: inline 특성의 flex container를 정의

 

3) flex-direction(중요)

- 메인축 방향을 설정

- row: items의 배치를 가로로 둠

- column: items의 배치를 세로로 둠

 

4) flex-wrap

- nowrap: 모든 items를 여러 줄로 묶지 않음

- wrap: items를 여러 줄로 묶음

- wrap-reverse: items를 wrap의 역 방향으로 여러 줄로 묶음

 

5) justify-content(주축 정렬)

- 메인축 정렬

- flex-start: items를 시작점으로 정렬

- flex-end: items를 끝점으로 정렬

- center: items를 가운데 정렬

- space-between: 시작 item은 시작점에, 마지막은 item은 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬

- space-around: items를 균등한 여백을 포함하여 정렬

 

* 예제 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {background-color: yellow; padding: 10px; height: 200px;}
        .box .items {background-color: green; width: 50px; height: 50px; }
        .container {
            /* flex 기본 item의 너비 만큼 가로 배치 */
            /* flex: flex - 블럭배치, inline-flex - 인라인 배치 */
            display: flex;
            /* 주축 설정 row 기본값 */
            /* 세로 column */
            flex-direction: row;
        }
    </style>

</head>
<body>
    
    <h3>유연한 박스 flex</h3>

    <div class ="container box">
        <div class ="items">hello</div>
        <div class ="items">hello</div>
        <div class ="items">hello</div>
    </div>

    <!-- <div class ="container box">
        <div class ="items">hello</div>
        <div class ="items">hello</div>
        <div class ="items">hello</div>
    </div> -->

    <style>
        .box {
            background-color: yellow; 
            padding: 10px;
        }

        .box .items {
            background-color: green; 
            width: 50px; 
            height: 50px;
            margin: 10px;
        }

        .container2 {
            display: flex;
            /* flex-flow는 direction과 wrap을 같이 작성하는 속성 */
            flex-flow: row wrap;
            /* flex-direction: row; flex-wrap: wrap; */
            /* 더 이상 공간이 없을 때 줄바꿈처리, 기본값 nowrap */
        }
    </style>

     
    <h3>flex-wrap(줄바꿈)</h3>

    <div class ="container2 box">
        <div class ="items">hello</div>
        <div class ="items">hello</div>
        <div class ="items">hello</div>
        <div class ="items">hello</div>
        <div class ="items">hello</div>
        <div class ="items">hello</div>
    </div>


</body>
</html>

6) align-item: 한줄, align-content: 여러줄

 

* 예제 2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            background-color: yellow;
            padding: 10px;
            height: 500px;
        }

        .box .items {
            background-color: green;
            width: 50px;
            height: 50px;
            margin: 10px;
        }

        .container {
            display: flex;
            /* flex-direction: column; row: 가로, colume일때는 주축이 세로로 바뀜 */

            /* 주축 정렬 */
            /* 아이템 사이 균등 */
            /* justify-content: space-around; */
            /* 양끝은 붙이고 사이 균등 */
            /* justify-content: space-between */
            /* 양 끝과 아이템 사이 균등 */
            justify-content: space-evenly;
        }
    </style>

</head>

<body>

    <h3>justify-content(주축 정렬)</h3>

    <div class="container box">
        <div class="items">hello</div>
        <div class="items">hello</div>
        <div class="items">hello</div>
        <div class="items">hello</div>
    </div>

    <hr>

    <h3>align-item(교차축 정렬-한줄일때)</h3>

    <style>
        .box {background-color: yellow; padding: 10px; height: 500px;}
        .box .items2 {background-color: green; width: 50px; margin: 10px; height: 50px;}

        .container2 {
            display: flex; 
            /* 교차축 정렬 */
            /* item의 높이가 고정이면 안됩니다. */
            /* align-items: stretch; */ /* 잡아 당기기 */
            /* align-items: flex-start; */ /* 수직 위 */
            /* align-items: flex-end; */ /* 수직 아래 */
            /* align-items: center; */ /* 수직 중앙 */
            /* align-items: baseline; */ /* 아이템의 문자들 기준으로 수직 정렬 */
            } 

    </style>

    <div class="container2 box">
        <div class="items2" style="line-height: 50px;">hello</div>
        <div class="items2" style="line-height: 70px;">hello</div>
        <div class="items2">hello</div>
        <div class="items2">hello</div>
    </div>

    <hr>
    <h3>align-content(교차축 정렬-두 줄 이상</h3>

    <style>
        .box {background-color: yellow; padding: 10px; height: 500px; width: 300px;}
        .box .items3 {background-color: green; width: 50px; margin: 10px;  height: 50px;}

        .container3 {
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
           /* 교차축 정렬 - 두줄 이상*/
           /* item 높이가 없어야 함*/
           /* align-content: stretch; */
           /* align-content: flex-start; */
           /* align-content: flex-end; */
           /* align-content: center; */
           /* align-content: space-around; */
           align-content: space-between;

        } 

    </style>

    <div class="container3 box">
        <div class="items3">1</div>
        <div class="items3">2</div>
        <div class="items3">3</div>
        <div class="items3">4</div>
        <div class="items3">5</div>
        <div class="items3">6</div>
        <div class="items3">7</div>
        <div class="items3">8</div>
        <div class="items3">9</div>
        <div class="items3">10</div>
    </div>


</body>

</html>

 

7) 자식 박스에 적용하는 속성

- flex-basis: flex item의 기본 너비 설정

- order: flex item의 순서를 설정

- flex: flex-grow, flex-shrink, flex-basis의 단축 속성

* flex

- Item의 너비(grow, shrink, basis)를 한번에 쓰는 속성입니다

 

* flex-grow

- Item의 증가 너비 비율을 설정합니다. 숫자가 크면 더 많은 너비를 가집니다.

- item이 3개일때 1, 2, 1 이라면 첫 번째 Item은 총 너비의 25%(1/4)을, 두 번째 Item은 총 너비의 50%(2/4)를, 세 번째 Item은 총 너비의 25%(1/4)을 가집니다

 

* flex-shrink

- Item이 감소하는 너비의 비율을 설정합니다. 숫자가 크면 더 많은 너비가 감소합니다.

 

* flex-basis

- Item의 (공간 배분 전) 기본 너비를 설정합니다. 기본값 auto인 경우 width, height 등의 속성으로 item 너비를 설정할 수 있습니다.

 

8) order

- Item의 순서를 설정합니다. Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.

 

* 예제 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
    <style>
        .box {
            background-color: yellow;
            padding: 10px;
            height: 500px;
        }
        .box .items {
            background-color: green;
            width: 50px;
            height: 50px;
            margin: 10px;
        }
        .container {
            display: flex;
        }

        /*grow, shrink 컨테이너 사이즈가 변할 때, 아이템이 증가되거나, 감소되는 비율(속도)*/
        /* basis 아이템 너비에 대한 비율 (기본값은 auto이며, 없으면 width 따라갑니다.) */
        .item1 {
            /* flex-grow: 2; 
            flex-shrink: 2; */
            /* flex-basis: 33.3333%; */
            flex: 2 2 33.3333%;
            order: 10;
        }
        .item2 {
            /* flex-grow: 1; 
            flex-shrink: 1; */
            /* flex-basis: 33.3333%; */
            flex: 1 1 33.3333%;
            order: 1;
        }
        .item3 {
            /* flex-grow: 0; 
            flex-shrink: 0; */
            /* flex-basis: 33.3333%; */
            flex: 0 0 33.3333%;
            order: 5;
            align-self: center; /* 아이템 하나만 교차축 정렬 */
        }

    </style>


</head>
<body>
    
    <h3>item에 적용하는 속성들</h3>
    <div class="container box">
        <div class="items item1">1</div>
        <div class="items item2">2</div>
        <div class="items item3">3</div>
    </div>

</body>
</html>

 

 

 

'TIL > HTML&CSS' 카테고리의 다른 글

day53-css  (0) 2022.12.26
day52-css  (1) 2022.12.23
day51-css  (0) 2022.12.22
day50-css  (0) 2022.12.21
day49-css  (0) 2022.12.20
profile

mjeongriver

@mjeongriver

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

티스토리툴바