본문 바로가기
개발일지

[내일배움단] 왕초보 비개발자를 위한 웹개발 종합반 1주차 / 22년 1월 6일

by 능이버섯 2022. 1. 6.
반응형

오늘 나는 자바스크립트 하고 숙제 제출을 완료해야 했지만 나는 낙오했기 때문에 CSS를 천천히 복습했음

 

[수업목표]

1. 서버와 클라이언트의 역할에 대해 이해한다.

2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!

3. Javascript 기초 문법을 익힌다.

 

[배운 것]

  • html 태그 순서는 head -> head -> title -> style -> body 순서

헤드와 바디 태그는 각각 다른 역할을 하고 있다. 헤드는 눈에는 안 보이지만 어디선가 작용하고 있는 광고 추적 툴 같은 것도 깔려있고 스타일도 꾸밀 수 있음. 바디는 몸이다.... 몸이니까.. 몸이 하는 역할을 한다...

  • margin: 위 오른쪽 아래 왼쪽; padding: 위 오른쪽 아래 왼쪽;

강의를 8강 단위로 쪼개서 봐서 흐름이 끊기는 바람에 나는 자고 일어나서 리셋됐는데 강의는 이어서 하니까 거기에서 우왕좌왕 했던 것 같음.

오늘은 이어서 보면서 복습했더니 맥락 파악이 됐다.

여유가 생겨서 예시로 준 페이지 똑같이 만드는데 급급하지 않고 내 스타일로 만들었음.

 

이런 식으로 노출된다.

근데 올리고 보니까 border-radius를 안 했는데 했어도 능히 성공했을 테니까 정답이라고 치자.

코드

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

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap" rel="stylesheet">

    <style>
        * {
        font-family: 'Gowun Batang', serif;
        }
        .wrap {
            width: 900px;
            margin: auto;
        }

        .tk52 {
            width: 520px;
            margin: auto;
            margin-bottom: 20px;
            border-style: solid;
            padding: 40px 40px 40px 40px;
        }

        .btn-primary {
            margin-top: 15px;
        }



    </style>

</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">코딩 공부하는 중</h1>
            <p class="lead">열아홉살 김태균 돌아와</p>
            <hr class="my-4">
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">보90%</a>
            </p>
        </div>
        <div class="tk52">
            <div class="form-group">
                <label for="exampleFormControlInput1">한화 이글스의 뜨거운 심장</label>
                <input type="email" class="form-control" id="exampleFormControlInput1">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">이글스의 자존심 누구? 김태균!</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="2"></textarea>
                <button type="submit" class="btn btn-primary">영구결번</button>
            </div>
        </div>
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top" src="https://t1.daumcdn.net/cfile/blog/143BA64E502E466219" alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/">열아홉살 김태균 "끝냈다"</a>
                    <p class="card-text">연장 10회 극적 3점포, 한밭벌 열광도가니.</p>
                    <b><font color="blue">왜 40살 된 건데...</font></b>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://t1.daumcdn.net/cfile/blog/143BA64E502E466219" alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/">열아홉살 김태균 "끝냈다"</a>
                    <p class="card-text">연장 10회 극적 3점포, 한밭벌 열광도가니.</p>
                    <b><font color="blue">왜 40살 된 건데...</font></b>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://t1.daumcdn.net/cfile/blog/143BA64E502E466219" alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/">열아홉살 김태균 "끝냈다"</a>
                    <p class="card-text">연장 10회 극적 3점포, 한밭벌 열광도가니.</p>
                    <b><font color="blue">왜 40살 된 건데...</font></b>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://t1.daumcdn.net/cfile/blog/143BA64E502E466219" alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/">열아홉살 김태균 "끝냈다"</a>
                    <p class="card-text">연장 10회 극적 3점포, 한밭벌 열광도가니.</p>
                    <b><font color="blue">왜 40살 된 건데...</font></b>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://t1.daumcdn.net/cfile/blog/143BA64E502E466219" alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/">열아홉살 김태균 "끝냈다"</a>
                    <p class="card-text">연장 10회 극적 3점포, 한밭벌 열광도가니.</p>
                    <b><font color="blue">왜 40살 된 건데...</font></b>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://t1.daumcdn.net/cfile/blog/143BA64E502E466219" alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/">열아홉살 김태균 "끝냈다"</a>
                    <p class="card-text">연장 10회 극적 3점포, 한밭벌 열광도가니.</p>
                    <b><font color="blue">왜 40살 된 건데...</font></b>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://t1.daumcdn.net/cfile/blog/143BA64E502E466219" alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/">열아홉살 김태균 "끝냈다"</a>
                    <p class="card-text">연장 10회 극적 3점포, 한밭벌 열광도가니.</p>
                    <b><font color="blue">왜 40살 된 건데...</font></b>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://t1.daumcdn.net/cfile/blog/143BA64E502E466219" alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/">열아홉살 김태균 "끝냈다"</a>
                    <p class="card-text">연장 10회 극적 3점포, 한밭벌 열광도가니.</p>
                    <b><font color="blue">왜 40살 된 건데...</font></b>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://t1.daumcdn.net/cfile/blog/143BA64E502E466219" alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/">열아홉살 김태균 "끝냈다"</a>
                    <p class="card-text">연장 10회 극적 3점포, 한밭벌 열광도가니.</p>
                    <b><font color="blue">왜 40살 된 건데...</font></b>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

 

 

 

 

[수강소감]

만들 때는 아 ㅋ 개쩐다 ㅋ 이랬는데 조금 씩 조금 씩 디테일을 놓침!padding은 사방으로 40px 씩 주는 거 해놓고 margin은 우왕좌왕 하다가 결국 2줄로 나누어서 쓰고 보더 래디우스 깜빡했다.자만하지 말고 그바게 하려고 하지 말고 한 번 더 검토하는 습관을 갖자.자바스크립트까지 듣고 자려고 했는데 내일 해야겠다

반응형
저작자표시

'개발일지' 카테고리의 다른 글

[내일배움단] 엑셀보다 쉬운 SQL - 3주차 / 22년 1월 11일  (1) 2022.01.11
[내일배움단] 왕초보 비개발자를 위한 웹개발 종합반 1주차 숙제 / 22년 1월 9일  (0) 2022.01.10
[내일배움단] 엑셀보다 쉬운 SQL - 2주차 / 22년 1월 9일  (0) 2022.01.09
[내일배움단] 왕초보 비개발자를 위한 웹개발 종합반 1주차 / 22년 1월 5일  (0) 2022.01.05
[내일배움단] 엑셀보다 쉬운 SQL - 1주차 / 22년 1월 5일  (0) 2022.01.05

관련글

댓글

티스토리툴바