[CSS] 텍스트 오버레이
그림 위에 자막 형식으로 텍스트를 표시해야 하는 경우가 많이 발생합니다. 이렇게 이미지 위에 텍스트를 배치(오버레이)시키려면 외부 에 속성을...
그림 위에 자막 형식으로 텍스트를 표시해야 하는 경우가 많이 발생합니다. 이렇게 이미지 위에 텍스트를 배치(오버레이)시키려면 외부 에 속성을...
가상요소(Pseudo Element)는 요소로 행동하기 때문에 규칙을 사용하여 다른 요소(로그 등)를 가운데 정렬시킬 수 있습니다. 그리고 화면에서 양 요소를 맞추기...
HTML이나 PHP 파일을 직접 수정하지 않고 사이트 제목, 글 제목 또는 기타 문구를 바꾸어야 하는 상황에서 CSS를 사용할 수...
::before와 ::after는 CSS 가상 요소로서, 가상 요소를 사용하여 어떤 요소(element)의 앞뒤에 텍스트나 그림을 추가할 수 있습니다. 기본적인 문법 가령 다음과...
앞에서 jQuery로 Div의 높이를 동일하게 조정하는 방법을 두 차례에 걸쳐 살펴보았습니다(맨 아래 참고 링크 참조). 다음은 CSS를 사용하여...
CSS를 사용하여 링크 비활성화하기 CSS를 사용하여 링크를 비활성화하는 방법입니다. 요소명 { pointer-events: none; cursor: default; } pointer-events에 대한...
이미지의 왜곡 없이 이미지가 브라우저의 화면을 채우도록 만드는 방법은 여러 가지가 있습니다. 다음은 이미지가 화면의 가로와 세로의 중앙에 놓이고...
span 태그 내의 텍스트를 가운데에 정렬하는 방법은 여러 가지로 생각해볼 수 있습니다. 그 중 하나가 display:table-cell을 사용하는 것입니다. CSS를 사용하여 span을 수직으로...
YouTube 등의 동영상을 iframe 형태로 삽입할 경우 일부 워드프레스 테마에서는 비율에 맞게 제대로 표시하지 못하는 경우가 있습니다. 이...
이미지 불투명도는 CSS에서 opacity를 사용하여 설정이 가능합니다(참고). 예를 들어, 다음과 같은 CSS 코드를 사용하여 이미지의 불투명도를 조정할 수...