본문 바로가기

CSS7

[날마다 3분 CSS] 가상요소 선택자 ::before ::after 가상 요소 선택자(가상 클래스 선택자) ::before, ::after 특징 가상 요소는 css를 통해서 가상의 element를 추가하는 코드이다. 이미 작성된 HTML에 새로운 스타일을 주기 위해서 가상 요소를 추가해서 사용을 할 수 있다. 내용의 앞( ::before )과 뒤( ::after )에 콘텐츠를 추가한다 content라는 속성이 없더라도 추가하고 봐야한다, 없으면 동작하지 않음 특정 요소의 앞(::before)이나 뒤(::after)에 지정한 내용(텍스트 또는 이미지)을 추가할 수 있다. 인라인 요소이다. ( = 넓이/높이 값이 지정되지 않는다 ) content 속성 normal: 아무것도 표시하지 않는 기본값 string: 문자열 생성 image: 이미지나 비디오를 불러올 수 있으나 크기.. 2022. 10. 6.

[날마다 3분 CSS] 가상클래스 :active :active는 CSS의 가상 클래스로 웹 브라우저에서 사용자가 활성화한 요소(버튼 등)를 나타낸다. 즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다. ( 한 요소에서 마우스를 클릭한 후 떼지 않고 꾹누르고 있으면 계속 활성화 되어있는 것이다.) 아래는 마우스 클릭 시 박스색깔이 파란색으로 바뀌며 넓이가 300px로 커지는 active 효과입니다. HTML 삽입 미리보기할 수 없는 소스 css 선택자뒤에 :active 붙여 코드를 작성합니다. HTML 삽입 미리보기할 수 없는 소스 .box2와 .box:active와 비교했을때 .box:active에서 변경사항인 width, background-color 값이 사용자 마우스 클릭 시 활성화되어 색깔과 모양이 변하게 된다. 💫실습 - 주황색 박스.. 2022. 10. 4.

[날마다 3분 CSS] 가상클래스 :hover :hover는 CSS의 가상 클래스로 웹 브라우저에서 사용자의 마우스가 요소에 올라가면 활성화된다. 아래는 마우스를 올리면 넓이와 높이가 커지며 박스색깔이 빨간색으로 바뀌는 hover 효과입니다. HTML 삽입 미리보기할 수 없는 소스 css 선택자뒤에 :hover 붙여 코드를 작성합니다. HTML 삽입 미리보기할 수 없는 소스 위에서 보듯이 마우스가 올라가기전( .box1 ) css와 마우스가 올라간 후( box1:hover )의 css를 볼 수 있다. 넓이/높이 100px의 오렌지 색깔 박스가 마우스가 올라갔을 때 넓이/높이 300px의 빨간색 박스로 변하는 코드이다. 이렇게 마우스가 올라갔을 때 와 올라가지 않았을 때 전과 후의 상태를 정의하여 요소가 변하는 효과를 줄 수 있는 것이다. 💫실습 - .. 2022. 10. 4.

이전 1 2 다음

티스토리툴바