뇌 채우기 공간

inline span{ width:100px; height: 300px; background: gray; margin: 30px; position: absolute; } 인라인 요소인 span태그에 position을 넣으면 블럭요소로 바뀐다.

어떤 요소가 더 위에 쌓이는지? 1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관) 2. position이 모두 존재한다면 z-index값이 높을수록 위에 쌓임 3. postion 속성의 값이 있고, z-index 값이 같다면 html의 마지막 코드일 수록 위에 쌓임 position> z-index> html마지막 코드 1 2 3 4 5 .box-group{ display: flex; } .box-group .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 30px; font-size: 30px; display: flex; justify-conte..

position 요소의 위치 지정 방법의 유형(기준)을 설정 속성값 static (기본값): 유형의 기준이 없음 , 배치 불가능 relative: 요소 자기 자신이 원래 있었던 위치 기준으로 배치 absolute: 위치 상 부모 요소를 기준으로 배치 fixed: 브라우저(뷰포트)를 기준으로 배치 sticky : 스크롤 영역을 기준으로 배치 .parent{ width:400px; height: 300px; border: 4px dashed lightgray; position: relative; } .child{ width: 150px; height: 100px; background: tomato; border: 4px dashed red; position: absolute; top: 50px; left:1..

■float 요소에 float속성을 적용하면 적용된 요소 주변으로 text가 흐르게 된다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining ess..

overflow 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을때, 내용의 보여짐을 제어 visible : 넘친 부분을 자르지 않고, 그대로 보여줌 hidden : 넘친 부분을 잘라내고, 보이지 않도록 함 scroll : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 ( 무조건 스크롤 바 만듬) auto : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 1 2 3 .parent{ width:300px; height: 250px; border: 4px solid; overflow: scroll; } .parent .child{ width: 100px; height:100px; background: blue; border: 4px solid red; display: flex; j..