어제 오늘 내일

CSS에서 태그를 사용하여 목록을 만들면 목록 앞에 점 또는 숫자가 보여집니다. ( 태그와 사용하면 점, 태그와 함께 사용하면 숫자) 이 점 또는 숫자의 색깔을 바꾸기 위해서 CSS의 ::marker 가상 요소를 사용할 수 있습니다. ::marker ::marker는 리스트 아이템 앞에 오는 마커를 선택하는 가상 요소입니다. 리스트의 점 색깔 바꾸기 하나 둘 셋 li::marker { color: red; } li::marker { color: red; } ::marker 가상 요소로 li의 마커를 선택하여 마커의 색깔을 변경하였습니다. 리스트의 점 대신 하트로 바꾸기 하나 둘 셋 li::marker { content: '❤ '; color: pink; } li::marker { ... } ::marke..

웹에서 알파벳의 대문자를 소문자로, 소문자를 대문자로 변환하는 방법은 2가지가 있습니다. Javascript를 이용하는 방법 [Javascript] 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) [Javascript] 문자열의 첫 글자만 대문자로 변환하기 CSS를 이용하는 방법 text-transform 여기서는 CSS를 이용하여 대소문자를 변환하거나, 첫글자만 대문자로 바꾸는 방법을 소개합니다. text-transform CSS의 text-transform 속성은 요소의 문자열을 대문자 또는 소문자로 표시하는 방법을 지정합니다. text-transform 속성 값 none uppercase : 텍스트를 대문자로 lowercase : 텍스트를 소문자로 capitalize : 각 단어의 첫글자를 ..

가상 요소란? (Pseudo-elements) CSS 가상 요소는, 선택자에 추가하는 키워드로, 선택한 요소(element)의 일부에만 스타일을 적용합니다. 즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용합니다. 다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작합니다. 가상 요소 사용법 가상 요소는, ::before, ::after, ::first-letter 와 같이 앞에 '::'를 붙여서 표기합니다. p::first-letter { color: blue; } 위 코드로 영역의 첫번째 글자를 파란색으로 지정할 수 있습니다. 가상 요소 종류 가상 요소의 종류는 다음과 같습니다. ::before ::after ::first-letter ::fi..