코딩/CSS5 [CSS] 글자에 테두리 넣는 방법 텍스트에 스트로크 넣는 방법 CSS를 이용해 글자에 테두리 효과를 주는 방법을 알아보겠습니다. 글자에 테두리를 넣어 사용자의 시선을 끌 수 있고, 텍스트의 가독성을 높이는 데도 도움이 됩니다. 이 글에서는 CSS를 활용해 글자에 테두리를 주는 방법을 확인해 보겠습니다. -webkit-text-stroke로 글자 외곽선 만드는 방법-webkit-text-stroke는 CSS에서 글자에 외곽선을 그려주는 속성입니다. 이 속성은 WebKit 기반 브라우저(예: Chrome, Safari, Edge 등)에서만 동작하며 글자의 외곽선 굵기와 색상을 지정할 수 있습니다. 이 속성을 사용하면 그림자 효과 없이도 선명한 글자 테두리를 만들 수 있습니다. // -webkit-text-stroke: ;h2 { color: white; -webk.. 2025. 4. 14. 반응형 웹 사이트를 구현하는 방법 반응형 웹은 하나의 웹 사이트에서 데스크톱, 스마트폰, 태블릿 등 다양한 디바이스로 접속할 때 디바이스 해상도에 맞는 화면을 보여주도록 하는 웹 디자인 기법 중 하나입니다. 스마트폰이나 태블릿 등이 보급되기 전의 웹 사이트들은 데스크톱 화면에 최적화되어 있어 스마트폰이나 태블릿으로 접속하면 사이트의 레이아웃이 깨지는 문제가 있었습니다. 반응형 웹은 다양한 기기에서 접속해도 최적화된 화면을 제공하기 위해 개발되었습니다. 미디어 쿼리 반응형 웹을 구현하기 위해서 CSS의 미디어 쿼리를 이용합니다. 미디어 쿼리는 웹페이지의 스타일을 다양한 기기와 화면 크기에 따라 조절할 수 있게 CSS에 도입된 기능입니다. 이를 통해 반응형 웹 디자인을 구현할 수 있습니다. 미디어 쿼리를 사용하면 다양한 해상도에서 스타일을 .. 2024. 1. 10. [CSS] css만 사용해 체크 박스로 토글 버튼 만들기 css만 사용해서 체크 박스로 토글 버튼을 만드는 방법입니다. html 코드입니다. input 태그를 checkbox 타입으로 만들어주고 id를 입력해줍니다. label 태그를 만들고 for에 input에 사용한 id를 입력합니다. label 태그 안에 토글 버튼에 사용할 부분을 만들어 줍니다. body { height: 100vh; display: flex; align-items: center; justify-content: center; } .toggle_bar { width: 120px; height: 60px; background-color: #ff4d4d; border-radius: 60px; position: relative; top: 0; left: 0; transition: all ease.. 2022. 11. 4. [CSS3]가상 요소 선택자 (pseudo-element) 정리 가상 요소 선택자 (pseudo-element) 정리 가상 요소는 자바스크립트 없이 HTML 페이지에 콘텐츠 요소를 추가하는 기능을 가지고 있고, 콜론 두개를 붙여서 가상 요소임을 표시합니다(가상 클래스의 경우 콜론 하나). ex) p::after, span::before, li::market, div::selection 가상요소의 종류 ::before 요소 앞에 컨텐츠를 추가 ex) p::before {content:"앞에 추가"} 앞에 추가 본문 내용 ::after 요소 뒤에 컨텐츠를 추가 ex) p::before {content:"뒤에 추가"} 본문 내용 뒤에 추가 ::marker li태그에 붙을 마커 표시 ex) li::marker {content:"😊"} 😊 메뉴 1 😊 메뉴 2 ::select.. 2021. 12. 7. 이전 1 2 다음
