온라인 부트캠프 사전 강의
1주차 과제를 끝냈습니다.
온라인을 할지 오프라인을 할지 고민이 많았는데
결국에는 온라인을 선택했고
맥북프로를 살질 맥북 에어를 살지 고민했는데
결국 맥북프로 14인치를 샀습니다.
확실히 2015년 버전 맥북에어보다는 프로그램로딩 속도도 그렇고 화질도 그렇고 음량도 굉장히 좋습니다.
단지 키보드 소리가 거슬리는데
키보드랑 모니터 받힘대랑 여러가지 살 아이템들이 많습니다.
어제랑 오늘 웹개발 종합반 1주차 강의를 들었고 아래는 강의 과제입니다.
간단하게 css와 html을 활용해서
팬명록이라는 것을 만들었습니다.
부스트스랩이라는 사이트에서 복붙을해와서 꾸미기를 했습니다.
html은 뼈대
css는 꾸미기라는 개념을 익혔습니다.
아직까지는 쉽고 따라갈만한데
얼마나 더 어려워질지 궁금합니다.
Javascript 함수를 맛보기를 보여주셨는데
엑셀 함수를 알아서 괜찮습니다.
확실히 이과생들이 유리한 과목 같습니다.
<!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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 300px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://funshop1.akamaized.net/abroad/034/17285/UA%20True%20Wireless%20Flash%20X%20Project%20Rock%20Edition%201_0.jpg');
background-position: center;
background-size: contain;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mypost > button {
margin-top: 20px;
}
.card {
width: 95%;
max-width: 500px;
margin: 10px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>Dwayne Johnson 팬명록</h1>
</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">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button type="button" class="btn btn-dark">응원 남기기</button>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>The rock rocks!</p>
<footer class="blockquote-footer">이지농
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>The rock rocks!</p>
<footer class="blockquote-footer">이지농
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>The rock rocks!</p>
<footer class="blockquote-footer">이지농
</blockquote>
</div>
</div>
</body>
</html>'사전스터디_부트캠프' 카테고리의 다른 글
| 2회차 웹개발 종합반 1주차 css html JavaScript (0) | 2022.10.18 |
|---|---|
| 비전공자 개발자 도전기 5주차 웹개발 서버연결하기 (0) | 2022.10.18 |
| 비전공자 개발자 도전기 4주차 웹개발 "GET" "POST" (0) | 2022.10.14 |
| 비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup (1) | 2022.10.12 |
| 비전공자 개발자 도전기 2주차 웹개발 (0) | 2022.10.09 |