TOP
class="layout-aside-left paging-number">
본문 바로가기
프로그래밍 및 기타/Java, JSP, HTML, CSS

2023년 3월 23일 개발일지

by 기록자_Recordian 2023. 3. 23.
728x90
반응형

팀스파르타 수강

[웹개발 종합]

1. 오늘 알게 된 것

- 부트스트랩 : CSS를 더 편하게 해주기 위한 각종 꾸밈 자료 (태그)들이 모여 있는 라이브러리

원하는 표, 버튼 또는 기타 서식을 넣고 싶을 때 부트스트랩에 들어가서 태그를 끌어와서

내 입맛에 맞게 바꿔주기만 하면 된다.

 

 

2. 새롭게 익힌 것

-  CSS에 대해 익히고 나니, 결과물이 예전에 html 에 대한 것만 알았을 때 작업했던 것들에 비해

비교할 수 없이 나아졌다는 것을 실감했다. 물론, 모든 태그들을 이해하고 능숙히 다루는 것은 아니지만,

해당 개념들에 대해 이해하고

1) 수정하고 싶을 때 어떤 부분을 바꿔야 하는지 알고 있다는 것

2) 다른 웹페이지의 소스들을 따와서 내가 만들고 싶은 것을 (조금은) 구현할 수 있다는 것

에 큰 의의를 둔다.

 

 

 

3. 느낀 점 또는 적고 싶은 것

그냥 이거는 내가 장족(?)의 발전을 했다는 것을 자화자찬 하고 싶은 건데,

기존에 강의에서는 수어사이드 스쿼드 라는 영화를 4개를 넣는 작업물을 만들었는데,

내가 임의대로 영화들을 바꿔버렸다.

(html 작업에 대해 어느정도 이해하고 있다는 증거랄까~)

 

 

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

    <title>스파르타 피디아</title>
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

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

    .mytitle {
        background-color: green;
        color: white;

        height: 250px;

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

        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
        background-position: center;
        background-size: cover;

    }

    .mytitle>button {
        width: 250px;
        height: 50px;

        background-color: transparent;

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

        margin-top: 20px;

    }

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

    .mycomment {
        color: gray;
    }

    .mycards {
        width: 1200px;
        margin: 20px auto 20px auto;
    }

    .mypost {

        width: 500px;
        margin: 20px auto 20px auto;
        padding: 20px 20px 20px 20px;

        box-shadow: 0px 0px 3px 0px gray;
    }

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

        margin-top: 20px;

    }

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

</style>

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기</button>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">영화url</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>--선택하기--</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">코멘트</label>
    </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>
    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20221216_283/1671153488789d3g4j_JPEG/movie_image.jpg"
                        class="card-img-top" alt="더 퍼스트 슬램덩크">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에 코멘트가 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20230206_264/1675649061557DaJHD_JPEG/movie_image.jpg"
                        class="card-img-top" alt="스즈메의 문단속">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에 코멘트가 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20230217_188/1676599847794aO7NN_JPEG/movie_image.jpg"
                        class="card-img-top" alt="에브리씽 에브리웨어 올 앳 원스">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에 코멘트가 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에 코멘트가 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

 

이제 1주차 강의를 수강했고, 2주차도 얼른 진도를 나가야 겠다.

(근데 파이썬 기초는 여전히 이해가 안 되고 어렵다는 것...ㅠㅠ)

728x90
반응형

'프로그래밍 및 기타 > Java, JSP, HTML, CSS' 카테고리의 다른 글

[Java] 25년 1월 7일 - 자바 기초(조건문, scanner)  (0) 2025.01.07
[Java] 25년 1월 3일 - 자바 기초 (반복문)  (0) 2025.01.03
[Java] 25년 1월 2일 - 자바 기초 (변수, 연산자)  (1) 2025.01.02
[Java] Java 개념, Java를 위한 프로그램 설치  (1) 2024.12.31
23년 3월 22일 개발일지  (0) 2023.03.22

관련글

티스토리툴바