반응형 개발/CSS33 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. 웹 폰트 사용법 웹 폰트 사용자의 컴퓨터에 설치 여부와 상관없이 온라인으로 다운받아 사용할 수 있는 폰트들이다. 웹 폰트는 font-family 속성을 사용하지만, @font-face 라는 CSS 명령어를 사용해서 웹 브라우저에게 해당 서체를 다운로드 할 것을 알리면서 사용할 수 있다. 사용법 1. 아래 홈페이지에서 원하는 웹폰트를 다운받고 CSS파일이 있는 폴더에 저장한다. https://fonts.google.com/?subset=korean [ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com ](https://fonts.google.com/?subset=korean) 나는 왼쪽에 있는.. 2021. 7. 26. 이전 1 ··· 5 6 7 8 9 다음 반응형
