1주차 과제 - profile

👀 문제점1
background-image

list 요소 앞에 이미지를 두어 아이콘처럼 표시하고 싶은데 이렇게 겹치는 상황이 발생했다. 이런 상황에서는 우선 1. padding 2. margin 이 두가지를 생각해보면 된다.

1. 상하 맞추기 (전구 크기만큼)

상하에 padding: 10px을 두면 이렇게 전구 크기에 맞출 수 있다.
여기서 중요한점은 !! 이 padding은 전구의 크기랑 상관 없다는 것이다.
전구는 그냥 어쨌거나 border 전까지의 공간에 배경으로서 존재하는 것이고, 중요한 것은 content이다.

전구에 따라 padding이 된 것이 아니라 컨텐츠인 텍스트에 맞추어서 padding이 진행된 것이다. (전구랑은 아예 상관 없음!)

여기서 padding은 background-image랑 상관 없다.
background-image는 공간이 어떻게 되든 그 공간 크기만큼의 이미지를 배경으로 띄운다고 생각하면 된다.
background-image의 크기 때문에 공간의 크기가 바뀔 일은 없다.

배경이미지는 말 그대로 배경!
컨텐츠와는 다른 것이고 패딩, 스타일을 줄 때 생각안해도 된다.

❗️background-image 는 컨텐츠 아님!
❗️background-image 는 border까지에 적용되는 배경 이미지임!

2. 좌우 맞추기 (전구 옆에 텍스트가 뜨도록)

이제 이렇게 하니 좌우가 안맞아서 텍스트를 전구 옆에 띄우고 싶다.
텍스트를 왼쪽 정렬 시켰더니 배경과 텍스트가 겹친다.
이때 padding-left를 진행하면 컨텐츠인 텍스트만 움직여서 원하는 만큼 왼쪽에서 떨어질 수 있다.

.section li {
  background-image: url(off.png);
  background-repeat: no-repeat;
  text-align: left;
**  padding: 10px 50px;** //여기
  margin: 10px;
  transition: all 0.2s;
}

3. Margin

이제는 li요소들의 위아래 간격을 더 두고싶다.
이때 Padding을 더 주는 것은 콘텐츠인 텍스트에 맞추어 지정되므로 배경 이미지와 안맞는 경우가 발생한다.

❗️background-image - padding에 영향 안받음 (border까지만)

그러면 어떻게 해야할까?
이제는 padding이 아닌 margin을 사용할 때다.
margin을 사용하면 컨텐츠가 아닌 그 밖의 부분을 건드는 것이므로 border 밖 부분을 의미한다. (박스 밖이라고 생각하면 된다.)
밑의 사진과 같이 padding이 아닌 margin을 두면 배경이미지까지 같이 이동이 가능하므로 이 경우에는 padding이 아니라 margin을 사용하는 것이다.

❗️margin과 padding 잘 구분하기

background-image VS img

• 의미 있는 이미지 (profile)
• 의미 없는 요소 (Icon, Background)

4. padding + Margin 적용한 결과

.section li {
  background-image: url(off.png);
  background-repeat: no-repeat;
  transition: all 0.2s;

  font-family: sans-serif;
  padding: 10px 50px;
  margin: 20px;
  text-align: left;
  color: black;
  border-bottom: 1px solid #888;
}

.section li:hover {
  background-image: url(on.png);
}

5. 한번더 적용

똑같은 방법으로 main에 배경이미지를 넣고 margin-left를 이미지 크기 만큼 조정한다.
주황색 부분이 마진이고 오른쪽이 content~border까지이다.

    <div class="wrapper">
      <div class="header"></div>
      <div class="main"></div>
        <div class="section"></div>
      <div class="footer"></div>
    </div>

header와 footer은 따로 div를 설정했기 때문에 안에 메인에서만 margin이나 스타일링이 지정된다.

.wrapper {
  background-image: url(hi.png);
  background-color: #888;
  background-repeat: no-repeat;
  background-position: left;
  transition: all 0.2s;

  margin: 50px auto;
  text-align: center;
  background-color: aliceblue;
  border-radius: 20px;
  max-width: 900px;
}

.wrapper:hover {
  background-image: url(idea.png);
}

✨ 최종결과 ✨