반응형 개발/CSS34 position : absolute 이전에 absolute는 relative안에서 움직인다는 글을 썼다. https://wnsdufdl.tistory.com/174?category=1012887 position : relative와 absolute relative안에서 absolute가 움직인다. 1. relative : 화면전체 , absolute : 위에서 20% 내려옴(top:20%;) 2. relative : 위에서 400px내려옴(top : 400px;) , absolute : 위에서 20% 내려옴(top:20%;) 3. rela.. wnsdufdl.tistory.com 오늘 position:absolute를 적용하면 다른 엘리먼트들이 position:absolute를 적용한 엘리먼트의 공간을 무시한다. 글로쓰니 뭔소린지 모르겠다.. 2021. 11. 6. position : relative와 absolute relative안에서 absolute가 움직인다. 1. relative : 화면전체 , absolute : 위에서 20% 내려옴(top:20%;) 2. relative : 위에서 400px내려옴(top : 400px;) , absolute : 위에서 20% 내려옴(top:20%;) 3. relative : 왼쪽에서 100px 밀렸을때 (left:100px) , absolute : 경계 왼쪽으로 -60px이동 (left : -60px) 2021. 10. 17. 특정 이미지 바깥 배경 흐리게 만들기 다음과 같이 특정 이미지 바깥의 배경을 흐리게 만드는 방법이 있다. HTML Toggle 토글을 클릭하세요 CSS 아래 CSS코드의 가장 밑에 있는 .hiddenback 클래스가 box-shadow 효과를 준다. 태그에 .hiddenback 클래스를 추가해주면 div태그 바깥의 화면이 흐려진다. box의 주변에 그림자를 넣는 방식이다. 모니터가 9999px보다 크다면 더 큰 px을 입력해야 한다. .box { /* border : 1px gray solid; */ width : 100px; height:100px; position : fixed; top : 100px; background-color :transparent; } /* 바깥화면 흐리게하기 */ .hiddenback{ position : fi.. 2021. 9. 15. CSS flex box 1. flex box flex { display : flex } : 항목이 행으로 나열된다. div 태그는 한줄을 다 차지하는 태그이지만, { display : flex } 속성을 추가하면, height와 width가 내용의 크기만큼만 늘어난다. inline-flex 컨테이너가 컨테이너 주변 요소들과의 조화를 생각할때 사용하면 된다. flex를 추가하면 컨테이너가 한 줄 전체를 차지한다. .container { background-color: aqua; display: flex; /* display: inline-flex; */ } inline-flex를 차지하면 컨테이너는 내부 요소들의 width만큼만 자리를 차지한다. .container { background-color: aqua; /* displa.. 2021. 8. 1. 이전 1 ··· 5 6 7 8 9 다음 반응형
