🤓
빔캠프의 이종찬 강사님 수업을 들었다!
공부하다보면 상속 속성을 가지는 것, 가지지 않는 것,
인라인 레벨인 것, 블록 레벨인 것이 뭔지 다 습득할 수 있겠지~
지금 어떤 속성을 가지고 있는지 다 알면... 그건 천재다!
블록 레벨
- 수직 나열
- 영역 적용 가능
- 자식 요소로 블록 레벨, 인라인 레벨 가질 수 있음.
- 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 넘어가기 보다 차근차근
- 전체적인 덩어리 나누기
- background color, background image 이용하여 시각적으로 영역 확인
- 기본 레이아웃 스타일만 짠다. 내용 작성 전에 공간부터 마련하자.
- 요소, type selector 초기화해서 재료 손질
(inherit, initial(IE박멸), unset, margin 0, padding 0) - class를 사용하여 작업 시작
💡 이건 몰랐지
-
ID 선택자는 전체 페이지 중 유일한 이름,
하지만 시각적인 요소를 체계적으로 컨트롤할 수 없어 css에서 유용하지 못함
단순히 우선순위를 높이기 위해서 쓰기보다 용도에 맞게 사용하는 것이 좋음 -
margin : unset;
알아서 결정시켜줌 -
결합자(combinator)는 스타일 우선순위에 영향을 주지 않음. -
🧐 아래는 다시 이해해야하는 내용
width:100%; = width:auto;
엄밀하게 말하면 틀린 말.
오토는 마진을 포함해서 계산함, 좀 더 유연한 개념
글자가 가운데로 보이는 것 뿐이지
실제로는 박스는 그대로고 그 안에 있는 글자만 움직이는 것 뿐
안에 텍스트는 인라인 ..
<h1>으로 감싼다고 그게 블럭요소가 아니라 안에 텍스트는 인라인인것
