TIL | 8.29.월 [Html / CSS / Javascript]

- Html / CSS

👉 기본 CSS
배경관련 : background-color, background-image, background-size
사이즈 : width, height
폰트 : font-size, font-weight, font-famliy, color
간격 :margin, padding

1. 백그라운드 이미지 삽입시

background-image: url('');
background-position: center;
background-size: cover;

2. pc 및 모바일 화면 비율 조정

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

- flex-direction : row / column ; (행 / 열 정렬시 선택)

3. Button

border-radius: 50px;
border: 1px solid white;

- 버튼의 테두리 굴곡

- 테두리 선 두께 (px / 색상 선택 가능)

4. hover

마우스 커서가 해당 변수 위에 올라가 있을때

.mytitle > button:hover {
    border: 2px solid white;
}

예시 를 참고하자면 버튼위에 마우스 커서를 올려놨을때 버튼의 테두리 두께 = 2px , 색상 = white

5. margin

margin

margin : 상px 우px 하px 좌px ; 👉 시계방향 순서

px 👉 auto / 0 / ---px 로 설정 가능

+ 이미 정의된 꾸며진 CSS = 부트스트랩 : https://getbootstrap.com/docs/5.0/components/buttons/

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

- javascript

1. 브라우저의 동작

function hey(){
alert('안녕!');
}

버튼을 클릭했을때 👉 hey() 함수 실행

2. let

변수 선언과 동일

리스트, 딕셔너리 등 선언 가능

3. 반복문

for (1. 시작조건; 2. 반복조건; 3. 더하기) {

4. 매번실행
}

i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

+ 예시

- 1_mini_project

[1page] 팀 소개 및 팀 구성원 이미지

<!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">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <title>Mini Project</title>


    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .team_name {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), blueviolet);
            background-position: center;
            background-size: cover;

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

        .team_info {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .member_cards {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            margin: 30px 0 50px;

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

        .member_cards img {
            width: calc(20% - 10px);
            height: 400px;
            margin: 0 15px 15px 0;
        }

        .w3-card-4 {
            margin-left: 30px;
            margin-right: 30px;
        }


        .visit {
            width: 100%;
            height: 250px;


            color: darkslateblue;

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

        .visit > button {
            width: 200px;
            height: 50px;

            background-color: darkslateblue;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .visit > button:hover {
            border: 2px solid white;
        }


        .my_visit_post {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 100px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

            display: none;
        }

        .form-floating {
            margin-top: 20px;
        }


        .record_button {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }

        .record_button > button {
            margin-right: 10px;
        }

    </style>


    <script>

        function open_box() {
            $('#post-box').show()
        }

        function close_box() {
            $('#post-box').hide()
        }

        function save_order() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/2_page',
                data: {name_give: name, comment_give: address},

                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }
    </script>
</head>


<body>
<div class="holl_page"></div>

<div class="team_name">
    <h2> A8 : 에이에잇 Team </h2>
    <h3> [ Project name : 우당탕탕 I4's 취업여행🔥 ]</h3>
</div>


<div class="w3-panel w3-border w3-round-small">
    <div class="team_a">
        <h4>
            <br>
            🫡 에이에잇 Team만의 특징은? <br>
            <br>
            ☝🏼. 저희 팀은 4명 다 여자🙋🏻‍♀️로 보기드문 멤버구성을 가지고 있어요 <br>
            ✌🏼. 저희 팀은 개발자로 취업을 하는 것이 목표에요🔥<br>
            👌🏼. 저희 팀은 팀원들 모두가 MBTI가 I로 시작하는 내향인들의 모임이에요😎<br>
            <br>
        </h4>
    </div>
</div>


<div class="w3-panel w3-border w3-round-small">
    <div class="team_b">
        <h4>
            <br>
            🫡 에이에잇 Team만의 약속은? <br>
            <br>
            ☝🏼적극적인 참여 필수 <br>
            ✌🏼시간 엄수 🕘 ❌지각❌ <br>
            <br>
        </h4>
    </div>
</div>


<div class="w3-panel w3-border w3-round-small">

    <div class="team_info">
        <h4>
            <br>
            🫡 에이에잇 팀원을 소개합니다.<br>
        </h4>
    </div>

    <div class="member_cards">
        <div class="w3-card-4" style="width:20%">
            <button onclick="window.location.href = '2_page_lhw.html'">
                <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbOJa5I%2FbtrKGPNlWYW%2FAAAAAAAAAAAAAAAAAAAAAAeRFeRSKbCOuCG3OcHAx08_1JbUDhmjmTNf_P5GtiPT%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1767193199%26allow_ip%3D%26allow_referer%3D%26signature%3Dy26kpCAEQ2o8UlJs3QVG2O4emE8%253D"
                     alt="Alps" style="width:100%">
                <div class="w3-container w3-center">
                    <p> 이혜원 </p>
                </div>
            </button>
        </div>

        <div class="w3-card-4" style="width:20%">
            <button onclick="window.location.href = '2_page_jhl.html'">
                <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FzDT5X%2FbtrKHwaePOt%2FAAAAAAAAAAAAAAAAAAAAADCTDWJT-pizTocRkRUCaMqUHoxpQAeGnLnZdfurYgH9%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1767193199%26allow_ip%3D%26allow_referer%3D%26signature%3DGZW04ILoYxRumsceP5cDRQWkctQ%253D"
                     alt="Alps" style="width:100%">
                <div class="w3-container w3-center">
                    <p> 장혜림 </p>
                </div>
            </button>
        </div>

        <div class="w3-card-4" style="width:20%">
            <button onclick="window.location.href = '2_page_jhj.html'">
                <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FEGJSq%2FbtrKIySQLk9%2FAAAAAAAAAAAAAAAAAAAAAJT2ujdkkqkim2nvYIDSVTu793QMqM5Vc4GWhtgRBOQa%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1767193199%26allow_ip%3D%26allow_referer%3D%26signature%3D9mEjC86S5lczCgdqREvBYuuqDLw%253D"
                     alt="Alps" style="width:100%">
                <div class="w3-container w3-center">
                    <p> 정현주 </p>
                </div>
            </button>
        </div>

        <div class="w3-card-4" style="width:20%">
            <button onclick="window.location.href = '2_page_ksy.html'">
                <img src="https://velog.velcdn.com/images/ksykma/profile/3a764cee-f9cd-4bd6-af8c-78e1afa15fde/image.jpg"
                     alt="Alps" style="width:100%">
                <div class="w3-container w3-center">
                    <p> 김서영 </p>
                </div>
            </button>
        </div>
    </div>

</div>


<!--    <div class="w3-panel w3-border w3-round-small">-->
<div class="visit">
    <h2> 방명록을 남겨주세요 😇 </h2>
    <button onclick="open_box()"> 방명록 남기기 👇</button>
</div>

<div class="my_visit_post" id="post-box">
    <div class="form-floating">
            <textarea id="name" class="form-control" placeholder="Leave a comment here" id="floatingTextarea1"
                      style="height: 50px"></textarea>
        <label for="floatingTextarea1">이름</label>
    </div>

    <div class="form-floating">
            <textarea id="comment" class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>

    <div class="record_button">
        <button onclick="save_order()" type="button" class="btn btn-dark"> 기록하기 🖱</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
        <button onclick="window.location.href = '3_page.html'" type="button" class="btn btn-outline-dark"> 방명록 보러가기 👀</button>
    </div>
</div>



</body>
</html>

[2page] 구성원 이미지 클릭 시 팀원 자기소개 페이지로 이동 : 팀원 자기소개 페이지

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2? family=Gowun+Batang&family=Gowun+Dodum&display=swap" rel="stylesheet">

    <title>개인별 자기소개</title>

    <style>
        *{
           font-family: 'Gowun Dodum', sans-serif;
        }

        body{background-color: aliceblue;}

        .container {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
        }
        .item{
            margin-top: 30px;
        }
        .my_ifm {
            margin-left: 70px;
            margin-top: 25px;
            font-size: large;
            font-weight: bold;
        }

        .visit_btn {
            display: flex;
            flex-direction: column;
            max-width: 300px;
            margin-left: 1100px;

            width: 100%;

            color: darkslateblue;

            align-items: center;
            justify-content: center;
        }

        .visit_btn > button {
            width: 200px;
            height: 50px;

            background-color: darkslateblue;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .visit_btn > button:hover {
            border: 2px solid white;
        }


        .my_ifm2 {
            margin-left: 110px;
            margin-top: 50px;
            max-width: 925px;
        }

        .my_visit_post {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 100px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

            display: none;
        }

        .form-floating {
            margin-top: 20px;
        }


        .record_button {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }

        .record_button > button {
            margin-right: 10px;
        }

    </style>

    <script>

        function open_box() {
            $('#post-box').show()
        }

        function close_box() {
            $('#post-box').hide()
        }


        function save_order() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/2_page',
                data: {name_give : name, comment_give : address},

                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }

    </script>


</head>

<body>
    <div class="container">
        <div class="item"><img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbOJa5I%2FbtrKGPNlWYW%2FAAAAAAAAAAAAAAAAAAAAAAeRFeRSKbCOuCG3OcHAx08_1JbUDhmjmTNf_P5GtiPT%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1767193199%26allow_ip%3D%26allow_referer%3D%26signature%3Dy26kpCAEQ2o8UlJs3QVG2O4emE8%253D" alt="My Image" width="200" height="200"></div>
        <div class="item">
            <div class=" my_ifm">
                <p>이름: 이혜원</p>
                <p>나이: 24</p>
                <p>MBTI: ISFJ</p>
                 블로그 주소: <a href="https://wonprogrammer.tistory.com"> "https://wonprogrammer.tistory.com"  </a>
            </div>
        </div>
    </div>


    <hr style="border: solid cornflowerblue;margin: 50px 50px 50px 50px;">
    <div class="my_ifm2">
        <p> <br> 💜자기소개(지원동기 포함): <br> <br> 안녕하세요 🙌 에이에잇조 이혜원 입니다. <br>
                                내일배움캠프에서 만나게 되어 반갑습니다.<br>
                                제가 내일배움캠프에 지원하게 된 계기는 전공이 정보통신학과로 코딩과 아주 밀접한 전공을 갖고 있지만, 여러 컴퓨터 언어, 소프트웨어 공학 등 한 분야를 깊게 배우기 보다는 넓게 다양한 지식들을 배우다보니 스스로 너무 부족하다는 생각을 갖고 조금 더 전문적으로 배우고 싶은 생각이 들어 다양한 프로그램들을 살펴보던 중 내일배움캠프 프로그램을 찾아 지원하게 되었습니다. <br>
                                아직 많이 부족하고 서툴지만 4개월간의 과정에서 많이 배우고 습득해 부끄럽지 않은 실력을 가져보고 싶습니다. 🥺 <br>
        </p>
        <br>
        <p>💜객관적으로 살펴본 나의 장점: <br><br> 제 MBTI 에서도 살펴볼 수 있듯이 정해지거나 내가 해야 될 일들은 미루지 않고 최대한 해내려고 합니다. 철저한 'J'</p>
        <br>
        <p>💜협업 시 본인 스타일: <br><br> 역할이 정해지면 그 역할에 민폐가 되지 않도록 노력하려 하고, 팀으로 진행하는 프로젝트는 조금 깔끔하게 마무리 지으려 하는 편입니다. <br> </p>
    </div>

    <div class="visit_btn">
        <button onclick="open_box()"> 방명록 남기기 👇 </button>
    </div>

    <hr style="border: solid cornflowerblue;margin: 50px 50px 50px 50px;">

    <div class="my_visit_post" id="post-box">
        <div class="form-floating">
            <textarea id="name" class="form-control" placeholder="Leave a comment here" id="floatingTextarea1"
                      style="height: 50px"></textarea>
            <label for="floatingTextarea1">이름</label>
        </div>

        <div class="form-floating">
            <textarea id="comment" class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">코멘트</label>
        </div>


        <div class="record_button">
            <button onclick="save_order()" type="button" class="btn btn-dark"> 기록하기 🖱 </button>
            <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
            <button onclick = "window.location.href = '3_page.html'" type="button" class="btn btn-outline-dark" > 방명록 보러가기 👀 </button>
        </div>
    </div>
</body>

</html>

[3page] 1-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">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <title>Mini Project</title>


    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        body {
            background-color : lavender;
        }

        .team_name {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), violet );
            background-position: center;
            background-size: cover;


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

        .info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            margin-top: 50px;
            margin-bottom: 30px;
        }

        .reviews {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .table {
            width: 900px;
            margin: 60px auto 100px auto;
            padding-bottom: 60px;
        }




    </style>


    <script>



    </script>

</head>


<body>
<div class="holl_page"></div>

    <div class="team_name">
        <h2> 에이에잇 Team's 방명록 📖 </h2>
    </div>

    <div class="info">
        <h5>아래의 이름 or 별명을 찾아 자신이 남긴 방명록을 찾아보아요 👀</h5>
        <h5> 👇</h5>
    </div>


    <div class="reviews">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">이름</th>
                <th scope="col">방명록 내용</th>
            </tr>
            </thead>
            <tbody id="reviews-box">
            <tr>
                <td>홍길동</td>
                <td> 홍길동 왔다 감 </td>
            </tr>
            <tr>
                <td>홍길동</td>
                <td> 홍길동 왔다 감 </td>
            </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

아직 1,2페이지에서 db정보를 받아와 3페이지에 기록하는건 성공하지 못 함 😱

'woncoding > TIL' 카테고리의 다른 글

TIL \| 9.5.월 [Python 언어의 이해 / Python 기초] (1)	2022.09.05
TIL \| 9.2.금 [튜플 / 집합 / f-string / 예외처리 / 파일분리 / map, lambda, filter / class] (0)	2022.09.02
TIL \| 9.1.목 [변수 / 리스트 / 딕셔너리 / 조건,반복문 / 함수] (0)	2022.09.01
TIL \| 8.31.수 [1_mini_project] (0)	2022.08.31
TIL \| 8.30.화 [pymongo / Flask] (0)	2022.08.30

- Html / CSS

- javascript

- 1_mini_project

'woncoding > TIL' 카테고리의 다른 글

티스토리툴바