놓치기 쉬운 CSS 관련 중요한 것들 🔥

• css 속성들의 기본값은 꼭 외워두자!
• css 선택자는 오른쪽에서 왼쪽으로 읽는 습관을 들이자! 더 정확하고 빠르게 이해할 수 있기 때문이다.
• 가상요소선택자는 콜론 두 개 (ex. ::before ::after), 가상클래스선택자는 콜론 한 개 (ex. :hover)
• 글자와 관련된 css 속성들은 상속이 가능해 자식들까지 전파된다.
• 글자와 관련되지 않은 css 속성을 상속하고 싶다면 inherit으로 강제 상속을 하면 된다.
• css 선택자는 점수를 매길 수 있다(명시도) (ex. 클래스는 10점, 태그는 1점, html에서의 css스타일은 1000점) 이러한 점수에 따라 우선순위가 결정된다.
• border속성의 색상은 글자 색상의 영향을 받는다. 따라서 border에서 색을 정하지 않았다면 color을 값을 따라가게 된다.
• margin 중복(병합) 현상이 일어나는 경우

1. 형제 요소간의 margine top/bottom이 만날 때
2. 부모 요소의 margine top/bottom 이 자식 요소의 margine top/bottom과 겹칠 때

• 요소의 너비가 정해져 있는데 글자가 넘칠 때 말줄임표가 자동으로 들어가고 한 줄로 표시하는 방법

  overflow: hidden; 
    white-space: nowrap; //wrap은 줄바꿈을 의미 
    text-overflow: ellipsis;

• img 태그는 태생 자체가 글자이다. 따라서 배경과 겹쳐지지 않는 빈 공간들이 생길 수 있다. 해결방법은 display: block;
• img 태그의 이미지가 안 나올 때 대신 넣을 대체 텍스트 alt는 필수다.
• 또 다른 이미지 삽입 방법은 background-image: url("")과 text-indent: -9999px;를 하고 html에 대체 텍스트를 추가하는 것이다.
• background에 그래디언트를 추가하고 싶다면 background-color 가 아닌 background-image
• 수직정렬된 요소들을 수평정렬로 하고 싶다면 display: flex도 있지만 잘 안쓰는 float: left도 가능하다.
• float을 사용하려면 항상 해제를 해줘야 한다. 부모 클래스에 다음을 추가하면 된다.

  content:""; 
    display:block; 
    clear:both;

• 위의 코드를 매번 쓰기 귀찮아 공용화를 하고 싶다면 맨 위로 올려서 다음 코드를 입력하고 원하는 클래스에 clearfix를 추가하자.

  .clearfix::after{ 
      content:""; 
      display:block; 
      clear:both; 
    }

• position: absolute를 사용하면 꼭 부모 요소의 position도 확인하자. position이 없거나 position: static이면 position:relative를 추가하자.
• position: fixed는 뷰포트 기준이다. 조상 요소에 transform, perspective, filter 중 하나라도 속성이 부여되어 있다면 사용 불가다.
• position: sticky는 부모 요소가 벗어나기 전까지 고정되는 것으로 반드시 방향 (ex. top)과 같이 써줘야 기능을 할 수 있다.
• html/css code convention 참고하여 개발자들이 주로 사용하는 국룰(?)코드를 익혀두자 (ex. 큰 따옴표 사용, 단어 중간에 - or _ 사용)

참고 - 박영웅 강사님 특강