UIUX _국비과정 0422

백만두 2024. 5. 30. 19:31

2024. 5. 30. 19:31

해남고구마협회 사이트 만들기

내가 하다만 구현 화면 :

아니 저렇게 잘 나오다가 왜!!!! 갑자기 저게 밑으로 내려가는지 ㅠ 환장

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>해남고구마 생산자 협회</title>
        <link href="ha_swap.css" rel="stylesheet" type="text/css">

    </head>

    <body >
        <div class="topyellow">
            <header>
                <div class="toplogo"><img src="images/ha_logo.jpg" width="131" height="97" alt=""/></div>
                <nav class="topmini">
                    <ul>
                        <li><img src="images/ha_mini01.jpg" width="52" height="19" alt=""/></li>
                        <li><img src="images/ha_mini02.jpg" width="62" height="19" alt=""/></li>
                        <li><img src="images/ha_mini03.jpg" width="72" height="19" alt=""/></li>
                        <li><img src="images/ha_mini04.jpg" width="60" height="19" alt=""/></li>
                        <li><img src="images/ha_mini05.jpg" width="72" height="19" alt=""/></li>
                    </ul>
                </nav>
                <div class="search">
                    <input type="text" name="textfield" id="textfield">
                    <img src="images/ha_search.jpg" width="62" height="35" alt=""/></div>
                <div class="topsns"><img src="images/ha_sns01.jpg" width="125" height="40" alt=""/></div>
            </header>
        </div>
        <div class="topmenubg">
            <nav id="mainmenu">
                <a
                    href="#"
                    onmouseout="MM_swapImgRestore()"
                    onmouseover="MM_swapImage('Image9','','images/ha_menu01_r.jpg',1)"><img src="images/ha_menu01.jpg" alt="고구마" width="145" height="51" id="Image9"></a>
                <a
                    href="#"
                    onmouseout="MM_swapImgRestore()"
                    onmouseover="MM_swapImage('Image10','','images/ha_menu02_r.jpg',1)"><img
                    src="images/ha_menu02.jpg"
                    alt="고구마가공식품"
                    width="188"
                    height="51"
                    id="Image10"></a>
                <a
                    href="#"
                    onmouseout="MM_swapImgRestore()"
                    onmouseover="MM_swapImage('Image11','','images/ha_menu03_r.jpg',1)"><img
                    src="images/ha_menu03.jpg"
                    alt="고구마종순"
                    width="166"
                    height="51"
                    id="Image11"></a>
                <a
                    href="#"
                    onmouseout="MM_swapImgRestore()"
                    onmouseover="MM_swapImage('Image12','','images/ha_menu04_r.jpg',1)"><img src="images/ha_menu04.jpg" alt="농자재" width="161" height="51" id="Image12"></a>
                <a
                    href="#"
                    onmouseout="MM_swapImgRestore()"
                    onmouseover="MM_swapImage('Image13','','images/ha_menu05_r.jpg',1)"><img src="images/ha_menu05.jpg" alt="구매후기" width="169" height="51" id="Image13"></a>
                <a
                    href="#"
                    onmouseout="MM_swapImgRestore()"
                    onmouseover="MM_swapImage('Image14','','images/ha_menu06_r.jpg',1)"><img src="images/ha_menu06.jpg" alt="이벤트" width="171" height="51" id="Image14"></a>
            </nav>
        </div>
        <div class="mainimgbg">
            <div class="mainimg">
                <div class="change"><img src="images/ha_mainimg01.jpg" alt="" width="755" height="360"/></div>
                <ul>
                    <li>
                        <p>달콤보들 풍미가득</p>
                        <h3>호박고구마
                        </h3>
                    </li>
                    <li>
                        <p>감미료 무첨가 간식</p>
                        <h3>해남반시고구마
                        </h3>
                    </li>
                    <li>
                        <p>아침 거르지 마세요</p>
                        <h3 >아이스군고구마</h3>
                    </li>
                </ul>
            </div>
        </div>
        <article class="container">
            <section class="mainban"><img src="images/ha_title01.jpg" width="357" height="57" alt=""/>
                <div class="banframe"><img src="images/ha_banner01.jpg" width="316" height="155" alt=""/><img src="images/ha_banner02.jpg" width="316" height="155" alt=""/><img src="images/ha_banner03.jpg" width="316" height="155" alt=""/></div>
            </section>
            <section class="item"><img src="images/ha_title02.jpg" width="357" height="56" alt=""/>
                <div class="itemarea">
                    <div class="itemlist"><img src="images/ha_item01.jpg" width="317" height="318" alt=""/>
                        <div class="textaea">꿀맛나는 고구마 입안에 퍼지는 달콤함
                            <br>
                            <span class="textpoint1">대월농장 해남고구마 3kg</span><br>
                            <span class="textpoint2">18,000 원</span>
                            <span class="textpoint3 textpoint1">9,900 원</span></div>
                    </div>
                    <div class="itemlist"><img src="images/ha_item02.jpg" width="318" height="318" alt=""/>
                        <div class="textaea">아침거르지마세요 1분이면 건강식 군고구마가~<br>
                            <span class="textpoint1">해남 아이스군로구마 2kg</span><br>
                            <span class="textpoint2">26,000 원</span>
                            <span class="textpoint3 textpoint1">19,900 원</span></div>
                    </div>
                    <div class="itemlist"><img src="images/ha_item03.jpg" width="317" height="318" alt=""/>
                        <div class="textaea">꿀맛나는 고구마 입안에 퍼지는 달콤함
                            <br>
                            <span class="textpoint1">해남 반시 고구마 60g, 10개</span><br>
                            <span class="textpoint2">29,000 원</span>
                            <span class="textpoint3 textpoint1">19,500 원</span></div>
                    </div>
                </div>
            </section>
            <section class="callcenter">
                <div class="notice">
                    <img src="images/ha_notice.jpg" width="277" height="27" alt=""/>
                    <ul>
                        <li>해남 홈페이지가 새롭게 리뉴얼했습니다.</li>
                        <li>무이자 이벤트 안내</li>
                        <li>신규가입고객20% 추가 할인 이벤트</li>
                        <li>[공지]배송지연 안내</li>
                    </ul>
                </div>
                <div class="callnum"><img src="images/ha_call.jpg" width="340" height="147" alt=""/></div>
                <div class="quick"><img src="images/ha_icon.jpg" width="255" height="147" alt=""/></div>
            </section>
        </article>
        <footer>
            <div class="footerbg">
                <div class="footermenu">회사소개 | 이용약관 | 개인정보취급방침 | 이용안내 | FAQ</div>
            </div>
            <div class="address"><img src="images/ha_address.jpg" width="527" height="78" alt=""/></div>
        </footer>
    </body>
</html>

body {
    margin: 0;
    /* 마진값 초기화 */
    padding: 0;
    /* 패딩값 초기화 */
    font-family: "굴림", "굴림체", "돋움", "돋움체";
    font-size: 9pt;
    line-height: 170%;
}

img {
    border-width: 0;
}

.topyellow {
    width: 100%;
    height: 125px;
    background-color: #FFD747;
    /* rgb(257, 216, 73); */
}

.topyellow header {
    width: 1000px;
    padding-top: 12px;
    margin-left: auto;
    /* 가운데 정렬 */
    margin-right: auto;
    /* 가운데 정렬 */
    height: 112px;
    /* 자식에 float이 있으면 부모에 height 값 주기 */
    background-color: #FFD747;
}

.topyellow header .toplogo {
    width: 131px;
    height: 97px;
    float: left;
}

.topyellow header .topmini {
    float: right;
}

.topyellow header .search {
    float: left;
    margin-top: 30px;
    margin-left: 158px;
    width: 420px;
}

.topyellow header .topsns {
    width: 125px;
    height: 40px;
    float: right;
    clear: right;
    margin-top: 28px;
}

header .search img {
    float: right;
}

header .search #textfield {
    float: left;
    width: 350px;
    height: 31px;
    border: 1px solid #FFD747;
}

.topyellow header .topmini ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}


.topyellow header .topmini ul li {
    display: inline;
    /* float도 가능 */
}

.topyellow header .topmini ul li img {
    float: left;
}

.topmenubg {
    height: 51px;
    width: 100%;
    background-color: #4C0A00;
    clear: both;
}

.topmenubg #mainmenu {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    height: 51px;
    color: #ffff;
}

.topmenubg #mainmenu a {
    float: left;
}

.mainimgbg {
    width: 100%;
    height: 380px;
    border: 1px solid #cccc;
    background-color: #fbfafa;
    clear: both;
}

.mainimgbg .mainimg {
    width: 1000px;
    height: 360px;
    margin: 0 auto;
}

.mainimgbg .mainimg .change {
    width: 755px;
    height: 360px;
    float: left;
}

.mainimg ul {
    list-style-type: none;
    padding : 30px 0 0 0;
    margin:0;
    float:left;
}

.mainimg ul li{
    width: 234px;
    height: 65px;
    border: 1px solid #cccc;
    text-align: center;
    padding: 18px;
    margin-top: 10px;
}

.mainimg ul li p{
    margin: 0px;
}

.mainimg ul li h3{
    margin: 0;
    padding: 0;
}

.container {
    width: 1000px;
    margin: 0 auto;
    padding-top: 15px;
    clear: both;
}

.container .mainban .banframe {
    width: 986px;
    height: 160px;
    border: 1px solid #cccc;
    background-color: #fbfafa;
    clear: both;
    float: left;
    padding-top: 6px;
    padding-left: 13px;
}

.container .mainban img {
    margin-right: 11px;
}

.container .item {
    padding-top: 14px;
    clear: both;
}

.container .item .itemlist {
    width: 317px;
    height: 410px;
    padding-left: 8px;
    padding-right: 8px;
    float: left;
}

.container .item .itemlist .textaea {
    background-color: #fbfafa;
    height: 82px;
    padding-top: 10px;
    text-align: center;
}

.container .callcenter {
    clear: both;
    float: left;
    border: 1px solid #ddd;
    height: 174px;
    width: 100%;
    padding-bottom: 20px;
    margin-top: 20px;
}

.container .item .itemarea {
    clear: both;
}

.container .callcenter .notice {
    width: 300px;
    border-right: 1px solid #ddd;
    padding-top: 27px;
    clear: both;
    float: left;
}

.notice ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 277px;
}

.notice ul li {
    padding-top: 5px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 3px;
}

.container .callcenter .callnum {
    width: 372px;
    border-right: 1px solid #ddd;
    float: left;
    padding-top: 27px;
    padding-left: 28px;
}

.container .callcenter .quick {
    float: left;
    padding-top: 27px;
    padding-left: 20px;
}

body footer {
    clear: both;
}

.footerbg {
    background-color: #e8e8e8cc;
    border-top: 1px solid #cccc;
    border-bottom: 1px solid #cccc;
}

.footerbg .footermenu {
    width: 1000px;
    height: 25px;
    margin: 0 auto;
    /* 글자를 민 것이 아니라 박스를 민 것 */
    padding-top: 7px;
}

body footer .address {
    width: 1000px;
    height: 20px;
    margin: 0 auto;
    /* 글자를 민 것이 아니라 박스를 민 것 */
    margin-top: 20px;
    margin-bottom: 20px;
}

margin: 0 auto; /* 글자를 민 것이 아니라 박스를 민 것 */ 에 대한 이해가 확실하게 된 것 같다!

근데 저 코드에선 고구마랑 메뉴가 나란히 나오지 않는다..

강사님꺼랑 똑같은데 뭐가 문제일까!!!!!

다시 비교해봐야겠다.

제대로 된 구현 화면 :

강사님 코드 :

body {
    padding: 0px;
    margin: 0px;
    font-size: 9pt;
    line-height: 170%;
    font-family: "굴림", "굴림체", "돋움", "돋움체";
 }
 img {
    border-width: 0px;
 }
 
 .topyellow {
     width: 100%;
     height: 125px;
     background-color: #ffd747;
 }
 
 .topyellow header {
     width: 1000px;
     margin-left: auto;
     margin-right: auto;
     /* padding-top: 12px; */
     height: 112px;
     background-color: #ffd747;
 }
 
 .topyellow header .toplogo {
     width: 131px;
     height: 97px;
     float: left;
 }
 
 .topyellow header .topmini {
     float:right;
 }
 
 .topyellow header .search {
     float: left;
     margin-top: 30px;
     margin-left: 158px;
     width: 420px;
 }
 
 .topyellow header .topsns {
     width: 125px;
     height: 40px;
     float: right;
     clear: right;
     margin-top: 28px;
 }
 
 header .search img {
     float:right;
 }
 
 header .search #textfield {
     float: left;
     width: 350px;
     height: 31px;
     border: 1px solid #f0ca3f;
 }
 
 .topyellow header .topmini ul {
     padding: 0;
     margin: 0;
     list-style-type: none;
 }
 
 .topyellow header .topmini ul li{
     display: inline;
 }
 
 .topyellow header .topmini ul li img{
     float:left;
 }
 
 .topmenubg {
     height: 51px;
     width:100%;
     background-color: #4c0a00;
     clear: both;
 }
 
 .topmenubg #mainmenu {
     width: 1000px;
     margin: 0 auto;
     height: 51px;
     color: #FFFFFF;
 }

 .topmenubg #mainmenu a {
    float: left;
}
 
 .mainimgbg {
     width: 100%;
     height: 360px;
     border: 1px solid #cccccc;
     background-color: #fbfafa;
     clear: both;
 }
 
 .mainimgbg .mainimg {
     width: 1000px;
     height: 360px;
     margin: 0 auto;
 }
 
 .mainimgbg .mainimg .change {
     width: 755px;
     height: 360px;
     float: left;
 }
 
 .container{
     width: 1000px;
     margin: 0 auto;
     padding-top: 15px;
     clear: both;
 }
 
 .container .mainban .banframe {
     width: 986px;
     height: 160px;
     border: 1px  solid #cccccc;
     background-color: #fbfafa;
     clear: both;
     float: left;
     padding-top: 12px;
     padding-left: 12px;
 }
 
 .container .mainban img{
     margin-right: 11px;
 }
 
 .container .item{
     padding-top: 14px;
     clear: both;
 }
 
 .container .item .itemlist{
     width: 317px;
     height: 410px;
     padding-left: 8px;
     padding-right: 8px;
     float: left;
 }
 
 .container .item .itemlist .textaea{
     background-color: #fbfafa;
     height: 82px;
     padding-top: 10px;
     text-align: center;
 }
 
 /* .item .itemlist img {
    display: block;
 } */
 
 .container .callcenter {
     clear: both;
     float: left;
 }
 
 .container .item .itemarea {
    clear: both;
 }
 
 .container .callcenter {
     border: 1px solid #ddd;
     height: 174px;
     width: 100%;
     padding-bottom: 20px;
     margin-top: 20px;
     /* float: left; */
 }
 
 .container .callcenter .notice {
     width: 300px;
     border-right: 1px solid #ddd;
     padding-top: 27px;
     clear: both;
     float:left;
 }
 
 .notice ul {
     padding: 0;
     margin: 0;
     list-style-type: none;
     width: 277px;
 }
 
 .notice ul li {
     padding-top: 5px;
     border-bottom: 1px dashed #ddd;
     padding-bottom: 3px;
 }
 
 .container .callcenter .callnum {
     width:372px;
     border-right: 1px solid #ddd;
     float: left;
     padding-top: 27px;
     padding-left: 28px;
 }
 
 .container .callcenter .quick {
     float: left;
     padding-top: 27px;
     padding-left: 20px;
 
 }
 
 
 
 body footer{
     clear: both;
 }
 
 .footerbg{
     background-color: #f4f3f3;
     border-top: 1px solid #cccccc;
     border-bottom: 1px solid #cccccc;
 
 }
 
 .footerbg .footermenu {
     width: 1000px;
     height: 25px;
     margin:0 auto;
     padding-top: 10px;
 }
 
 .address {
     width: 1000px;
     height: 20px;
     margin:0 auto;
     margin-top: 20px;
     margin-bottom: 20px;
 
 }
 
 .mainimg ul {
     list-style-type: none;
     padding : 30px 0 0 0;
     margin:0;
     float:left;
 }
 
 .mainimg ul li{
     width: 234px;
     height: 65px;
     border: 1px solid #C4C4C4;
     text-align: center;
     padding-top: 18px;
     margin-top : 10px;
 }
 
 .mainimg ul li p{
     margin:0px;
 }
 
 .mainimg ul li h3{
     margin:0px;
     padding:0px;
 }

전에 내가 하다만 코드:

.topmini > ul{
    position: absolute;
    z-index: 50;
    list-style-type: none;
}

.topmini > ul > li{
    float: left;
    padding: 0;
    position: relative;
    top: -105px;
    left: 200%;
}

.toplogo {
    position: relative;
    padding: 10px;
}

.search > input {
    position: relative;
    height: 35px;
    width: 350px;
    float: left;
    border: 0;
}

.search > img {
    position: relative;
    margin-left: 3px;
}

.topsns {
    position: absolute;
    bottom: 15px;
    z-index: 30;
    right: 15%;
}

.search {
    position: absolute;
    float: left;
    margin-right: 200px;
    bottom: 20px;
    left: 30%;
}

.topmenubg {
    margin: 0 auto;
    width: 100%;
    height: 52px;
    background-color: #4C0A00;
}

.mainimgbg {
    position: relative;
    width: 100%;
    height: 360px;
    position: relative;
}

.mainimg > li {
    position: absolute;
    float: left;
}

내가 했던 코드, 헤드 부분,, position을 이용하려니 헤더만 작성해도 하루가 거의 다 갔다..

그래도 오늘의 작은 성취 하나.. : 밑에 footer 부분은 어찌저찌 직접 구현함.

반응형 웹

: 화면의 크기나 해상도에 따라 반응이 달라진다.

: 디바이스의 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹을 말한다. (나무위키)

예시)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            font-size: 5vw;  /* 현재를 기분으로 화면을 픽셀로 쪼개는 것이기 때문에 화면 크기에 따라 글씨크기가 달라짐! */
            text-align: center;
        }
    </style>

</head>
<body>
    <h1>안녕하세요?</h1>
</body>
</html>

다양한 화면 해상도를 체험하는 법 :

콘솔창에서 확인할 수 있음!

현재의 해상도에 반응하는 코드 :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>

            /* 현재 해상도에 반응하는 코드 */
            body {
                background: url("images/bg1.jpg") no-repeat fixed;
                background-size: cover;
            }

            /* @media screen and */
            /* screen 컴퓨터나 스마트폰, and 뒤에는 해상도 */
            @media screen and (max-width:1024px) {
                body {
                    background: url("images/bg2.jpg") no-repeat fixed;
                    background-size: cover;
                }
            }

            @media screen and (max-width:768px) {
                body {
                    background: url("images/bg3.jpg") no-repeat fixed;
                    background-size: cover;
                }
            }

            @media screen and (max-width:320px) {
                body {
                    background: url("images/bg4.jpg") no-repeat fixed;
                    background-size: cover;
                }
            }
        </style>
    </head>
    <body></body>
</html>

실행 :

해상도에 따라 이미지들이 다르게 나온다.

그리드 레이아웃 - 플렉스

참고)

[HTML/CSS] 그리드 레이아웃(플렉서블 박스 레이아웃)

플렉서블 박스 레이아웃 배치

velog.io

쓰는 방법 :

우선, 플렉스를 쓰겠다는 선언을 해야 함.

부모에

display : flex

라고 선언한 뒤 다음 필요한 flex 사용하기

flex-direction : row(주축), column(교차축)
flex-wrap : wrap(감싼다), nowrap(안감싼다)
flex-flow : row wrap
justify-content : 주축에 대한 정렬
(재정의)
align-item : 교차측에 때한 정렬
align-self : 특정요소에 대한 처리
align-content : 여러 줄의 교차축 정렬

코드와 화면 구현

flex-direction : row(주축), column(교차축)

<style>
            .container {
                width: 700px;
                display: flex;
                background-color: khaki;
                border: 1px solid #5c4d3d;
                margin-bottom: 30px;
            }

            .box{
                padding: 5px 45px;
                margin: 5px;
                width: 80px;
                background-color: tomato;
            }

            #opt1 {
                flex-direction: row;
            }

            #opt2 {
                flex-direction: row-reverse;
            }

            #opt3 {
                flex-direction: column;
            }

            #opt4 {
                flex-direction: column-reverse;
            }

            p {
                color: white;
            }


        </style>

flex-wrap : wrap(감싼다), nowrap(안감싼다)

        <style>
            .container {
                display: flex;
                background-color: khaki;
                border: 1px solid #5c4d3d;
                margin-bottom: 30px;
            }

            .box {
                padding: 5px 45px;
                margin: 5px;
                width: 80px;
                background-color: tomato;
            }

            #opt1 {
                flex-wrap: nowrap;
            }

            #opt2 {
                flex-wrap: wrap;
            }

            #opt3 {
                flex-wrap: wrap-reverse;
            }

            p {
                color: white;
            }


        </style>

justify-content : 주축에 대한 정렬

<style>
            .container {
                display: flex;
                background-color: khaki;
                border: 1px solid #5c4d3d;
                margin-bottom: 30px;
            }

            .box {
                padding: 5px 45px;
                margin: 5px;
                width: 80px;
                background-color: tomato;
            }

            #opt1 {
                justify-content: flex-start; /* 주축의 정렬방식 */
            }

            #opt2 {
                justify-content: flex-end; /* 끝부터 정렬방식 */
            }

            #opt3 {
                justify-content: center; /* 가운데부터 퍼져나가는 정렬방식 */
            }

            #opt4 {
                justify-content: space-between; 
            }

            #opt5 {
                justify-content: space-around; 
            }

            p {
                color: white;
            }

        </style>

align-item : 교차측에 대한 정렬

<style>
        .container {
                width: 100%;
                height: 100px;
                display: flex;
                background-color: khaki;
                border: 1px solid #5c4d3d;
                margin-bottom: 30px;
            }

            .box {
                padding: 5px 45px;
                margin: 5px;
                width: 70px;
                background-color: tomato;
            }

            /* 교차축(세로)의 정렬 방식 */
            #opt1 {
                align-items: flex-start;
            }

            #opt2 {
                align-items: flex-end;
            }

            #opt3 {
                align-items: center;
            }

            #opt4 {
               align-items: baseline;  /* 글자를 기준으로 크기가 바뀜 */
            }

            #opt5 {
                align-items: stretch; /* 쭉 늘어남 */
            }

            p {
                color: white;
            }
    </style>

align-self : 특정요소에 대한 처리

<style>
            .container {
                width: 450px;
                height: 150px;
                display: flex;
                background-color: khaki;
                border: 1px solid #5c4d3d;
                margin-bottom: 20px;
                align-items: center;
            }

            .box {
                padding: 5px 45px;
                margin: 5px;
                width: 80px;
                background-color: tomato;
            }

            /* 하나씩 조정 -> 불규칙한 조절이 가능하다 */
            #box1 {
                align-self: flex-start;
            }

            #box3 {
                align-self: stretch;
            }

            p {
                color: white;
                text-align: center;
            }

        </style>

align-content : 여러 줄의 교차축 정렬 , flex-flow : row wrap

flex-flow : row wrap
= 부모요소 가로 세로크기 맞춰 section들이 순서대로 하나씩 정렬 된 것.

출처:

[CSS] flex 관련 속성 정리 flex-direction / flex-wrap / flex-flow

1. flex-direction - 요소들 나열 방향 지정 A B C D E F main { width: 200px; height: 200px; border: 1px solid lightgray; display: flex; flex-direction:row; } main div { width: 50px; height: 50px; } flex-direction 속성의 부모 요소에 display:f

chlolisher.tistory.com

<style>
            .container {
                float: left;
                width: 200px;
                height: 150px;
                display: flex;
                background-color: khaki;
                border: 1px solid #5c4d3d;
                flex-flow: row wrap;  <- 부모에 들어감
                margin: 30px;
            }

            .box {
                width: 80px;
                background-color: tomato;
                border: 1px solid #5c4d3d;
            }

            /* 여러 줄의 교차축 정렬방식 */
            #opt1 {
                align-content: flex-start;
            }

            #opt2 {
                align-content: flex-end;
            }

            #opt3 {
                align-content: center;
            }

            #opt4 {
               align-content: space-between;
            }

            #opt5 {
                align-content: space-around;
            }

            #opt6 {
                align-content: stretch;
            }

            p {
                color: white;
                text-align: center;
            }
            
        </style>

저작자표시 비영리 변경금지

'2024_UIUX 국비 TIL' 카테고리의 다른 글

UIUX _국비과정 0424 (1)	2024.06.03
UIUX _국비과정 0423 [에어비앤비 클론 코딩 + 자바스크립트 입문] (0)	2024.05.30
UIUX _국비과정 0419 (0)	2024.05.30
UIUX _국비과정 0418 [HTML + CSS] (0)	2024.05.30
UIUX _국비과정 0417 [HTML + CSS] (0)	2024.05.29

개발(자)되어가는 일지