💫 배경 관련 CSS 속성들
.main-background {
background-image : url(../img/shoes.jpg);
background-size : cover;
background-repeat : no-repeat;
background-position : center;
background-attachment : fixed;
}
cover : 배경으로 꽉 채워주세요
contain : 배경이 잘리지 않게 꽉 채워주세요
background-attachment : 웹사이트가 스크롤 될 때 배경이 신기하게 동작하게 만들고 싶으면 사용해보기
💫 배경 두 개 겹치기
.main-background {
background-image : url(../img/shoes.jpg), url(person.jpg);
}
콤마로 이미지 두개 첨부 가능
💫 배경에 검은색 틴트 주기
.main-background {
background-image: linear-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0.5) ), url(이미지경로~~) ;
}
linear-gradient : 색이 점진적으로 변하는 gradient를 줄 수 있는 키워드
투명도 0.5의 검은색을 입힌 후, 배경 겹치기 사용
💫 주의해야할 margin 버그
margin collapse effect 라고 부르는 일종의 버그
원래 박스들의 테두리가 만나면 margin이 합쳐짐. (박스가 내부에서 만나든 외부에서 만나든 상관X)
1. 마진을 하나로 합쳐주고
2. 혹여나 둘 다 마진이 있으면 둘 중에 더 큰 마진을 하나만 적용.
그래서 두 박스의 테두리가 겹치지 않도록 하면 보다 더 정확한 마진을 줄 수 있다.
→ 부모 박스에 padding을 1px 이렇게 조금 주는 것으로 쉽게 해결
💫 오늘의 숙제 : 제목 밑에 글 넣고 버튼 하나만 이쁘게 넣어오기.
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
<link href="css/font.css" rel="stylesheet">
</head>
<body>
<div class="main-background">
<h4 class="main-title">Buy Our Shoes</h4>
<p>예쁜 신발 사러 오세요💕</p>
<button>보러가기</button>
</div>
</body>
</html>
- main.css
.main-background{
width: 100%;
height: 500px;
background-image: url(../img/shoes.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 1px;
}
.main-title{
color: white;
font-size: 40px;
margin-top: 250px;
margin-left : 40%;
font-family: 'MeongiW';
}
.main-background p{
color: white;
font-size: 20px;
text-shadow: -2px 0px black, 0px 2px black, 2px 0px black, 0px -2px black;
margin-left : 43%;
font-family: 'Oneprettynight';
}
.main-background button{
width: 100px;
font-size: 500;
font-weight: 600;
text-align: center;
line-height: 50px;
color: #FFF;
border-radius: 5px;
transition: all 0.2s;
background: #b3aaee;
box-shadow: 0px 5px 0px 0px #68628a;
margin-left : 45%;
border: none;
font-family: 'Oneprettynight';
}
.main-background button:hover {
margin-top: 5px;
margin-bottom: 5px;
box-shadow: 0px 0px 0px 0px #68628a;
}
- font.css
/* 웹 폰트 */
@font-face {
font-family: 'Oneprettynight';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SupermagicB';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Shiningstar';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* 로컬 폰트 */
@font-face {
font-family: 'OhsquareAir';
src: url('font/Cafe24OhsquareAir-v2.0.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MeongiB';
src: url('font/Cafe24Meongi-B-v1.0.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MeongiW';
src: url('font/Cafe24Meongi-W-v1.0.woff') format('woff');
font-weight: normal;
font-style: normal;
}
⭐ 어려웠던 것들
폰트를 적용하면서 처음에 적용이 안돼서 오래 걸렸었다.
css 내에서 다른 css를 사용하려면 선언을 해줘야 하는 것이 아닌가? 했었는데 HTML 소스에 link를 해주니 해결된다는 것을 알게 되었다.
버튼의 경우 블로그를 찾아서 사용했는데 블로그에서 본 것과 다르게 버튼에 검정색 테두리가 생겼었다.
border: none 을 해주니 검정색 테두리가 사라졌다.