UIUX _국비과정 0423 [에어비앤비 클론 코딩 + 자바스크립트 입문]

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

2024. 5. 30. 19:49

이번 시간을 끝으로 CSS, HTML은 마무리. 자바스크립트를 배우며 또 할 예정.

그리드에 대해 배웁니다.

플렉스는 가로 세로 중에 하나를 놓고 배치함. → 1차원

그리드는 가로와 세로를 모두 사용함. → 2차원

그리드 레이아웃

display : grid
grid-template-columns: 200px 200px 200px (각 컬럼의 크기)
값의 형식

-1fr 1fr 1fr

-200px 200px 200px

-refeat(3, 1fr)

-repeat(auto-fit, minmax(200px, 1fr))

-repeat(auto-fill, minmax(200px, 1fr))

grid-template-row: 100px
grid-gap : 컬럼간격 줄간격
grid-column : 1/4 (컬럼기준으로 번호를 부여한 것)
grid-column-strat : 1; 컬럼기준 시작하는 줄을 정해준다
grid-row : 2/4 (줄 번호 기준으로 번호를 부여한 것)
grid-row-strat : 3; 줄 번호 기준 시작하는 줄을 정해준다
grid-template-area → 구조를 어떻게 만들것인지를 정해두고 쓰는 속성

플렉스 레이아웃	그리드 레이아웃
display : flex flex-direction : row(주축) , column(교차축) flex-wrap : wrap , nowrap flex-flow : row wrap justify-content : .... 주축에대한정렬 align-items : ..... 교차축에 대한 정렬 align-self: ..... 특정 요소에 대한 처리 align-content :... 여러줄의 교차축 정렬	display : grid grid-template-columns: 200px 200px 200px (각 컬럼의 크기) grid-template-row: 100px grid-gap : 컬럼간격 줄간격

display : grid
grid-template-columns: 200px 200px 200px (각 컬럼의 크기)
grid-template-row: 100px

구현화면 :

<style>
            #wrapper {
                display: grid;
                /* 균등하게 한 칸씩 구성 - 상대크기, 배수의 개념으로 조절 가능 */
                /* 상대값 : 1fr 1fr 1fr / 절대값 : 200px 200px 200px  */
                /* repeat(3, 1fr) = 1fr을 3번 써라 */
                grid-template-columns: repeat(3, 1fr); 
                /* 절대값 : 100px */
                /* 상대값 : minmax(100px, auto) 높이에 따라 자동으로 늘이고 줄이고 */
                grid-template-rows: minmax(100px, auto);
            }

            .items {
                padding: 10px;
                background-color: #eee;
            }

            /* 구조 선택자 */
            .items:nth-child(odd) {
                background-color: #e0ecb6;
            }

        </style>

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
grid-gap : 컬럼간격 줄간격

구현화면 :

<style>
            #wrapper1 {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                margin-bottom: 20px;
            }

            #wrapper2 {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                grid-gap: 20px 30px;
            }

            .items {
                padding: 15px;
                background-color: #eee;
            }

            .items:nth-child(odd) {
                background-color: #e0ecb6;
            }
        </style>

grid로 레이아웃 구성하기

grid-column : 1/4 (컬럼기준으로 번호를 부여한 것)
grid-column-strat : 1; 컬럼기준 시작하는 줄을 정해준다
grid-row : 2/4 (줄 번호 기준으로 번호를 부여한 것)
grid-row-strat : 3; 줄 번호 기준 시작하는 줄을 정해준다

<style>
        #wrapper {
            width: 700px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
        }

        .box {
            padding: 15px;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }

        .box1 {
            background-color: rgb(173, 207, 161);
            grid-column : 1/4
        }

        .box2 {
            grid-column-start: 1;
            background-color: rgb(255, 240, 79);
            grid-row : 2/4 /* 컬럼의 번호 2~4까지 채워라 */
        }

        .box3 {
            grid-row-start: 2;
            background-color: rgb(243, 157, 117);
            grid-column : 2/4
        }

        .box4 {
            background-color: rgb(153, 218, 248);
            grid-row-start: 3;
            grid-column-start: 3;
        }


    </style>
</head>
<body>
    <div id="wrapper">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
      </div>
</body>

grid-template-area → 구조를 어떻게 만들것인지를 정해두고 쓰는 속성

사용방법 :

       grid-template-areas:
       "box1 box1 box1"
       "box2 box3 box3"
       "box2 . box4"

위와 같이 행과 열을 맞춰 그대로 적어주면 알아서 만들어준다.

정말 편리해보이지만 레이아웃이 고정된 형식이 아니면 유연성은 떨어진다.

<style>
        /* 그리드로 쉽게 레이아웃 구성 */
        #wrapper {
           width: 700px;
           display: grid;
           grid-template-columns: repeat(3,1f);
           grid-template-rows: repeat(3,100px);
           grid-template-areas:
           "box1 box1 box1"
           "box2 box3 box3"
           "box2 . box4"
            /* 아무것도 표시하고 싶지 않는 영역은 . 으로 표현 */
             /* 고정된 형식이라면 편하지만 유연성은 떨어짐 */
        }

        .box {
            padding: 15px;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }

        .box1 {
            background-color: rgb(173, 207, 161);
            grid-column : 1/4
        }

        .box2 {
            grid-column-start: 1;
            background-color: rgb(255, 240, 79);
            grid-row : 2/4 /* 컬럼의 번호 2~4까지 채워라 */
        }

        .box3 {
            grid-row-start: 2;
            background-color: rgb(243, 157, 117);
            grid-column : 2/4
        }

        .box4 {
            background-color: rgb(153, 218, 248);
            grid-row-start: 3;
            grid-column-start: 3;
        }

    </style>
</head>
<body>
    <div id="wrapper">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
      </div>
</body>

에어비엔비 사이트 클론 코딩

구현화면 :

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="css/style.css">
        <link
            rel="shortcut icon"
            sizes="76x76"
            type="image/x-icon"
            href="https://a0.muscache.com/airbnb/static/logotype_favicon-21cc8e6c6a2cca43f061d2dcabdf6e58.ico">
    </head>

    <body>

        <header>
            <nav>
                <div class="logo">
                    <svg
                        viewbox="0 0 1000 1000"
                        role="presentation"
                        aria-hidden="true"
                        focusable="false"
                        style="height: 1em; width: 1em; display: inline-block; fill: currentcolor;">
                        <path
                            d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"></path>
                    </svg>
                </div>
                <div class="menu">
                    <ul>
                        <li>
                            <a href="#">호스트가 되어보세요</a>
                        </li>
                        <li>
                            <a href="#">도움말</a>
                        </li>
                        <li>
                            <a href="#">회원가입</a>
                        </li>
                        <li>
                            <a href="#">로그인</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <section>
                <div class="search__box">
                    <div class="search__title">특색 있는 숙소와 즐길<br/>
                        거리를 예약하세요.</div>
                    <table>
                        <tr>
                            <td colspan="2" class="search__sub__title">목적지</td>
                        </tr>
                        <tr>
                            <td colspan="2"><input class="search__input" type="text" placeholder=" 모든 위치"></td>
                        </tr>
                        <tr>
                            <td class="search__sub__title">체크인</td>
                            <td class="search__sub__title">체크아웃</td>
                        </tr>
                        <tr>
                            <td><input class="search__input" type="date"/></td>
                            <td><input class="search__input" type="date"/></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="search__sub__title">인원</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <select class="search__input">
                                    <option>인원</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                    <div class="search__button">
                        <button>검색</button>
                    </div>
                </div>
            </section>
        </header>

        <main>
            <section>
                <div class="sec__title">
                    에어비앤비 둘러보기
                </div>
                <div class="card__box">
                    <div class="card">
                        <div class="card__img1 card__img"></div>
                        <div class="card__content">숙소 및 부티크 호텔</div>
                    </div>
                    <div class="card">
                        <div class="card__img2 card__img"></div>
                        <div class="card__content">트립</div>
                    </div>
                    <div class="card">
                        <div class="card__img3 card__img"></div>
                        <div class="card__content">어드벤처</div>
                    </div>
                    <div class="card">
                        <div class="card__img4 card__img"></div>
                        <div class="card__content">레스토랑</div>
                    </div>
                </div>
            </section>

            <section>
                <div class="ad1"></div>
            </section>

            <section>
                <div class="sec__title">추천 여행지</div>
                <div class="choo__box">
                    <div class="choo_img1"></div>
                    <div class="choo_img2"></div>
                    <div class="choo_img3"></div>
                    <div class="choo_img4"></div>
                    <div class="choo_img5"></div>
                </div>
            </section>

            <section>
                <div class="sec__title2">에어비앤비 플러스를 만나보세요!</div>
                <div class="sec__content">퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div>
                <div class="ad2"></div>
            </section>

            <section>
                <div class="sec__title">전 세계 숙소</div>

                <div class="home__box">
                    <div class="home">
                        <div class="home__img1"></div>
                        <div class="home__info">
                            <div class="info1">오두막 · BALIAN BEACH, BALI</div>
                            <div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
                            <div class="info3">
                                <span class="star">★★★★★</span>
                                <span class="count">185</span>
                                <span class="type">슈퍼호스트</span>
                            </div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home__img2"></div>
                        <div class="home__info">
                            <div class="info1">키클라데스 주택 · 이아(OIA)</div>
                            <div class="info2">Unique Architecture Cave House</div>
                            <div class="info3">
                                <span class="star">★★★★★</span>
                                <span class="count">188</span>
                                <span class="type">슈퍼호스트</span>
                            </div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home__img3"></div>
                        <div class="home__info">
                            <div class="info1">성 · 트웬티나인 팜스(TWENTYNINE PALMS)</div>
                            <div class="info2">Tile House</div>
                            <div class="info3">
                                <span class="star">★★★★★</span>
                                <span class="count">367</span>
                                <span class="type">슈퍼호스트</span>
                            </div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home__img4"></div>
                        <div class="home__info">
                            <div class="info1">검증됨 · 케이프타운</div>
                            <div class="info2">Modern, Chic Penthouse with Mountain, City & Sea Views</div>
                            <div class="info3">
                                <span class="star">★★★★★</span>
                                <span class="count">177</span>
                                <span class="type">슈퍼호스트</span>
                            </div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home__img5"></div>
                        <div class="home__info">
                            <div class="info1">아파트 전체 · 마드리드(MADRID)</div>
                            <div class="info2">솔광장에 위치한 개인 스튜디오</div>
                            <div class="info3">
                                <span class="star">★★★★★</span>
                                <span class="count">459</span>
                                <span class="type">슈퍼호스트</span>
                            </div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home__img6"></div>
                        <div class="home__info">
                            <div class="info1">집 전체 · HUMAC</div>
                            <div class="info2">Vacation house in etno-eco village Humac</div>
                            <div class="info3">
                                <span class="star">★★★★★</span>
                                <span class="count">119</span>
                                <span class="type">슈퍼호스트</span>
                            </div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home__img7"></div>
                        <div class="home__info">
                            <div class="info1">개인실 · 마라케시</div>
                            <div class="info2">The Cozy Palace</div>
                            <div class="info3">
                                <span class="star">★★★★★</span>
                                <span class="count">559</span>
                                <span class="type">슈퍼호스트</span>
                            </div>
                        </div>
                    </div>

                    <div class="home">
                        <div class="home__img8"></div>
                        <div class="home__info">
                            <div class="info1">게스트용 별채 전체 · 로스앤젤레스</div>
                            <div class="info2">Private Pool House with Amazing Views!</div>
                            <div class="info3">
                                <span class="star">★★★★★</span>
                                <span class="count">170</span>
                                <span class="type">슈퍼호스트</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </body>
    <footer>
        <div class="footer__box">
            <div class="callcenter">
                <ul>
                    <li>made by yuna</li>
                    <li class="p">개인정보 | 이용약관 | 사이트맵 | 환불정책</li>
                </ul>
            </div>
        </div>
    </footer>
</html>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

header {
    background-image: url("../images/background.jpg");
    height: 880px;
    background-size: 100% 100%;
}

nav {
    display: grid;
    grid-template-columns: auto auto; /* 같은 비율로 균등분할 */
    justify-content: space-between;
    padding: 20px;
}

.logo {
    color: white;
    font-size: 40px;
    font-weight: bold;
}

.menu ul {
    display: grid;
    grid-template-columns: auto auto auto auto; /* 인라인으로 바뀜 */
    list-style-type: none ;
    grid-gap: 30px;
}

.menu ul a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.search__box {
    width: 430px;
    display: inline-block;
    padding: 20px 30px;
    background-color: white;
    position: relative;
    top: 10px;
    left: 50px;
    border-radius: 10px;
    box-shadow: 0 2px 2px 0 rgb(214, 214, 214);
}

table {
    width: 100%;
}

.search__title {
    padding: 10px 0;
    font-size: 30px;
    font-weight: bold;
    color: rgb(75, 74, 74);
}

.search__sub__title {
    padding: 10px 0;
    font-size: 12px;
    font-weight: bold;
}

.search__input {
    height: 45px;
    width: 100%;
    color: rgb(75, 74, 74);
    font-size: 15px;
    border: 1px solid #dddd;
}

.search__button {
    display: grid;
    justify-content: end;  /* 오른쪽 끝 정렬 */
    padding: 20px 0;
}

.search__button button {
    background-color: rgb(255, 71, 108);
    border: 0;
    color: white;
    font-weight: bold;
    height: 45px;
    width: 70px;
    font-size: 15px;
    cursor: pointer;  /* 마우스 가져다대면 손가락 모양으로 바뀜 */
    border-radius: 6px;
}

main {
    margin: 30px 80px;
}

.sec__title {
    font-size: 25px;
    font-weight: bold;
    color: rgb(75, 74, 74);
    margin: 0 0 20px 0;
}

.sec__title2 {
    font-size: 25px;
    font-weight: bold;
    color: rgb(75, 74, 74);
    margin: 5px 0;
}

.card__img1 {
    background-image: url(../images/card1.jpg);
    height: 70px;
    background-size: 100% 100%;
}

.card__img2 {
    background-image: url(../images/card2.jpg);
    height: 70px;
    background-size: 100% 100%;
}

.card__img3 {
    background-image: url(../images/card3.jpg);
    height: 70px;
    background-size: 100% 100%;
}

.card__img4 {
    background-image: url(../images/card4.jpg);
    height: 70px;
    background-size: 100% 100%;
}

.card__box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}

.card__content {
    display: grid;
    align-items: center;
    font-weight: bold;
    margin: 0 0 0 10px;  /* 글자 수직의 가운데 정렬 */
}

.card {
    display: grid;
    grid-template-columns: 1fr 3fr;
    border: 1px solid #dddd;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgb(214, 214, 214);
    color: #212121dd;
}

.ad1 {
    background-image: url("../images/ad1.jpg");
    border-radius: 10px;
    margin: 40px 0;
    height: 350px;  /* 이미지는 높이값을 주지 않으면 안나옴 */
    background-size: 100% 100%;
}

.ad2 {
    background-image: url("../images/ad2.png");
    margin: 20px 0;
    height: 300px;  /* 이미지는 높이값을 주지 않으면 안나옴 */
    background-size: 100% 100%;
}

.choo_img1 {
    background-image: url(../images/choo1.png);
    height: 250px;
    background-size: 100% 100%;
}

.choo_img2 {
    background-image: url(../images/choo2.png);
    height: 250px;
    background-size: 100% 100%;
}

.choo_img3 {
    background-image: url(../images/choo3.png);
    height: 250px;
    background-size: 100% 100%;
}

.choo_img4 {
    background-image: url(../images/choo4.png);
    height: 250px;
    background-size: 100% 100%;
}

.choo_img5 {
    background-image: url(../images/choo5.png);
    height: 250px;
    background-size: 100% 100%;
}

.choo__box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    padding-bottom: 30px;
}

.home__box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}

.home__box .info1 {
    font-size: 13px;
    margin: 7px 0;
    color: #535151dd;
}

.home__box .info2 {
    font-weight: bold;
}

.home__box .star {
    color: rgb(73, 77, 188);
    font-size: 15px;
}

.home__box .count {
    font-size: 13px;
}

.home__box .type {
    font-size: 13px;
}

.sec__title {
    margin-top: 40px;
}

.home__img1 {
    background-image: url(../images/home1.png);
    height: 150px;
    background-size: 100% 100%;
}

.home__img2 {
    background-image: url(../images/home2.png);
    height: 150px;
    background-size: 100% 100%;
}

.home__img3 {
    background-image: url(../images/home3.png);
    height: 150px;
    background-size: 100% 100%;
}

.home__img4 {
    background-image: url(../images/home4.png);
    height: 150px;
    background-size: 100% 100%;
}

.home__img5 {
    background-image: url(../images/home5.png);
    height: 150px;
    background-size: 100% 100%;
}

.home__img6 {
    background-image: url(../images/home6.png);
    height: 150px;
    background-size: 100% 100%;
}

.home__img7 {
    background-image: url(../images/home7.png);
    height: 150px;
    background-size: 100% 100%;
}

.home__img8 {
    background-image: url(../images/home8.png);
    height: 150px;
    background-size: 100% 100%;
}

.footer__box {
    background-color: #eeee;
    height: 100px;
    border-top: 1px solid #cccccc;
}

.footer__box .callcenter ul{
    margin: 40px 80px;
    font-size: 12px;
    color: #434343e4;
    list-style-type: none ;
    display: grid;
    grid-template-columns: auto;
}

새로 알게 된 것 :

svg → 문자 취급이 가능한 이미지, 용량도 작아짐

자바스크립트

클론 코딩을 마지막으로 자바스크립트로 넘어갔다.

HTML

CSS - 디자인
JAVAscript - 동적인 페이지 구현, 생기있는 페이지를 만들 수 있다.

자바스크립트를 잘 하려면 css를 잘 알아야 한다!

on 뒤에 오는 것 이벤트처리

자바스크립트 사용방식

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./testscript.js"></script>
        <script>
            // message 함수 입니다.
            function message() {
                alert('hello');
            }
        </script>
    </head>
    <body>
        <!-- 자바스크립트 사용 방식 1.임베디드한 방식 -->
        <p onclick="alert('hello')">여기를 클릭하세요</p>
        <!-- 2.내부에 정의하는 방식 -->
        <p onclick="message()">
            여기를 클릭하세요</p>
        <!-- 3. 외부에 정의하는 방식 -->
        <p onclick="message2()">
            여기를 클릭하세요</p>
    </body>
</html>

function message2() {
    alert("massage2");

자바스크립트 문법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 자바스크립트 문법

        // 변수 선언 방법
        var x;
        x = 10; // 값을 받으면 타입을 알 수 있게 됨
        console.log(x);
        document.write(x + "<br>");

        var x,y,z;
        x = 10;
        y = 20;
        z = 30;
        // 문자열이 들어가도 되고, 같은 이름으로 변수가 설정되어도 된다.
        x = "kang";
        document.write(typeof(x) + "<br>"); //바로 위의 x의 타입을 출력

        x = 100;
        document.write(typeof(x) + "<br>");
        var x;
        x = 23.6

        // 문자, 숫자, 논리, 객체, undifinded (값이 없다)

        x = true;
        x = 5 > 3;

        var u;
        document.write(typeof(u) + "<br>");  // undefined : 변수의 값이 없을 때

        // 1. 숫자가 맨 앞에 오면 안된다
        // 2. 예약어를 사용하면 안된다 document같은 것
        // 3. 대문자 구분

        // 변수 앞에 붙일 수 있는 것
        // var, let, const
        let o;
        o = 10;
        document.write(o, "<br>");

       //let o;  // 중복선언 

       const i  = 100; // 상수이기 때문에 무조건 값을 줘야 함.
       //i = 200;
       document.write(i, "<br>");

    </script>
</head>
<body>
    
</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>
        <script>
            // 산술연산자 + , - , * , % , / 문자연결 3 + "hello" -> "3hello" 문자열이 된다 대입연산자
            // = , += , -=, /= , *= , ...

            // 증감연산자
            // ++ , --

            // 비교연산자
            // === , != , < , > , >= , <= 

            // 논리연산자
            // && , || , !

            // 삼항연산자
            // 조건식 ? 결과1 : 결과2


            // 값을 입력박고 싶을 때 쓰는 함수 
            // prompt("당신의 몸무게를 입력하세요", "");
            // 데이터 타입이 문자 

            let w = prompt("당신의 몸무게 입력:", "0");
            // 프롬프터로 입력받은 값은 문자이기때문에 문자를 숫자로 바꾸는 작업을 해야한다.
            w = parseInt(w);
            document.write(w); // 이때 타입은 넘버로 바뀐다.

            let h = prompt("당신의 키 입력:", "0");
            h = parseInt(h);
            document.write(h); 
            
            let avg = (h - 100) * 0.9;
            document.write(avg); 

        </script>
    </head>
    <body></body>
</html>

아래와 같이 자바스크립트로 표를 만들 수도 있다!

// 산술연산자를 이용해 스크립트로 표를 만들 수도 있다.
 // 바깥쪽이 큰 따옴표면 안쪽은 작은 따옴표로 감싸야 한다

             let str = "<table border = '1'>";
             str += "<tr>";
             str += "<td>1</td> <td>2</td> <td>3</td>"
             str += "</tr>";
             str += "</table>"
             document.write(str);

저작자표시 비영리 변경금지 (새창열림)

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

UIUX _국비과정 0425 (1)	2024.06.03
UIUX _국비과정 0424 (1)	2024.06.03
UIUX _국비과정 0422 (0)	2024.05.30
UIUX _국비과정 0419 (0)	2024.05.30
UIUX _국비과정 0418 [HTML + CSS] (0)	2024.05.30

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

개발(자)되어가는 일지

UIUX _국비과정 0423 [에어비앤비 클론 코딩 + 자바스크립트 입문]

그리드 레이아웃

grid로 레이아웃 구성하기

에어비엔비 사이트 클론 코딩

자바스크립트

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

+ Recent posts

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역