List 5

글자에 테두리 만들기

가끔 멋드러진 홈페이지를 보면 빵꾸 뚫린 글자를 볼 수 있다.어떻게 하는지 찾아봤더니... - HTML산타와 토미토미와 산타 - CSS/* reset */h2 { color: #fff;}/* text-shadow ver. */h2.shadow { text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;}/* stroke ver. */h2.stroke { -webkit-text-stroke: 1px #000;}text-shadow의 경우 좌, 상, 우, 하로 돌려서 그림자를 주는 것이다.stroke의 경우 webkit 지원이므로 지원되지 않는 브라우저도 있다.  text-shadow ver.산타와 토미stroke ver.토미와 산타">text-shad..

Study/CSS 2025.04.10

:after와 ::after의 차이(가상클래스와 가상엘리먼트)

버전차이CSS2에서는 :after로 사용, CSS3에서는 ::after로 사용한다.:을 사용하는 것들에는 가상클래스와 가상엘리먼트가 있는데 이 둘을 구분하기 위해 CSS3부터 바뀌었다. 여기서 잠깐!❓ 가상클래스와 가상엘리먼트의 차이?❗ 가상클래스란? 실제로 존재하는 요소에 클래스를 부여해 CSS를 제어❗ 가상엘리먼트란? 존재하지 않는 것을 만들어 CSS를 부여 그렇다면 가상클래스와 가상엘리먼트에는 어떤 것이 있을까? /* 가상클래스 */a:hover {} /* 해당 요소에 마우스를 올렸을 때 */a:active {} /* 해당 요소를 클릭했을 때 */input:checked {} /* input type이 checkbox나 radio일 경우 체크된 상태의 스타일*/input:required {..

Study/CSS 2025.04.10

솟선생님,,, 여백없는 정렬이 하고 싶어요...

홍홍홍... 제가 만들어드리죠... 채치수 주장 권준호 정대만 송태섭 서태웅 강백호 이정환 주장 전호장 신준섭 윤대협 황태산 김수겸 선수 겸 감독 이명헌 주장 최동오 김낙수 신현철 정우성 신현필기본 HTML 구조첫 번째 ul은 inline-block로 정렬하기두 번째 ul은 inline-block로 정렬 후 요소들간의 여백없애기세 번째 ul은 float로 정렬하는 방식을 사용할 것이다!  ul > li { list-style: none; width: 33.3333%; margin: 0 auto 10px; padding: 10px; font-size: 1rem; b..

Study/CSS 2025.04.10

드래그 시 생기는 블록 색상 바꾸기

::selection { background:#e89090; color: #FFF; text-shadow: none;}::-moz-selection { background:#e89090; color: #FFF; text-shadow: none;}::-webkit-selection { background:#e89090; color: #FFF; text-shadow: none;}css에 위 코드를 작성하면 드래그시 지정되는 색상이 변경된다.그 밖의 다른 속성도 사용하고 싶다면 추가해서 쓰면 된다.나는 배경색만 변경하고 싶어서 배경색만 원하는 색상으로 변경했다.  아래 변경 후 모습 출처 : https://blastic.tistory.com/229

Study/CSS 2025.04.10