[사전캠프 2일차]
오늘의 팀 주제는 프론트엔드의 기본 구성인
HTML, CSS, JavaScript에 대해서 알아보는 시간을 가졌다.
각 구성요소에 대해서 상세하게 알아본다기 보다는 각 어떤 역할을 하는지 알아보는 시간이었다.
또한 오늘 나의 강의가 오픈되어 [왕초보] 1주차 수강을 하였는데
오늘의 팀 주제중 html과 css를 간단한 예제로 실습하며 알아보는 과정이어서 복습하는 개념으로 알맞춤이었다.
기존에 간단한 웹 퍼블리싱을 해본경험이 있어 어렵지 않게 따라하며 복기할 수 있는 시간이었고
구글폰트 가져다 사용하는 방법, Bootstrap 이용하는 방법을 새롭게 배워간다.
✔️CDN링크를 삽입해서 부트스트랩 이용
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
✔️구글폰트import
<style> @import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap'); * { font-family: "Single Day", cursive; font-weight: 400; font-style: normal; } </style>
- 모두
<head>~</head>안에 넣기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 추억 앨범</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');
* {
font-family: "Single Day", cursive;
font-weight: 400;
font-style: normal;
}
</style>
</head>✔️많이 사용하게될 구조
<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://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>뭔<div></div> 가 이렇게 많아? 싶지만 코드를 접어서 볼 수도 있기 때문에 길어지는 것은 문제가 되지 않으니 이렇게 지정해놔야 관리하기가 용이해진다.
진도를 나갈수록 팀프로젝트를 진행할수 있을 만큼 실력을 쌓고 싶은 마음에 욕심도 나고 설렌다.
이 설렘의 강도는 다를지언정 지속적으로 유지되었으면 한다 :)
one setp