CSS13 Pseudo Class & Element Pseudo Class 가상클래스 : 선택하고자 하는 HTML 요소의 특별한 상태 (state)를 명시할 때 사용한다. 문법 선택자 : 가상클래스이름 {속성: 속성값} >>> a: hover { color : orange; } 대표적인 CSS Pseudo Class :link - 아직 방문하지 않은 요소를 나타낸다. href 속성을 가진 중 방문하지 않은 모든 요소를 선택한다. :visited - 사용자가 방문한 이력이 있는 링크를 나타낸다. :active - 사용자가 활성화 한 요소(버튼 등) 를 나타낸다. :hover - 사용자의 마우스 포인트가 요소 위에 올라가 있으면 활성화 된다. :focus - 양식의 입력 칸 등 포커스를 받는 요소를 나타낸다. 보통 사용자가 요소를 클릭 또는 Tab 키로 선택.. 2024. 1. 24. Background DOCTYPE html> Backgound .red { background-color: #ff0000c9; width: 120px; height: 120px; } .image { background-image: url('../assets/images/floral.jpg'); background-repeat: repeat; background-position: top right; width: 200px; height: 400px; border: 1px solid black; display: inline-block; overflow-y: scroll; } .attachment-scroll { background-attachment: scroll; } .attachment-fixed { background-a.. 2024. 1. 24. Float 속성 | Position 속성 Float 속성 : HTML 요소에 float 이 적용되면 HTML 요소는 원래 흐름에서 벗어나 둥둥 떠다니듯이 배치가 된다. 인접한 텍스트 또는 인라인 요소가 그 주위를 자연스럽게 감싸게 한다. 자주 사용하는 float 속성 none : 기본값으로 요소를 띄우지 않음 left : 왼쪽에 띄움 right : 오른쪽에 띄움 inherit : 부모요소로부터 상속함 intial : 기본값으로 설정함 clear 속성 float: left; 혹은 float: right; 값을 취소한다. clear: none; - 기본값 clear: left; - 왼쪽을 취소 clear: right; - 오른쪽을 취소 clear: both; - 왼쪽, 오른쪽 둘 다 취소 Position : position 속성은 HTML 요소를 .. 2024. 1. 24. Display 속성 Display 속성 : HTML 요소를 어떻게 표시할지 결정한다. display: block → Block Level Element display: inline → Inline Level Element 기본 4가지 값 none : 요소를 보이지 않게 설정한다. visibility 속성을 hidden으로 설정한 것과 달리, 영역을 차지하지 않는다. block : 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보이니다. 문서에서 문단을 표시할 때 주로 사용한다. width, height 속성을 지정할 수 있다. div, p , h1~h6 태그 등이 해당한다. inline : 컨텐츠만큼 영역을 차지한다. block과 달리 줄바꿈이 되지 않고, width와 he.. 2024. 1. 24. 이전 1 2 3 4 다음
