LIKELION🦁 TIL(2022-06-15)

1. CSS 속성

중요하다고 생각했던 부분, 몰랐던 부분에 대해 다시 정리해보려 한다.

min-width

1. 해당 태그가 가질 수 있는 최소 너비(width)를 설정한다.
   min-width : fit-content;
   (1) fit-content; 는 max-content 처럼 담고 있는 컨텐츠의 최대 너비를 width 로 지정한다.

box-shadow

1. box-shadow : 0 1px 20px 0 rgba(0,0,0,0.6);     // offset-x | offset-y | blur-radius | spread-radius | color
   👉 이 속성이 생각보다 자주 쓰인다... 박스에 그림자 처리되는 것.
2. box-shadow : inset 10px 10px gold;     // inset | offset-x | offset-y | color

margin 속성

1. '가운데 정렬' 규칙이 웹브라우저에 따라 조금씩 달라지는 현상 때문에 충돌이 있었지만, 한 가지 확실한 방법이 있다.
   👉 만약 < div > 태그를 가운데 정렬하고 싶다면 width를 적정 크기로 맞추고,
   (1) margin-right : auto; 와 margin-left : auto; 를 추가합니다.
   (2) margin : 30px auto; 를 추가합니다.

text-align 속성

지금까지 가운데 정렬을 하기 위해서 display : flex; 나 margin : 0 auto; 이러한 방식을 사용해왔는데...
text-align 으로 매우 쉽게 할 수 있었다. 😂
정확히 말하자면, contents 안에 있는 내용물들을 정렬하는 개념이다.

1. text-align : center | left | right;

overflow 속성

1. 새롭게 사용해보는 속성이었다.
   말 그대로 요소가 너무 커서 overflow 됐을 때, 처리법을 지정한다.
   (1) overflow : visible;    // 넘쳐도 그냥 보이게... 잘 선호하지 않는다.
   (2) overflow : hidden;    // 넘치면 hidden. 숨겨준다.
2. overflow : hidden; 은 float 와 자주 같이 쓰인다 !
   (1) 만약, 두개의 p 태그를 float 속성을 통해 배치했다면,
   p 태그의 부모 태그인 div 태그에 overflow : hidden; 을 부여하면, 부모가 가지는 영역이 'block formatting context' 가 되어 독립된 하나의 공간을 차지한다. 즉, 다음 태그가 자연스럽게 아래로 간다.
   👉 그냥 float 를 사용하면, 부모 태그에 overflow : hidden; 을 사용해줘야 문제가 없다.

🚩에러 찾기

text-align 속성이 왜 적용이 안될까... 고민했는데 정말 어이 없는 실수를 찾았다. Cascading Style sheet 의 기본은 위에서부터 아래로 적용되는데, 마지막 코드에 text-align : center; 로 되어있었다... 그러니 아무리 가운데에서 지지고 볶아도 오류가 발생했던 것 😂