전체 글291 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. HTML Table 다음과 같은 형태의 표를 만들고 싶다면 어떻게 해야할까? 태그를 사용하면 된다. table에서 자식 태그로 tr을 쓰면 row가 생성된다. tr의 자식태그로 td를 쓰면 cell 하나씩 만들 수 있다. 위 예제를 만드는 코드는 다음과 같다. css 설명 외측 테두리 선을 위해서 table{border: 1px solid black} table{ padding: 10px} 는 효과가 없음. (border-collapse: collapse 때문에 ) 기본 table이 생성되면 기본 생성되는 모양을 보면 엑셀의 표 형태가 아니다. 이를 위해서 table{border-collapse: collapse} 설정 테두리 내부 선을 위해서 td{border:1px solid} 셀 내부 여백을 위해 td{padding:.. 2020. 5. 13. CSS hover transition event 위와 같은 박스에 마우스를 올리면 아래와 같은 파란 선이 왼쪽에서부터 시작하여 0.2초안에 완성되고 싶을 때 어떻게 해야할까? 결과적으로 보여질 파란선에 대한 html, css 코드를 완성을 한 후 초기 설정을 width:0 로 한다. 이 때, 가상 선택자를 사용하면 css만으로 파란선에 대한 코드를 완성할 수 있다. hover 했을 때 width:100%로 주고, 가상선택자에 transition으로 시간을 0.2s로 설정하면 완성된다. 아래 코드를 보면서 다양한 변경을 해보면 이해될 것이다. 2020. 5. 12. 이전 1 ··· 45 46 47 48 49 50 51 ··· 73 다음
