appmaster

absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨. (static, relative, sticky랑 상관이 없다) 지정값 변화값 inline block inline-block block inline-table block table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block flex flex/ position 속성 효과없음 inline-flex inline-flex/ position 속성 효과 없음 그외..

요소 쌓임 순서(Stack order) 요소가 쌓여있는 순서를 통해 어떤요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(Z축) 1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관) 2. position이 모두 존재한다면 z-index 속성의 숫자 값이 높을 수록 위에 쌓임 3. position속성의 값이 있고, z-index 속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소)) position > z-index > HTML 마지막코드 1 2 3 4 5 사진에서 보면 알 수 있듯이, 가장먼저 시작한 1번박스는 제일 밑에있고 맨뒤에있는 5번은 가장 위에 있는것을 알 수 있다. 하지만 CSS로 쌓이는 순서를 변경 할..

1. relative 1 2 3 .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 30px; } .relative{ position: relative; bottom: 20px; right:30px; } relative의 문제점 2 3 .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-..

position 요소의 위치 지정 방법의 유형(기준)을 설정 속성 값 값 의미 기본값 static 유형(기준) 없음/ 배치 불가능 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; border-radius: 10px; position: absolute; /* ab..

float 속성이 적용되지 않도록 지정(해제) 속성 값 값 의미 기본값 none 요소 띄움 허용 none left 왼쪽 띄움 해제 right 오른쪽 띄움 해제 both 양쪽(왼쪽, 오른쪽) 모두 띄움 해제

요소를 좌우 방향으로 띄움(수평 정렬) 속성 값 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 article .picture{ width: 200px; height: 150px; background: tomato; float:left; margin-right: 20px; margin-bottom: 10px; } article .text{ clear:left; /* clear는 흐르는 부분을 없애버린다. */ } clear: left는 float의 흐르는 부분을 없애고, 왼쪽정렬로 하겠다는 뜻이다. 수평정렬 .box{ width: 150px; height: 100px; background:tomato; color:white; font-size:30px;..