funfunweb

가상 클래스, 가상요소 비교

CSS에서 가상 클래스(Pseudo-classes)와 가상 요소(Pseudo-elements)는 비슷해 보일 수 있지만, 그 목적과 동작 방식에서 중요한 차이가 있습니다. 두 개념은 모두 HTML 문서에서 존재하지 않는 부분에 스타일을 적용할 수 있게 해 주지만, 각각 다르게 작동합니다.1. 가상 클래스 (Pseudo-classes)가상 클래스는 특정 상태나 조건을 만족하는 HTML 요소를 선택할 때 사용됩니다. 즉, 요소의 상태(예: 마우스 오버 상태, 포커스 상태 등)에 따라 스타일을 다르게 적용할 수 있습니다.주요 가상 클래스 예시:hover: 마우스가 요소 위에 올라갔을 때 스타일을 적용:focus: 요소가 포커스를 가질 때 스타일을 적용 (예: 입력 필드):active: 사용자가 클릭할 때 스타..

pseudo-element selector - ::before,::after,::first-letter,::first-line,::selection

CSS에서 가상 요소 선택자(Pseudo-element selector)는 특정 HTML 요소에 직접적으로 존재하지 않는 스타일을 적용할 수 있게 해주는 선택자입니다. 이러한 선택자는 실제 DOM 요소가 아닌, 요소의 일부를 선택하거나 그 요소의 가상적인 부분을 스타일링할 수 있도록 해줍니다.대표적인 가상 요소 선택자는 ::before, ::after, ::first-letter, ::first-line 등이 있습니다. 이들을 사용하면 HTML에 추가적인 마크업을 삽입하지 않고도 스타일을 개선할 수 있습니다.주요 가상 요소 선택자1. ::before::before는 선택한 요소의 내용이 렌더링되기 전에 가상 콘텐츠를 삽입하는 데 사용됩니다.주로 아이콘, 장식, 텍스트 등을 삽입할 때 사용됩니다.이 가상 ..

display:none, visibility:hidden 비교

display: none과 visibility: hidden은 둘 다 요소를 화면에서 보이지 않게 만드는 속성이지만, 그 동작 방식에서 중요한 차이점이 있습니다. 아래에서 두 속성의 차이점을 비교해 보겠습니다.1. display: nonedisplay: none을 적용하면, 해당 요소는 화면에서 보이지 않게 될 뿐만 아니라, DOM에서 완전히 사라진 것처럼 동작합니다.요소는 레이아웃에서 공간을 차지하지 않게 되며, 다른 요소들이 그 공간을 차지하게 됩니다.애니메이션, 이벤트 리스너 등도 영향을 받을 수 있습니다. 예를 들어, display: none으로 설정된 요소는 클릭 이벤트를 받을 수 없습니다.예시:div { display: none;}This will not be visible and will ..

display 속성

CSS의 display 속성은 HTML 요소가 페이지에서 어떻게 표시될지를 정의하는 중요한 속성입니다. 이 속성은 요소의 레이아웃 및 다른 요소와의 관계를 결정합니다. display 속성은 다양한 값들을 가질 수 있으며, 각 값에 따라 요소의 표시 방식이 달라집니다. 주요 값들을 살펴보겠습니다:1. blockblock 값이 적용된 요소는 블록 요소로 표시됩니다.기본적으로 새로운 라인에서 시작하며, 가로 너비는 부모 요소의 전체 너비를 차지합니다.예시: , , 등이 기본적으로 block 요소입니다.div { display: block;}2. inlineinline 값이 적용된 요소는 인라인 요소로 표시됩니다.요소는 새로운 라인을 시작하지 않고, 다른 인라인 요소들과 같은 라인에 나란히 표시됩니다.가로 ..

See the Pen template-columns by 정은 (@luchiaChoi) on CodePen. See the Pen grid-template-columns-fr by 정은 (@luchiaChoi) on CodePen. 2번째 열 2/4 비율 너비 See the Pen grid-template-columns: repeat(3, 1fr) by 정은 (@luchiaChoi) on CodePen.

클래스 이름을 변수에 담아서 사용할 수 있다. #{이름} 이럴 경우 에러가 생길수 있는데 이 경우 이 경우 아래처럼 적으면 잘 작동하지만 width:$n10 + $n20 + px; width:#{$n10+$n20} + px; 아래처럼 적으면 숫자를 문자로 인식하여 작동하지 않는다. width:100200px 로 나옴. width:#{$n10} + #{$n20} + px;

1. vscode 확장프로그램에서 sass 검색하여 complier 설치하기 2. 문서 작성 css 파일의 확장자는 .scss 연결은 css 3. 컴파일 시키는 방법 ctrl + shift + p