반응형

프론트엔드 (Front-End)/CSS 4

<CSS> active, hover, press 차이

active, hover, press 차이 CSS에서 :active, :hover, 그리고 :focus는 요소에 사용자 상호작용에 따라 다르게 스타일을 적용하는 데 사용되는 가상 클래스(가상 선택자)입니다. 이들 각각의 동작과 차이점은 다음과 같습니다: hover : 마우스를 올리고 있는 동안 active : 마우스를 클릭하고 있는 동안 visited : 마우스를 한번 클릭 한 이후 :active: - :active 가상 클래스는 요소가 활성화되었을 때 적용됩니다. ⓐ 이는 주로 클릭한 순간에 발생합니다. ⓑ 예를 들어, 버튼을 클릭하면 버튼이 활성화되어 눌린 상태를 나타내기 위해 :active 스타일을 적용할 수 있습니다. ```javascript button:active { background-col..

<CSS> border-collapse 속성

border-collapse는 테이블 리스트의 테두리와 셀(td)의 테두리 사이의 간격 처리 방식을 정하는 속성이다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 border-collapse: separate | collapse | initial | inherit *separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다. *collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 제거한다. 겹치는 부분은 한 줄로 나타낸다. *initial : 기본값으로 설정한다. *inherit : 부모 요소의 속성값을 상속받는다.

<BootStrap> css 공백 주는 법

부트스트랩에는 요소의 모양을 수정하기 위한 다양한 속기 응답 여유 및 패딩 유틸리티 클래스가 포함되어 있다. margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음 border : 박스의 테두리 padding : 테두리와 content간의 간격 content : 엘리먼트 안에 포함되는 컨텐츠 ⓐ M/P M : Margin P : Padding ⓑ t , b , l , r ,x , y t : top b : bottom l : left r : right x : x축 -> left , right y : y축 -> top , bottom ⓒ 0, 1, 2, 3, 4, 5, auto 0 : 0 1 : .25rem( font-size가 16px이면, 4px) 크기 2 : .5rem( fo..

[CSS] overflow 속성

overflow 속성 은 내용이 요소의 크기를 벗어났을 경우 어떻게 처리할지에 대한 css 속성이다. overflow: visible | hidden | scroll | auto | initial | inherit initial : 기본값으로 설정. visible : 박스를 넘어가도 보여준다. hidden : 박스를 넘어간 부분은 보이지 않는다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤이 생긴다. auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤이 생긴다. inherit : 부모 요소의 속성값을 상속 받는다.

반응형