WebProgramming
스파르타 사전교육 부트캠프 D-7 (웹개발)
용용띠용
2025. 3. 26. 17:43
<1주차>
3. CSS: 디자인
- 방법
*지칭 대상이 있어야 꾸미기 가능*
1단계: 꾸미고자 하는 대상에 이름 달기: <h1 class = "myTitle>로그인 페이지</h1>
2단계: head 안에 꾸미고자 하는 방식 서술: <head>.myTitle{color:red}</head>
- 태그
//배경 관련
1. background-color: 배경 색
2. background-image: 배경 이미지
3. background-size: 배경 크기
//사이즈
1. width: 가로
2. height: 세로
//폰트
1. font-size
2. font-weight
3. font-family
4. color
//간격
1. margin: 구역 바깥 여백
2. padding: 구역 안쪽 여백
3. border-radius: 곡선 경계
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<style>
.myTitle{
/*px: 웹에서의 길이 단위*/
width : 300px; /*width: 가로*/
height : 200px; /*height: 세로*/
color:white;
text-align: center; /*텍스트 가운데 정렬*/
padding-top: 30px;
border-radius: 8px;
/*background-image는 아래 3줄이 세트로 다님님*/
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg'); /*''안에 url 넣어주기*/
background-position:center;
background-size: cover;
}
.whole{/*전체 가운데 정렬하기기*/
background-color: green;
width: 300px;
/*auto: 끝까지 이동동*/
margin: 50px auto 0px auto /*위 오른 아래 왼*/
}
</style>
</head>
<body>
<div class = "whole">
<div class = "myTitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type = "text"/></p>
<p>PW: <input type = "text"/></p>
<button>로그인하기</button>
</div>
</body>
</html>
- 구글 폰트 //https://fonts.google.com/?subset=korean
1단계: 원하는 폰트 클릭
2단계: Get font 클릭
3단계: <> Get embed code 클릭
4단계: Web 탭에서 import 클릭
5단계: style 안에 태그 복붙 //태그 겹치지 않도록 유의
6단계: CSS class 탭 코드 복사 후 *{ }를 css에 넣기
- 부트스트랩
: 예쁜 CSS 모아둔 것 //남이 작성한 코드 사용: 설정 필요
https://getbootstrap.com/docs/5.3/getting-started/introduction/
예시: 추억 앨범
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 추억 앨범</title>
/*부트스트랩 import*/
<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*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
* {
font-family: "Nanum Pen Script", cursive;
font-weight: 400;
font-style: normal;
}
.mytitle {
height: 250px;
background-color: green;
color: white;
/*가운데 정렬*/
display: flex;
flex-direction: column;
/*이거 외에 display, align 등은 바꿀 것 없음*/
align-items: center;
justify-content: center;
/*background-image는 아래 3줄이 세트로 다님*/
background-image: url(https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80);
/*''안에 url 넣어주기*/
background-position: center;
background-size: cover;
}
/*mytitle 안의 button을 의미*/
.mytitle>button {
width: 150px;
height: 50px;
background-color: transparent;
color: white;
border: 1px solid white;
/*선의 굵기 1px, 실선, 흰색*/
border-radius: 5px;
margin-top: 20px;
}
.mycards {
width: 1200px;
margin: 30px auto 0px auto;
}
.mypostingbox{
width: 500px;
margin: 30px auto 0px auto;
padding:20px;
box-shadow: 0px 0px 3px 0px black;
border-radius: 5px;
}
.mybutton{
/*가운데 정렬*/
display: flex;
flex-direction: row;
/*이거 외에 display, align 등은 바꿀 것 없음*/
align-items: center;
justify-content: center;
}
.mybutton > button{
margin-right: 5px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억앨범</h1>
<button>추억 저장하기</button>
</div>
<div class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 제목">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 내용">
<label for="floatingInput">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 날짜">
<label for="floatingInput">앨범 날짜짜</label>
</div>
<div class = mybutton>
<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://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 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 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 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>
</body>
</html>
*코드를 정렬하는 것이 가장 중요*
: Shift + Alt + F //항상 정렬하자
*다양한 태그들이 있으니 필요한 것을 잘 서치하자*
*많이 만들어 보는게 좋을 듯하다*
*태그 종류별로 외울 필요x*