캠프 첫 날. HTML, CSS 강의를 들으며 추억앨범, 스파르타플릭스 실습을 진행하였다.
요즘에는 프론트엔드 영역도 다룰 줄 아는 백엔드 개발자가 많다고 들어서 더 집중하면서 재밌게 학습하였다.
html은 title, head, body로 나뉘어져 있다.
또한, 레이아웃을 나누는 div에 class명을 지어 스타일을 꾸미기도 했다.
- head부분
<head>
<style>
.main {
color: white;
background-image: url("https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg");
background-position: center;
background-size: cover;
}
</style>
</head>
- body부분
<body>
<div class="main">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">킹덤</h1>
<p class="col-md-8 fs-4">
병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한
역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
세자뿐이다.
</p>
<button type="button" class="btn btn-outline-light">
영화 기록하기
</button>
<button type="button" class="btn btn-outline-light">상세정보</button>
</div>
</div>
</div>
</body>
✏️css 속성
margin: 바깥 여백
border : 테두리 속성
padding: 안쪽 여백
border-radius: 모서리 둥글게
'TIL' 카테고리의 다른 글
| 5일차) 미니 프로젝트 발표회 참석 (0) | 2024.11.08 |
|---|---|
| (조금 늦은...;;) 스타터 노트 (1) | 2024.11.08 |
| 4일차) 웹개발 종합반 5주차 깃허브를 통한 web배포 (1) | 2024.11.07 |
| 3일차) 웹개발 종합반 4주차 파이어베이스 (0) | 2024.11.06 |
| 2일차) 웹개발 종합반 2-3주차 Javascript JQuery Fetch (2) | 2024.11.05 |
댓글