🤓
빔캠프의 이종찬 강사님 수업을 들었다!
공부하다보면 상속 속성을 가지는 것, 가지지 않는 것,
인라인 레벨인 것, 블록 레벨인 것이 뭔지 다 습득할 수 있겠지~
지금 어떤 속성을 가지고 있는지 다 알면... 그건 천재다!
🥵 하지만 예외는 있다...
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)
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;
으로 하자! 망할 인터넷 익스플로러 때문 ^-^!
예방 방법 ) 부모에게
overflow:hidden;
또는
padding:1px;
설정
자손영역이 부모영역보다 클 때 어떻게 보여줄지 지정하는 속성
Overflow:visible;
기본값Overflow:hidden;
부모안에 자식이 쏙Overflow:scroll;
스크롤바 / 자손이 부모보다 작더라도 스크롤바 무조건 생김 Overflow-x:hidden;
y축에만 스크롤바Overflow-y:hidden;
x축에만 스크롤바 Overflow:auto;
자식이 부모보다 클 때만 스크롤바 생성ID 선택자
는 전체 페이지 중 유일한 이름,
하지만 시각적인 요소를 체계적으로 컨트롤할 수 없어 css에서 유용하지 못함
단순히 우선순위를 높이기 위해서 쓰기보다 용도에 맞게 사용하는 것이 좋음
margin : unset;
알아서 결정시켜줌
결합자(combinator)
는 스타일 우선순위에 영향을 주지 않음.
🧐 아래는 다시 이해해야하는 내용
width:100%;
= width:auto;
엄밀하게 말하면 틀린 말. 오토는 마진을 포함해서 계산함, 좀 더 유연한 개념