[Day +54 / CSS]CSS 기초(10. 레이아웃 스타일(배치) , 11. 레이아웃 스타일(flex), 12. 레이아웃 스타일(grid))
210907 화 10) 레이아웃 스타일(배치) 배치 관련 스타일 -position 속성 -static : 일반적인 문서 흐름에 따라 배치(기본 값). top, right, bottom, left, z-index 등의 속성이 아무런 영향도 주지 못함. -relative : 일반적인 문서 흐름 따라 배치. 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용함 다른 요소에는 영향을 주지 않아 공간 차지는 static일 때와 같음 -absolute : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음. 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치되며 top, right, bottom, left가 위치 결정 -fixed : 일반적인 문서 흐름에서 제외되며 ..
[Day +53 / CSS]CSS 기초(7. 테두리 스타일, 8. 레이아웃 스타일(인라인 블럭), 9. 레이아웃 스타일(여백))
210906 월 7) 테두리 스타일 레이아웃 스타일 width와 height 내용이 차지하고 있는 영역의 크기를 조절할 수 있는 속성 고정 크기 가변 크기 화면 배치 방법 변경 블럭 요소와 인라인 요소의 속성을 변경하여 배치 방식을 변경할 수 있다. 블럭 요소 : 한 줄 전체 차지하는 요소. 한 줄에 여러 요소가 올 수 없는 요소. Ex. div, p, hn, ul, ol, form, hr, table, fieldset, ... 인라인 요소 : 한 줄에서 일부분만 차지하는 요소. 한 줄에 여러 요소가 올 수 있는 요소. Ex. span, img, input, textarea, lable, button, br 두 요소의 특징 블럭 요소는 줄 바꿈 발생, 인라인 요소는 발생하지 않음 블럭 요소는 width와..
