본문 바로가기

분류 전체보기 (72)

[CSS] 글자 간격(자간) 조절하기 글자 사이의 간격을 늘리거나 줄이고 싶다면 letter-spacing 속성을 사용할 수 있습니다. letter-spacing 속성의 기본값은 0 입니다. 속성 값에는 px, em 등의 단위를 사용할 수 있습니다. 자간을 늘리고자 한다면 아래와 같이 양수 값을 넣으면 됩니다. p { letter-spacing: 10px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquen..
[CSS] a 태그 스타일 적용 및 밑줄 제거 태그는 4가지 상태를 가지고 있습니다. a:link 사용자가 링크를 방문하지 않은 기본 상태 a:visited 사용자가 링크를 방문한 후의 상태 a:hover 사용자가 링크에 마우스를 올릴 때의 상태 a:active 사용자가 링크를 클릭하는 순간의 상태 각 상태별로 text-decoration , background , color , font-size 등 이외의 다양한 스타일 속성을 각각 적용할 수 있습니다. 스타일을 적용할 경우 상태의 순서는 반드시 아래와 같이 작성해주세요. a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-d..
[CSS] 줄바꿈 방지하기 내용이 길어 콘텐츠 영역을 넘어가게 되면 기본적으로 줄바꿈이 됩니다. 아래와 같이 설정하면 자동 줄바꿈을 방지할 수 있습니다. div { white-space: nowrap; }
[jQuery] 간단한 이미지 갤러리 단순한 이미지 갤러리를 만드는 방법입니다. 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 3. CSS * { margin: 0; padding: 0; } .gallery { width: 100%; max-width: 600px; margin: 0 auto; } .thumb { width: 100%; margin-bottom: 3px; list-style: none; overflow: hidden; } .thumb li { width: 25%; float: left; text-align: center; } .thumb li img { width: 98%; } .main { width: 100%; text-align: center; } .main img { width: 99.5%; } 4. jQuery
[CSS] 마우스 드래그 영역 색상 변경하기 마우스로 어떤 요소를 드래그했을 때, 드래그된 영역의 배경색은 대부분 파란색이지만 ::selection 선택자를 이용하면 아래 이미지처럼 원하는 배경색이나 텍스트 색상 등으로 변경할 수 있습니다. ::selection 선택자는 background , color , cursor , outline 과 같은 몇 가지 속성만 적용할 수 있습니다. 또한, IE9 이상의 브라우저에서 지원됩니다. ::-moz-selection { background: red; color: #fff; text-shadow: none; } /* Firefox */ ::selection { background: red; color: #fff; text-shadow: none; } 특정 요소에만 적용하고자 할 때에는 앞에 해당 요소의 클래..
[HTML] 모바일에서 자동 전화걸기 링크 제거 및 방지 모바일에서 숫자들이 나열되어 있으면 전화번호로 인식하여 자동으로 전화걸기 링크가 생성되는 것을 볼 수 있습니다. 이를 방지하려면 아래 코드를 태그 안에 삽입하면 됩니다.
마우스 커서까지 캡처 가능! 스크린샷, 캡처 프로그램 추천 간편한 캡처 프로그램을 추천해드립니다. https://app.prntscr.com/ Lightshot — screenshot tool for Mac & Win app.prntscr.com Windows 또는 MAC 운영체제에 맞는 프로그램을 다운로드할 수 있습니다. Lightshot을 실행한 후 Prt Scr 키를 누르면 화면을 캡처할 수 있으며 저장 및 공유, 간단한 편집까지 가능합니다. Lightshot 마우스 커서 캡처하는 방법 (Windows 기준) 1. 작업표시줄의 Lightshot 아이콘을 우클릭한 후, Options 메뉴를 클릭합니다. 2. Capture a cursor on a screenshot 항목에 체크하면 마우스 커서까지 캡처할 수 있습니다.
[HTML] 반응형 웹 - 메타 태그 Viewport(뷰포트) 설정 Viewport(뷰포트)는 데스크톱이나 모바일 기기 등 다양한 디바이스의 화면 크기에 맞게 웹 페이지의 크기를 조정할 때 사용합니다. 뷰포트를 설정하는 메타 태그는 태그 안에 추가하면 됩니다. width : 뷰포트 너비로, device-width는 디바이스 화면 너비에 맞게 페이지 너비가 자동 설정됨을 의미합니다. initial-scale : 페이지가 처음 로딩될 때의 확대/축소 수준을 설정합니다. 기본값은 1.0이며, 0~10.0의 값을 설정할 수 있습니다. maximum-scale : 페이지의 최대 확대/축소 수준을 설정합니다. 0~10.0의 값을 설정할 수 있습니다. (1.0로 설정하면 확대/축소 불가능하며, 2.0으로 설정하면 2배 확대/축소됩니다.) minimum-scale : 페이지의 최소 확..

티스토리툴바