[HTML/CSS] 기초다지기 CSS(2) 속성 | 가상클래스 | 가상요소

💡CSS transition스타일 변경 시 부드럽게 전환호버링이랑 같이 사용선택자가 변화되는 것을 시간의 흐름을 줘 변화시키는 속성 ➡️속성 시간 속도 지연시간ease기본값느리게 시작한 다음 빠르게 전환한 다음 천천히 종료linear처음부터 끝까지 같은 속도로 전환ease-in가속느린 시작으로 빠른 끝(느린 느낌을 받을 수 있다)ease-out감속빠른 시작과 느린 끝(빠른 느낌을 받을 수 있다)ease-in-out느린시작과 느린 끝으로 전환 효과 지정cubic-bezier(n,n,n,n)3차 베지어 함수에서 자신의 값을 임의적으로 정함n에 숫자를 직접 넣어 커스 가상클래스(의사클래스 pseudo class)별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택 가능:hover마우스를 롤오버 했을..

  • format_list_bulleted 구름 x 딥다이브 풀스택/FE
  • · 2025. 9. 23.

[HTML/CSS] 기초다지기 CSS (1) 기본구조 | 속성

💡CSSCSS란?사용자에게 문서를 표시하는 방법을 지정하는 언어(스타일, 레이아웃 등)웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할HTML은 문장의 구조를 만들고 CSS는 문장을 브라우저에 어떻게 보여줄지를 지정하는 언어➡️구조 = HTML, 디자인 = CSS 사용하는 방법1️⃣인라인 스타일 : HTML 태그 안에서 style 속성을 이용2️⃣내부 스타일시트 : 태그를 통해 HTML문서 내부에서 이용( 안에 작성)3️⃣외부 스타일시트 : 별도의 CSS파일을 분리하여 HTML문서에 연결.css파일 작성 후 태그를 이용해 연결css파일에는 .a-button{스타일링 작성}클래스는 . ID일 경우 # 스타일적용 우선순위인라인 스타일 > 내부/외부 스타일시트 > 웹브라우저 기본스타일*혼합되어 사용할 ..

  • format_list_bulleted 구름 x 딥다이브 풀스택/FE
  • · 2025. 9. 19.