UI 개발의 모든 것/CSS35 가상 요소(Pseudo Element)란? ★가상 요소(Pseudo Element)란?? 또는 의사 요소!! 앞에 ' :: ' 시작함 선택자::의사요소이름 {속성: 속성값;} /*문법*/ ::before 란?? 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입합니다. ::after 란?? 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입합니다. >>before와 after를 사용할 때에는 content=' '라는 속성이 필요합니다. 특정 요소의 내용(content=' ') 바로 앞 또는 뒤에 삽입할 때 사용하기 때문이다. >> content=" " 란? Html 문서에 정보로 포함되지 않은 요소를 css에서 새롭게 생성시켜주는 가짜 속성입니다. * content=" "대표적으로 사용되는 속성 Normal .. 2023. 4. 18. 가상 클래스(Pseudo Class)란?? ***가상 클래스(Pseudo Class)란?? 또는 의사 클래스 클래스 또는 태그 다음에 ' : ' 시작하는 가상 클래스들!! 선택자:의사클래스 {속성: 속성값;} /*문법*/ 1. 동적 의사 클래스(dynamic pseudo-classes) ▶링크 선택자 :link (기본 상태) 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. :visited 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함 a:link{ color: black; } a:visited{ color: orange; } ▶반응 선택자 :active 사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함. :hover 사용자의 마우스 커서가 링크 위에 오라.. 2023. 4. 18. 순수 CSS 이미지 hover 효과 CSS만으로 호버 효과를 낼 수 있다는 거!! 다소 많은 코드가 필요하지만 일반적인 호버 말고 애니메이션 같지만 아니 호버 효과를 내 보세요^^ http://imagehover.io/ Imagehover.css - A Pure CSS Image Hover Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB. www.imagehover.io 도움이 되는 사이트도.. 2023. 4. 12. 콘텐츠를 가로, 세로 중앙 정렬하는 방법들~ 이 주제를 가지고 온 이유는 브라우저에서 콘텐츠를 전체로 열었을 때 중앙 정렬까지는 다 코딩할 수 있다고 생각한다. 프로젝트 디자인 시안이 반응형으로 전체 브라우저일 경우 중앙 정렬 있었고 아니것도 있다. 모바일로 넘어갈 때 스크롤이 생기면서 글이 위에서부터 보여야 하는 디자인 시안이 전달이 되었다. 정말 프로라고 생각하고 아래와 같이 사용해서 중앙 정렬을 시켰다. position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; 그리고 브라우저를 줄렸다. 근데 단순하게 아니 당연하게 브라우저가 작아지면 첫 문장부터 보일 거라고 생각했다. 정말 당연하게~~ 근데 아니네;;; 브라우저가 작아졌을 때 제일 첫 문장이 아니 중앙의 문구가 보이.. 2023. 3. 23. box-sizing 속성 "box-sizing"의 값은, "content-box"가 기본값으로 "padding-box", "border-box"가도 있다 box-sizing : content-box CSS 표준에 정의되어 있는 기본값이다. width 와 height 속성은 컨텐츠만 포함하며, padding, border, margin 은 포함하지 않는다. box-sizing : padding-box width 와 height 속성이 padding 을 포함한다. border, margin 은 포함하지 않는다. box-sizing : border-box width 와 height 속성이 padding, border 를 포함한다. margin 은 포함하지 않는다. 이 값은 IE Quirks mode 의 구현과 동일하다. 주의할 점 -.. 2023. 3. 14. 이전 1 다음 728x90 반응형
