[코딩애플 html/css] 10강 : 배경 예쁘게 넣는 스킬들 & margin collapse

insidepixce 2023. 6. 28. 03:29

2023. 6. 28. 03:29

728x90

10강 : 배경 예쁘게 넣는 스킬들 & margin collapse

1. 기본코드

html

<html>
    <head>
        <meta charset="UTF-8">
        <title>Home</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        
    </body>
</html>

항상 기본 코드는 이런식으로 시작한다. 입력해주고 빈 css파일도 넣어준다

2. Background 사진 넣기

<html>
    <head>
        <meta charset="UTF-8">
        <title>Home</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div class="main-background"></div>
    </body>
</html>

3. Background 조정하기

사이즈 조절하기

background-size: cover;

Cover 말고도 퍼센트 단위, 픽셀 단위도 가능하다

cover: 알아서 div박스 안에 채워라

→ 이러면 배경화면이 반복되기 때문에 …

배경화면 반복 없애기

background-repeat: no repeat;

이렇게 No repeat을 입력해주면 된다

위치 조절하기

중앙 정렬

background-position : center;

중간에 정렬해준다

배경이 잘리지 않게 고정하는법

background-attachment : fixed;

필터 입히기

블러 필터

filter: blur(5px);

밝아지는 필터

    filter: brightness(70);

어두워지는 필터

filter: brightness(30%);

선명도 조절

filter: contrast(200%);

흑백 필터

filter: grayscale(100%);

그렇지만 얘네는 안쪽에 있는 폰트들까지 전부 적용된다

배경 겹치기

background-image: url(../source/kitchyback.jpeg), url(../source/kichyback.jpeg);

이런식으로 Url 을 하나 더 넣어주면 배경을 겹칠 수 잇다

심심하니까 글넣기

margin collapse 현상

.main-title{
    color : white;
    font: size 50px;
    margin-top: 300px;
}

margin collapse 현상은 브라우저에서 margin이 겹치는 현상이다. 이를 방지하기 위해서는 margin-top, margin-bottom 중 하나를 0으로 설정해야 한다.

<div> 박스 안에 P 태그를 사용헀다.

p태그에 상단 Margin을 주기 위해 Margin-top을 주게 되면 div와 p가 동시에 Margin-top이 생기게 된다.

→ 뭔가 이상하다!

원래 박스들의 테두리가 만나면 margin 이 합쳐진다 (박스가 내부에서 만나든 내부에서 만나든 상관없다)

정확히 말하면

마진을 하나로 합쳐주고
혹여나 둘 다 마진이 있으면 둘 중에 더 큰 마진을 하나만 적용하게 된다.

그래서 두 박스의 테두리가 겹치지 않도록 해주면 보다 정확한 마진을 만들 수 있다.

강의 예제에서는 부모 박스의 패딩을 1px이렇게 조금 주는걸로 해결이 가능하다.

2. 오늘의 숙제

제목 밑에 글넣고 버튼 하나만 이쁘게 넣어오십시오.
쇼핑몰 스럽게 이쁘게 디자인 해보라는 말입니다.

글 넣기

<html>
    <head>
        <meta charset="UTF-8">
        <title>Home</title>
        <link href="css/main.css" rel="stylesheet">
    </head>
    <body>
        <div class="main-background">
            <h4 class="main-title">
                Our lifes<br>
                are<br>
                beautiful
            </h4>
        </div>
    </body>
</html>

.main-background {
    width: 100%;
    height: 500px;
    background-image: url(../source/kitchyback.jpeg), url(../source/kichyback.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    float:left;
    
}

.main-title{
    color : black;
    font: size 50px;
    font-weight: bold;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    Position: relative;

}

이렇게 은근 예쁘게 보이는 걸 확인할 수 있다.

글씨가 좀 작은 느김

.main-title{
    color : black;
    font: size 50px;
    font-weight: bold;
    text-align: center;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    Position: relative;
    font-size: 50px;

}

Font-size 를 좀 더 늘려줬다

이쁘다 ! 은근 !

이제 버튼을 만들어줄 차례이다

<html>
    <head>
        <meta charset="UTF-8">
        <title>Home</title>
        <link href="css/main.css" rel="stylesheet">
    </head>
    <body>
        <div class="main-background">
            <h4 class="main-title">
                Our lifes<br>
                are<br>
                beautiful
            </h4>
            <a href="https://insidepixce.tistory.com" class="tstory">do anything</a>
        </div>
    </body>
</html>

버튼 태그로 할 줄 알았는데 a 태그 쓰고 그 안에 버튼 속성을 넣으면 되엇다.

버튼 태그 속성

.tstory {
  background-color: hsl(307, 79%, 72%);
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  }

호버 및 포커스 스타일

.tstory:hover,
  .tstory:focus {
    background-color: #540430;
  }

구글링을 하다 좀 재밌는 걸 발견해서 해보았다.

키치함 뿜뿜! 버튼에 커서를 갖다대면 색이 변한다?

키치키치하게 잘 만들어졌다

여기에 들어간 속성을 정리해보겠다

Cursor: 마우스 커서의 모양을 지정
Text-decoration: 텍스트의 장식(underline, overline, line-through 등)을 지정
font-size: 글자 크기를 설정한다.
font-weight: 글자 굵기를 설정한다.
border-radius: 박스의 모서리를 둥글게 설정한다.
text-align: 텍스트 정렬을 설정한다.
position: 박스의 위치를 설정한다.
top: 박스의 위쪽 여백을 설정한다.
left: 박스의 왼쪽 여백을 설정한다.
transform: 박스를 변형시킨다