웹(web)/프론트엔드-css27 CSS background-size background-size syntax은 다음과 같다. = [ | auto ]{1,2} | cover | contain = | background-size는 백그라운드로 적용할 부분의 크기를 지정한다. 박스 사이즈 지정과 같이 width, height를 주면 된다. 단, 박스 크기는 이미 정해져 있고 그 배경으로 사용할 것이기 때문에 배경의 크기가 박스 크기를 넘으면 보이지 않는다. cover, contain을 사용해도 되나 제공하지 않는 브라우저 버전이 있으므로 width, height 형태로 명시적으로 적어주는 것이 낫다. auto: 원본의 크기로 설정됨. length: 1px 이나 100% 같은 수치로 입력 default 값은 auto auto이다. 즉, 원본의 크기가 사용된다. 배경이 들어갈 박.. 2020. 5. 14. CSS Stacking order(priority between Position & Float) Q. position속성을 사용한 요소와 float속성을 사용한 요소가 동일한 위치에 있다면 어떻게 될까? A. 정답은 position 속성을 사용한 요소가 앞에 온다. Q. 그러면 float을 사용한 요소가 앞에 올수는 없을까? A. 답은 position을 사용한 요소에 z인덱스를 -1을 주면 된다. 즉, position의 default z-index는 0 인 것이다. Q. position 속성을 사용한 요소가 두 개인데 겹치는 경우 누가 앞에 올까? A. html 코드 상에서 뒤에 오는 요소가 앞에 나온다. css는 영향을 미치지 못한다. Q. position 속성을 사용한 요소가 겹칠 때 html 상에서 앞에 있는 요소를 제일 앞쪽에 위치 시키려면 어떻게 해야할까? A. html 상에서 먼저 온 요.. 2020. 5. 13. CSS hover transition event 위와 같은 박스에 마우스를 올리면 아래와 같은 파란 선이 왼쪽에서부터 시작하여 0.2초안에 완성되고 싶을 때 어떻게 해야할까? 결과적으로 보여질 파란선에 대한 html, css 코드를 완성을 한 후 초기 설정을 width:0 로 한다. 이 때, 가상 선택자를 사용하면 css만으로 파란선에 대한 코드를 완성할 수 있다. hover 했을 때 width:100%로 주고, 가상선택자에 transition으로 시간을 0.2s로 설정하면 완성된다. 아래 코드를 보면서 다양한 변경을 해보면 이해될 것이다. 2020. 5. 12. CSS drop down menu 평소에는 Products, Sales만 있는 상태이다가 Products에 마우스를 올리면 아래로 하위 메뉴가 나오게 하는 예제이다. 위와 같은 드롭다운 메뉴를 만들기 위해서 display, position을 활용한다. products의 자식 태그인 ul의 css 속성으로 display: none;으로 설정한다. 이후 products:hover ul{display: block} 을 하여 드롭다운 메뉴가 나타나게 한다. 드롭다운 메뉴의 position 속성은 absolute을 사용하여 나타났을 때 레이아웃에 영향을 안 미치도록 해야 한다. 위의 예제 코드는 다음과 같다. 2020. 5. 12. 이전 1 2 3 4 5 6 7 다음
