본문 바로가기
CSS

CSS-D06

by EUN-JI 2023. 10. 31.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>parent element size</title>

        <style>
            *{border: 1px dotted red;}

            p{padding: 20px; margin: 4px;}
            a{padding: 10px; margin: 10px;}
            em{padding: 10px;}
            strong{margin: 20px;}

            img{padding: 10px;}
            input{margin: 20px;}
        </style>

    </head>


    <body>
        <!-- 부모요소 box의 height이 언제나 자식의 box높이를 감싸지 않을 수도 있음 -->

        <!-- 블록요소 안에 블록요소.. 일 때 [자식요소의 box(마진,패딩 포함된)의 높이를 감싼 사이즈]-->
        <div style="border: 1px dotted blue;">
            <p>hello</p>
        </div>
        <hr>
        <!-- 블럭요소 안에 인라인요소를 배치했을떄 why??
            블럭요소 입장에서는 자식인라인요소가 content로 느껴짐.. 그래서 단순히 overflow 상황으로 느껴짐-->
        <div style="border: 1px dotted green; overflow: visible;">
            <a href="">nice</a>
            <em>good</em>
            <strong>html</strong>
        </div>
        <hr>
        <!-- 블럭요소 안에 인라인블럭요소를 배치할때는 자식의 box높이를 모두 감쌈 -->
        <div style="border: 1px dotted black;">
            <img src="../Day01/쿠로미.jpeg" alt="쿠로미" height="20">
            <input type="text">
        </div>

    </body>
</html>

parent-size

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>sub menu</title>
        <style>
            *{margin: 0; padding: 0;}

            ul{list-style: none;}

            nav{
                height: 50px;
                background-color: yellow;
            }

            #menu>li{
                /* nav_item */
                display: inline-block;
                margin: 10px;
                border: 2px solid blue;
                padding: 5px 10px;
            }

            ul.submenu{
                position: absolute;
                border: 1px dotted red;
                display: none;
            }

            ul.submenu>li{
                border: 1px dotted green;
            }

            #menu>li:hover{
                background-color: greenyellow;
            }
            /* 호버링 됐을 때  */
            #menu>li:hover .submenu{
                display: block;
            }

        </style>
    </head>
    <body>
        <nav>
            <ul id="menu">
                <li class="nav_item">
                    aaa
                    <ul class="submenu">
                        <li><a href="">111</a></li>
                        <li>222</li>
                        <li>333</li>
                    </ul>
                </li>
                <li class="nav_item">
                    bbb
                    <ul class="submenu">
                        <li>111</li>
                        <li>222</li>
                        <li>333</li>
                    </ul>
                </li>
                <li class="nav_item">
                    ccc
                    <ul class="submenu">
                        <li>111</li>
                        <li>222</li>
                        <li>333</li>
                    </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>

nav_submenu

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flex CSS style</title>

        <style>

            body{border: 1px dotted red;}

            /* 자식요소들의 사이즈 볼 수 있또록 */
            #container>div{
                background-color: yellow;
                padding: 20px;
                margin: 10px;
                width: 100px;
            }

            /* 가장 먼저 부모요소에 flex 스타일 적용 */
            #container{
                display: flex;  /*자식요소들이 옆으로 배치. 마치, [인라인블럭요소]가 된 것 처럼*/
                /* 여러가지 배치에 관련한 flex속성들 */
                /* 1) 자식요소가 많아져서 부모의 사이즈를 벗어날때 설정 */
                flex-wrap: wrap;
                flex-wrap: wrap-reverse;
                flex-wrap: nowrap;  /*default*/

                /* 2) 배치방향을 수직방향으로 변경 */
                flex-direction: column;  /*수직*/
                flex-direction: column-reverse; /*밑에서 위로*/
                height: 300px;

                /* 수평배치 */
                flex-direction: row;  /*default*/
                flex-direction: row-reverse;  /*오른쪽에서 왼쪽으로*/

                /* 3) flow : direction, wrap의 축약 속성  ::순서상관없음. */
                flex-flow: column wrap;
                flex-flow: nowrap row;  /*default*/

                /* 자식요소의 위치 정렬관련 속성 2개 */
                /* 1. justify-content : 배치방향(direction)과 같은 방향의 정렬 */
                /* 1.1 수평배치일때 수평정렬 */
                flex-direction: row;
                justify-content: center;
                justify-content: flex-end;  /*오른쪽끝*/
                justify-content: flex-start;
                justify-content: space-between;   /*균등하게 배치  (많이 쓰임)*/
                justify-content: space-around;  /*요소둘러싸서 균등하게*/
                justify-content: space-evenly;  /*둘러싸서 균등하게 */

                /* 1.2 수직배치일때 수직정렬 */
                flex-direction: column;
                justify-content: flex-start;
                justify-content: center;
                justify-content: flex-end;
                justify-content: space-between;
                justify-content: space-around;
                justify-content: space-evenly;

                justify-content: flex-start;  /*default*/

                /* 2. align-items : 배치방향과 교차축의 정렬 */
                /* 2.1 수평배치일때 수직정렬 */
                flex-direction: row;
                align-items: flex-start;
                align-items: center;
                align-items: flex-end;
                align-items: stretch;  /*default*/

                /* 2.2 수직배치일때 수평정렬 */
                flex-direction: column;
                align-items: center;
                align-items: flex-end;
                align-items: stretch;  /*자식요소의 width속성이 있다면 그 너비가 우선시됨.*/
               
            }

        </style>
    </head>

    <body>
       
        <!-- flex style : 자식요소들의 배치[layout]를 부모요소의 설정으로 결정하는 방식
        [마치, 안드로이드의 LinearLayout 처럼]  -->

        <div id="container">
            <div>aa</div>
            <div>bb</div>
            <div>cc</div>

            <!-- <div>aa</div>
            <div>bb</div>
            <div>cc</div>
            <div>aa</div>
            <div>bb</div>
            <div>cc</div>
            <div>aa</div>
            <div>bb</div>
            <div>cc</div>
            <div>aa</div>
            <div>bb</div>
            <div>cc</div>
            <div>aa</div>
            <div>bb</div>
            <div>cc</div>
            <div>aa</div>
            <div>bb</div>
            <div>cc</div> -->
        </div>

        <hr>
        <!-- 자식요소에 사용하는 flex 스타일속성 -->
        <div id="container2">
            <div id="c1">aaa</div>
            <div id="c2">bbb</div>
            <div id="c3">ccc</div>
        </div>

        <style>
            /* 우선 부모요소가 flex style */
            #container2{display: flex;}

            #container2>div{
                background-color: aqua;
                padding: 20px;
                margin: 10px;
            }

            /* 자식요소들에 설정하는 flex스타일 속성들 알아보기 */
            /* 1)order : 배치의 순서를 변경 - 낮은 숫자가 먼저 배치됨 */
            #c1{order: 3;}
            #c2{order: 1;}
            #c3{order: 2;}

            /* 2) -grow  : 너비를 상대적인 값의 비례로 결정 [android의 weight과 같은 기능] */
            #c1{
                order: 1;
                flex-grow: 1;
            }
            #c2{
                order: 2;
                flex-grow: 1;
            }
            #c3{
                order: 3;
                flex-grow: 6;
            }

            /* 3) -shrink : 나머지 요소들과 비교하여 얼마나 줄어들지 결정. : 04번파일실습*/

            /* 4) -basis : 요소의 초기 길이를 지정함  -width와 약간다름.
            화면이 작아지면 우선적으로 먼저 축소됨 */
            #c1{
                flex-grow: 0;
            }
            #c2{
                flex-grow: 0;
                flex-basis: 200px;
            }
            #c3{
                flex-grow: 0;
                flex-basis: 400px;
            }
            /* 5) flex : 축약속성 [-grow -shrink -basis] */
            #c1{flex: 0 0 0;}
            #c2{flex: 1 0 0;}
            #c3{flex: 1 0 0px;}

            #c1{flex: 1;}  /*-grow 만 써도 됨*/
            #c3{flex: 3;}

            /* 6) 자식요소 스스로의 위치를 정렬 */
            #container2{
                flex-direction: row;
                height: 300px;

                align-items: flex-start;
            }

            #c2{align-self: center;}
            #c3{align-self: flex-end;}

            /* #c2{justify-self: flex-end;} 도 같은 방식 */
        </style>

    </body>
</html>

flexstyle

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flex</title>

        <style>
            .container{
                display: flex;
            }

            .container>div{
                background-color: yellow;
                width: 100px;
                margin: 10px;
                text-align: center;
                line-height: 50px;
            }
        </style>
    </head>
    <body>
        <h1>flex-shrink style property</h1>

        <div class="container">
            <div>1</div>
            <div>2</div>
            <div style="flex-shrink: 0;">3</div>
            <div>4</div>
            <div>5</div>
            <div style="flex-shrink: 1;">6</div>
            <div>7</div>
            <div>8</div>
            <div style="flex-shrink: 2;">9</div>
            <div>10</div>
        </div>
    </body>
</html>

flexstyle-shrink

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flex style layout tamplet</title>

        <style>
            body{
                font-family: 'Times New Roman', Times, serif;
                margin: 0;
            }

            header{
                height: 200px;
                background-color: blue;
                color: white;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            nav{
                display: flex;
                background-color: black;
            }
            nav a{
                color: white;
                text-decoration: none;
                padding: 14px 20px;
                text-align: center;
            }

            nav a:hover{
                background-color: white;
                color: black;
            }

            .container{
                display: flex;
                flex-wrap: wrap;
            }

            .container aside{
                flex: 3;
                background-color: #f1f1f1;
                padding: 20px;
            }
            .container .main{
                flex: 7;
                background-color: white;
                padding: 20px;
            }
            .fakeimag{
                background-color: #aaaaaa;
                width: 100%;
                padding: 20px;
            }

            footer{
                padding: 20px;
                text-align: center;
                background-color: #dddddd;
            }

            /* 반응형 웹 rwd */

            @media all and (max-width: 700px){
                .container, nav{
                    flex-direction: column;
                }
            }
        </style>
    </head>

    <body>
        <!-- header -->
        <header>
            <h1>my web site</h1>
            <p>with a <strong>flaxiible</strong>layout</p>
        </header>

        <!-- navigation bar -->
        <nav>
            <a href="#">link</a>
            <a href="#">link</a>
            <a href="#">link</a>
            <a href="#">link</a>
        </nav>

        <div class="container">
            <!-- 왼쪽 사이드 -->
            <aside>
                <h2>about me</h2>
                <h5>photo of me</h5>
                <div class="fakeimag" style="height: 200px;">image</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus modi id minus dolore qui numquam culpa maiores commodi consequuntur inventore repudiandae laboriosam nulla vel tempora optio eius, quaerat accusamus neque.</p>
               
                <h3>more text</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, atque voluptatum velit tempore dignissimos quia mollitia corrupti consectetur repellat! Soluta optio doloribus incidunt esse quas consectetur illum accusamus nisi libero!</p>
                <div class="fakeimag" style="height: 50px; margin: 4px;">image</div>
                <div class="fakeimag" style="height: 50px; margin: 4px;">image</div>
                <div class="fakeimag" style="height: 50px; margin: 4px;">image</div>
            </aside>

            <!-- 본문 영역 -->
            <article class="main">

                <h2>title heading</h2>
                <h5>title desciption  2023-10-31</h5>
                <div class="fakeimag" style="height: 200px;" >image</div>
                <p>some text...</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam deleniti ratione culpa velit, eos quasi sunt tempora unde, doloremque aperiam accusamus eius ullam ipsam! Commodi vitae mollitia expedita officia laudantium.</p>
             
                <br>

                <h2>title heading</h2>
                <h5>title desciption  2023-10-31</h5>
                <div class="fakeimag" style="height: 200px;">image</div>
                <p>some text...</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam deleniti ratione culpa velit, eos quasi sunt tempora unde, doloremque aperiam accusamus eius ullam ipsam! Commodi vitae mollitia expedita officia laudantium.</p>
               
            </article>
        </div>

        <!-- footer -->
        <footer>
            <h2>footer</h2>
        </footer>
    </body>
</html>

반응형1
반응형2
웹1
flex_layout//웹2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>grid style</title>

        <style>
            #container{
                display: grid;

                /* 격자모양을 결정 - 한줄에 3칸씩 배치해보기 */
                grid-template-columns: 100px 100px 100px;
                grid-template-columns: auto auto auto;  /*화면 너비의 3분할*/

                /* 줄 높이도 지정가능 */
                grid-template-rows: 100px 150px;

                column-gap: 1em; /*바로 부모의 글씨사이즈를 기준으로 한 배율 : em*/
                row-gap: 0.5rem;  /*무조건 최상위 부모의 글씨사이즈 기준 한 배율 : rem (권장)*/
               
                gap: .5rem 1rem; /*축약: row, column*/
            }

            #container div{
                background-color: aqua;
                margin: 4px;
                text-align: center;
                padding: 8px;
            }

            /* 자식요소(셀) 관련 속성 */

            #item1{
                /* 셀병합 */
                grid-column-start: 1;
                grid-column-end: 3;
                /* 1부터 3전까지 :  1~2*/
            }

            #item3{
                grid-column-start: 2;
                grid-column-end: 4;
                /* 2~3 */
            }

            #item5{
                grid-column: 3 / span 2;
                /* 3~4 */
            }
            #item6{
                grid-row-start: 3;
                grid-row-end: 5;
                /* 3~4번 줄 */
            }
        </style>
    </head>

    <body>
       
        <!-- 격자 배치구조..[웹사이트의 기본 레이아웃같은 .. 모양]에 특화된 스타일 -->
        <div id="container">
            <div id="item1">1</div>
            <div id="item2">2</div>
            <div id="item3">3</div>
            <div id="item4">4</div>
            <div id="item5">5</div>
            <div id="item6">6</div>
            <div id="item7">7</div>
        </div>
    </body>
</html>

grid

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>grid style layout tamplet</title>
        <style>
            #container{
                display: grid;    

                grid-template-columns: auto auto auto auto auto;
                grid-template-rows: auto 300px auto;
            }

            #container> div{
                background-color: aquamarine;
                text-align: center;
                padding: 20px 0;
                font-size: 30px;
                border: 1px solid black;
            }

            #item1{ grid-column-start: 1; grid-column-end: 6;}
            #item2{ grid-column: 1; grid-column-end: 2;}
            #item3{ grid-column: 2; grid-column-end: 5;}
            #item4{ grid-column: 5; grid-column-end: 6;}
            #item5{ grid-column: 1 / span 5;}

        </style>
    </head>

    <body>
       
        <div id="container">
            <div id="item1">header</div>
            <div id="item2">menu</div>
            <div id="item3">main content</div>
            <div id="item4">right</div>
            <div id="item5">footer</div>
        </div>
    </body>
</html>

grid_layout

저작자표시

'CSS' 카테고리의 다른 글

Web App: 반응형웹03  (0) 2023.10.30
Web App: 반응형웹02  (1) 2023.10.30
Web App: 반응형웹01  (0) 2023.10.30
웹사이트 만들어보기  (0) 2023.10.30
CSS-D5  (0) 2023.10.30

관련글

티스토리툴바