https://codepen.io/mynameisc1206/pen/LYJJLLK?editors=1100
차단하다
…
codepen.io
https://codepen.io/mynameisc1206/pen/BaOOZGd
블록, 블록 예제
…
codepen.io
⁕div – block , width-auto = 부모만큼 W를 상속합니다.
⁕ 속성 값을 조정하면 기본값인 자동이 사라집니다.
1. 블록 요소 대표 태그 div
2. 너비가 자동이면 100% 작동합니다.
3. 너비가 아주 작아도 한 줄에 하나만 나타납니다.
4. a/span/img/::before/::after를 제외한 모든 태그는 display: 블록입니다. (버튼 제외)
https://codepen.io/mynameisc1206/pen/wvEEqKm?editors=1100
줄을 서서
…
codepen.io
https://codepen.io/mynameisc1206/pen/YzOOxZV?editors=1100
인라인 블록
…
codepen.io
https://codepen.io/mynameisc1206/pen/NWLLvze?editors=1100
인라인 및 인라인 블록 예제
…
codepen.io
(인라인)
1. 대표적인 인라인 태그 스팬
2. 너비와 높이를 조정할 수 없습니다.
3.폭: 자동=0
4. 높이: 자동 = 0
– auto = 0 – 하위 요소의 크기를 가집니다.
5. /span/img/::before/::after가 있습니다.
(인라인 블록)
(inline-block은 요소들을 한줄로 정리하기 위해 나온 속성값입니다.)
1. 인라인 블록은 인라인 요소와 블록 요소의 장점을 합친 것이라고 생각하시면 좋습니다.
2. 인라인 블록은 알 수 없는 공백(좌우, 하단) 생성 – 빈 값 측정 불가
3.폭: 자동=0
4. 높이: 자동 = 0
인라인 요소의 장점: 서로 옆에 나타나는 Hanzl 요소의 장점.
블록: 너비와 높이 값을 설정할 수 있다는 장점이 있습니다.
⁕ 스페인의 전) 스팬-1
⁕css를 작성할 때 속성 값 / /를 접두어로 지정해야 합니다.
https://codepen.io/mynameisc1206/pen/QWVVqGw?editors=1100
상단 및 하단 요소의 이름
…
codepen.io
html(트리 모양의 드롭)
=> 몸
=> 섹션 / 기사
=>등/등/등/…..
1. 하위 항목은 상위 항목 위에 배치됩니다.
2. 자식의 기본 시작점은 위에 붙은 부모의 왼쪽부터 시작합니다.
– 위와 같은 상황이 발생하지 않는다면 태그에 기본적으로 포함된 속성을 확인해보세요!
https://codepen.io/mynameisc1206/pen/gOddGEY
상위 요소 > 하위 요소
…
codepen.io
https://codepen.io/mynameisc1206/pen/BaOOmaj
상위 요소 = 하위 요소
…
codepen.io