내마음대로만들어보자/CSS25 가상요소 (::before , ::after) 1.가상 요소와 가상 클래스 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있다. 2. 가상요소 종류 가상 요소 설명 ::before 요소 내용 앞쪽에 새 컨텐츠를 추가. ::after 요소 내용 끝에 새 컨텐츠를 추가. ::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택. ::marker 목록 아이템 앞에 붙는 마커를 선택. ::first-letter 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택. ::first-line 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택. 2. 적용 예.. 2022. 4. 11. box-sizing 1. box-sizing box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다. 박스 요소의 width 값은 margin, padding, border 값을 포함하여 계산합니다. box-sizing: border-box로 설정할 경우 박스 요소의 width 값은 margin, border 값을 포함하여 계산합니다. padding 값은 제외... 2. box-sizing 문법 /* 기본 속성 */ box-sizing: content-box;(기본값) → border, padding 값이 포함되지 않는다. box-sizing: border-box; → border, padding 값이 포함해서 width값을 계산한다. /* 기본 값으로 설정합니다. */ box-sizing: initial; /.. 2022. 4. 10. IR효과기법 /* IR효과(IR기법) */ /* 이미있는 이미지의 대체 텍스트를 제공 하는경우 */ .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미 있는 이미지의 대체 텍스트를 이미지가 없어도 대체 텍스트를 보여주고자 할때 */ .ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 대체텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때*/ .ir_su {overflow: hidden; position: absolute; width: 0; height:.. 2022. 4. 10. transform 1. transform 속성 컨텐츠 요소를 이동(translate), 회전(rotate), 확대(scale), 기울기(skew) 등의 효과를 줄 수 있다. 애니메이션 작업 시 가장 많이 쓰는 오쇼이며, 요소를 이동시키거나 회전 시킬 수 있고 원근점(perspective)를 사용하여 3D까지 구현 할 수 있다. 즉, 요소의 움직임을 표현한다. 2. 기본문법 transform : none | matrix() | translate() | translateX() | translateY() | scale() | scaleX() | scaleY() | rotate() | skew() | skewX() | skewY() | matrix3d() | translate3d() | translateZ() | scale3d(.. 2022. 4. 10. 이전 1 2 3 4 5 ··· 7 다음