TIL - CSS 특강

소밍·2022년 4월 1일
0

TIL

목록 보기
5/17
post-thumbnail

🤓
빔캠프의 이종찬 강사님 수업을 들었다!
공부하다보면 상속 속성을 가지는 것, 가지지 않는 것,
인라인 레벨인 것, 블록 레벨인 것이 뭔지 다 습득할 수 있겠지~
지금 어떤 속성을 가지고 있는지 다 알면... 그건 천재다!


블록 레벨

  • 수직 나열
  • 영역 적용 가능
  • 자식 요소로 블록 레벨, 인라인 레벨 가질 수 있음.
  • section, div ...

인라인 레벨

  • 수평 나열
  • 영역 적용 불가능
  • 자식으로 인라인 레벨만 가질 수 있고 블록 레벨은 가질 수 없음.

인라인 블록 레벨 (img)

  • 수평 나열
  • 영역 적용 가능 but 화질 뭉개질 수도...

🥵 하지만 예외는 있다...

1) a 태그 - 인라인 레벨

  • html5 부터 a 태그 요소 안에 블록 레벨 넣을 수 있음.


    2) p 태그 - 블록 레벨
  • p태그는 블록레벨 중에서도 가장 하위의 요소이기 때문에
    p태그 안에 다른 블록레벨 들어갈 수 없음.


    3) pre - 블록 레벨
  • 블록 레벨이지만 pre태그 안에 div태그(블록 레벨) 들어갈 수 없음.
  • pre태그는 사용자가 입력하는 텍스트 모양을 그대로 출력해주는 태그로 줄바꿈도 랜더링됨, pre 태그 안에 다른 요소 쓸일이 없기 때문이라고 추측

📌 요소 속성 바꾸고 싶을 땐 ?

display: inline;
display: block;
display: inline-block;


display: none; 요소 안보이면서 영역도 사라짐
visibility: hidden; 요소 안보이지만 영역 유지
opacity: 0; 요소 안보이지만 영역 유지 (0~1)



📌 상속 inheritance

  • font는 상속
    • px, em, rem
    • em 부모 폰트사이즈 자식에게 적용, 브라우저마다 세팅값이 다르니 em 사용
    • rem

  • 상속X
    • margin
    • background-color
    • background-image

상속


📌 css reset

h1 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

a {
  text-decoration: none;
  color:inherit;
  /*color:currentColor; ..? */
  /*부모로부터 색상 상속 받겠음*/
}

/*초기화할 때
  상속이 되는 요소 : inherit 
  상속 안되는 요소 : initial*/
  • margin은 상속 지원되지 않는 속성이니 초기화할 때 initial 사용?
    margin:initial;, margin:inherit; 말고

    그냥 margin:0; 으로 하자! 망할 인터넷 익스플로러 때문 ^-^!


📌 margin collapsing

  • 인접해있는 블럭요소끼리만 일어남
  • 상하단만 해당사항

예방 방법 ) 부모에게
overflow:hidden; 또는
padding:1px; 설정


📌 overflow

자손영역이 부모영역보다 클 때 어떻게 보여줄지 지정하는 속성

  • Overflow:visible; 기본값
  • Overflow:hidden; 부모안에 자식이 쏙
  • Overflow:scroll; 스크롤바 / 자손이 부모보다 작더라도 스크롤바 무조건 생김
  • Overflow-x:hidden; y축에만 스크롤바
  • Overflow-y:hidden; x축에만 스크롤바
  • Overflow:auto; 자식이 부모보다 클 때만 스크롤바 생성
    overflow - 참고 영상

💡 CSS 작업 tip

  • header, footer는 한번 만들어 놓으면 활용 가능하니 먼저 작업
  • html 마크업 잔뜩 해놓고 css 넘어가기 보다 차근차근
  1. 전체적인 덩어리 나누기
  2. background color, background image 이용하여 시각적으로 영역 확인
  3. 기본 레이아웃 스타일만 짠다. 내용 작성 전에 공간부터 마련하자.
  4. 요소, type selector 초기화해서 재료 손질
    (inherit, initial(IE박멸), unset, margin 0, padding 0)
  5. class를 사용하여 작업 시작

💡 이건 몰랐지

  • ID 선택자는 전체 페이지 중 유일한 이름,
    하지만 시각적인 요소를 체계적으로 컨트롤할 수 없어 css에서 유용하지 못함
    단순히 우선순위를 높이기 위해서 쓰기보다 용도에 맞게 사용하는 것이 좋음

  • margin : unset;
    알아서 결정시켜줌

  • 결합자(combinator)는 스타일 우선순위에 영향을 주지 않음.

  • 🧐 아래는 다시 이해해야하는 내용

  • width:100%; = width:auto;
    엄밀하게 말하면 틀린 말. 오토는 마진을 포함해서 계산함, 좀 더 유연한 개념

profile
생각이 길면 용기는 사라진다.

0개의 댓글