1-6 자주 쓰이는 CSS 연습하기
.mytitle{
text-align: center;
background-image: url('');
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 40px;
}image, size, position 같이 다님
안쪽 여백 위에서부터 40px 띄우기
.mybtn{
margin: 20px 20px 20px 20px;
}바깥쪽 여백 시계방향으로 20px씩 띄워라
.mybtn{
margin: 20px 20px 20px 20px;
}안쪽 여백
.wrap{
background-color: green;
width: 300px;
margin: auto;
}임시 색깔과, 임시 가로 길이를 준다음에 바깥여백(margin)을 auto로 하면 가운데로 옴
1-7 폰트, 주석, 파일분리
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">title 태그 아래에 link 태그 넣고
<style>
*{
font-family: 'Nanum Gothic', sans-serif;
}
</style>- 은 모든 태그에 적용시킨다는 뜻
<style>
*{
/*font-family: 'Nanum Gothic', sans-serif;*/
}
</style>command + / 하면 주석처리
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기
1-8 ~ 1-11 부트스트랩
부트스트랩 시작 템플릿
<!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>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>body태그 안에 넣고 싶은거 넣으면 됨
.mytitle{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}⭐️ 갯수 상관없이 내용물 가운데 정렬
.mytitle > button {
border: 1px solid white;
margin-top: 10px;
}버튼 테두리 굵기 1px, 실선, 흰색
제목과 버튼 사이 공간 띄우기
.mytitle > button:hover {
border: 2px solid white;
}마우스 데면 굵어지게
.mytitle{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("")
}⭐️ 배경이미지 어둡게
0.5 있는 곳 조절하면 밝기 조절 가능
.wrap{
width: 1200px;
margin: 20px auto 0px auto;
}크기 조금 줄여서 위에 조금 띄우고 가운데 정렬
.mypost{
box-shadow: 0px 0px 3px 0px grey;
}포스트 박스에 그림자 효과주기
width: 95%;
max-width: 500px;현재 width가 고정적으로 500px인 상황이었음
모바일로 보면 포스터 그림이 넘치는 현상
모바일은 가로길이가 중요-> 375px
⭐️ 화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘
🐶 이미지 링크 딸때 저장해서 압축하고 베이스64로 링크 만들어서 사용가능. base64 jwt
.card.awesome {
border: none;
transform: translateY(0px);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.2));
transition: all 0.3s;
}
.card.awesome:hover {
transform: translateY(-4px);
filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.1));
}🐶 MDN Using CSS transitions
transform 움직이기 가능
filter로 그림자
transition으로 천천히 움직이게해서 효과 주기
a