[TIL] CSS Break down (part.2)

인간의 욕심은 끝이 없고, 같은 실수를 반복한다...

??????!!??????!!??????!

"너 지금 뭐라고했니...? 부숴버린다고? 니가 부서지는건 아니고? 그냥 포기해...👨"
'제발,,닥쳐줘 이렇게 빌게,,,🙏'

오늘 배운것을 러프하게나마 정리하지 않으면 주말의 내가 포기신청을 할 것만 같다. 차근차근 헷갈리거나 정확하지 않았던 부분을 정리한다. 진짜로 부숴야지😎

1. Margin collapsing

마진 겹침 현상이란 직관적으로 무언가 두개의 마진 값이 충돌하는 것을 의미한다. 대충은 맞다.

1.1 요소와 요소의 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상

<!--html-->
<div class="one"></div>
<div class="two"></div>

/* css */
div {
    width: 200px;
    height: 200px;
    border: 10px solid black;
}

.one {margin-bottom: 30px;}

.two {margin-top: 60px;}

위와 같이 아래의 마진 탑 값이 더 큰 경우가 있다.
이럴 경우, 더 큰 마진 값이 적용이 되는 현상이다.
(예상 : 30px, 60px이 합쳐져 90px만큼 공간이 생긴다 / 결과 : 60px만 적용)

(킹작권이 무서워 못난 손그림..)

1.2 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상

<!--html-->
<div class="parent">
     <div class="child"></div>
</div>

/* css */
.parent {
	background: orange;
        margin-top: 30px;
        /* 여기서부터 차례대로 하나씩 해제할 것임 */
        /* padding: 10px; */
        /* overflow: hidden; */
        /* display: inline-block; */
        /* border: 1px solid black; */
        /* 별도의 높이 값이 없으면 자식의 높이 값을 가지게 되거, 너비는 블록이므로 100%*/
        }
.child {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background: royalblue;
    }

주석을 해제하기 전, 부모와 자식이 각각 30px, 50px씩 마진 탑을 가진다.
다음은 그 결과이며 마진 collapse가 발생한 결과이다. (마진공간이 흰색이어서 보이지 않는데, 실제로 마진은 50px로 적용되어 있다.)

더 큰 마진 값인 50px이 적용되었고, 부모요소를 넘겨서 렌더링이 된 것을 볼 수 있다.
아래는 주석을 차례대로 해제하여 겹침현상을 해결한 결과들이다.

---

제각기 다른 방식으로 겹침현상을 해결
(부모 마진탑=30px, 자식 마진탑=50px이 적용됨. 부모의 마진공간은 흰색이어서 보이지 않음)
마진 겹침은 해결되었지만, 결과들도 살짝 다르다.

padding: 10px;

overflow: hidden;

display:inline-block;

border: 1px solid black;

1. 우선 의도치않게 패딩값을 주어 사이즈가 늘어남을 볼 수 있다.
2. 사이즈의 조정 없이 가장 이상적인 모델처럼 보인다.
3. 해결이 되었지만 inline요소처럼 컨텐츠 크기만큼 너비를 가지게된다.
4. 2번과 별다를게 없어보이고, 경계선이 보인다.

이처럼 서로다른 요소의 마진들이 같은 곳에서 충돌하여 의도와는 다른 결과를 보여주는 것이 margin collapse이고, 4가지의 해결방안을 보았다.

2. Overflow💨

직관적으로 알 수 있듯이, 흘러넘침을 의미한다. 즉, 뭔가 작은요소안에 요소보다 더큰 것이 들어가 있을 때, CSS로 이를 어떻게 표현할지 정하는 스타일이다.
부모요소의 크기확인을 위해 배경색상에 검은색을 주었다

.parent {
  /* 흘러넘친 부분을 숨긴다 */
  overflow: hidden;
  /* 흘러넘친 부분을 보여준다 */
  overflow: visible;
  /* 흘러넘친 부분을 볼 수 있게는 해주는데, 스크롤해서 보게한다 */
  overflow: scroll;

의도적으로 이미지 보다 작은 블록을 생성하여 자식요소로 이미지를 넣었다.
결과의 순서는 hidden visible scroll이다.
말 그대로, 넘친부분을 숨기느냐, 보여주느냐, 스크롤해서 보여주느냐의 차이이다.
(참고로, overflow:hidden visible;이런식으로 x축은 숨기고 y축은 보여줄 수 있다.)

---

3. Background-image 🌏🌎

HTML에서 이미지 태그를 삽입하는 것이 아니라 CSS에서 배경이미지를 삽입하는 속성이다.

.home-header {
  background-image: url("ocean.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

여러가지 속성과, 또 속성으로 올 수 있는 값들이 많아 바로 다음 장에서 하나하나 결과 값으로 볼 예정이다. 일단 선언은 위와 같은 방식으로 해준다.

---

4. Font📋

우리의 웹을 만든다고하면, 아마도 모든 사람이 기본 글꼴은 쓰지는 않을 것이다. 테마나 분위기에 맞춰서 결이 비슷한 폰트를 쓰기 마련이다. 물론 폰트를 자체적으로 파일로 가지고 있을 수 있지만 지금 우리는 웹에서 제공이 되어지는 폰트를 가져와서 쓴다고 가정한다. 이 때 우리가 폰트를 바꾸는 방법에 대해 알아보자.

4.1 Link

• 우선, 글꼴을 찾아서(무료로 사용이 가능한😁) 링크를 가져온다.
• html의 head부분에서 link주소를 넣어준다.
• css파일에서 font-family를 body에 적용한다.

4.2 @import

• 우선, 글꼴을 찾아서(무료로 사용이 가능한😁) 임포트 주소를 가져온다
• css파일에서 @import url()에 주소를 넣어준다.

---

5. Opacity🔘

투명도를 설정하는 선언이다. 어려운 것 없이 0~1사이의 숫자를 입력해주면 되는데, 1에 가까울수록 투명하지 않다!!!! (0을 입력하면 사라지는 마법이..)

  .box {
    background: orange;
    opacity: 0.2;
    opacity: .8;
    }

---

6. Color🌈

background-color가 아님을 주의!!!!
color는 글자의 색상을 의미한다.

tag {
  color: red;
  color: #404040;
  color: rgba(red, green, blue, alpha);

이렇게 세가지 방법으로 지정이 가능하다.

6.1 색상 이름

직관적으로 떠올릴 수 있는 이름 값들이지만, 현업에서는 쓰이질 않는다.

6.2 HEX값

16진수의 형태로 색상마다 id가 있다고 생각하면 된다. 보통은 이렇게 색의 아이디 값을 받게 된다.

6.3 RGBa

위와 비슷한데 투명도가 추가된 개념이다. alpha가 투명도를 의미하고, opacity개념이 같다.

› 참고 사이트

• 마진겹침
• 구글폰트
• color

• https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4
• https://fonts.google.com/
• https://webdir.tistory.com/406