""의 검색 결과

[CSS] 긴 URL/긴 문자의 줄바꿈

[CSS] 긴 URL/긴 문자의 줄바꿈 1

위의 그림과 같이 긴 URL이나 긴 문자가 컨텐츠 영역을 벗어나 표시되는 경우가 있습니다. 이 경우 CSS를 통해 컨텐츠 영역 끝에 도달하면 줄바꿈하도록 처리할 수 있습니다. 긴 URL/긴 문자의 줄바꿈 콘텐츠 영역을 벗어난 긴 URL이나 긴 단어를 ...

더 읽기

[CSS] 텍스트 오버레이

[CSS] 텍스트 오버레이

그림 위에 자막 형식으로 텍스트를 표시해야 하는 경우가 많이 발생합니다. 이렇게 이미지 위에 텍스트를 배치(오버레이)시키려면 외부 에 속성을 적용하고 내부의 텍스트 부분의 요소에는 속성을 적용시키면 됩니다. [CSS] 텍스트 오버레이 예를 들어, 다음과 같은 CSS 코드를 ...

더 읽기

[CSS] 가상 요소를 사용하여 inline-block 요소를 수직으로 가운데 정렬하기

[CSS] 가상 요소를 사용하여 inline-block 요소를 수직으로 가운데 정렬하기 2

가상요소(Pseudo Element)는  요소로 행동하기 때문에 규칙을 사용하여 다른  요소(로그 등)를 가운데 정렬시킬 수 있습니다.  그리고 화면에서 양 요소를 맞추기 위해 마이너스 마진(margin) 값을 추가하도록 합니다. 예시: HTML 샘플: <div id="header"> <div id="logo"> <img src="http://abload.de/img/unbenannt-1bmq5b.png" alt=""/> </div> ...

더 읽기

CSS를 사용하여 텍스트 바꾸기

CSS를 사용하여 텍스트 바꾸기 3

HTML이나 PHP 파일을 직접 수정하지 않고 사이트 제목, 글 제목 또는 기타 문구를 바꾸어야 하는 상황에서 CSS를 사용할 수 있습니다. CSS 가상 요소(Pseudo-element)를 사용하여 방문자에게 표시되는 문구를 변경할 수 있습니다. (참고로 CSS를 사용할 경우 HTML이나 PHP ...

더 읽기

[CSS] ::before/::after 가상 요소

[CSS] ::before/::after 가상 요소 4

::before와 ::after는 CSS 가상 요소로서, 가상 요소를 사용하여 어떤 요소(element)의 앞뒤에 텍스트나 그림을 추가할 수 있습니다. 기본적인 문법 가령 다음과 같은 간단한 Html 코드가 있는경우 <p>첫 번째 문장입니다.</p> 다음과 같은 형식으로 가상 요소를 사용할 수 있습니다. p::before { ...

더 읽기

CSS를 사용하여 DIV 두 개의 높이를 동일하게 만들기

앞에서 jQuery로 Div의 높이를 동일하게 조정하는 방법을 두 차례에 걸쳐 살펴보았습니다(맨 아래 참고 링크 참조). 다음은  CSS를 사용하여 두 개 DIV의 높이를 동일하게 설정하는 방법입니다. HTML  예시: <div class="row"> <div class="col">내용 1</div> <div class="col">내용 2</div> ...

더 읽기

링크 비활성화하기(CSS/javascript/jQuery)

CSS를 사용하여 링크 비활성화하기 CSS를 사용하여 링크를 비활성화하는 방법입니다. 요소명 { pointer-events: none; cursor: default; } pointer-events에 대한 자세한 내용은 여기를 참고해보시기 바랍니다. 이 방법을 사용하면 소스를 수정하지 않고도 원하는 요소(element)가 포함된 링크를 비활성화할 수 ...

더 읽기

이미지를 브라우저의 전체 화면 채우기(CSS)

이미지의 왜곡 없이 이미지가 브라우저의 화면을 채우도록 만드는 방법은 여러 가지가 있습니다. 다음은 이미지가 화면의 가로와 세로의 중앙에 놓이고 전체 화면을 채우도록 하는 간단한 CSS 코드입니다. 요소명 { max-width: 100%; max-height: 100%; bottom: 0; left: 0; ...

더 읽기

span을 수직으로 가운데 정렬하기(CSS)

span을 수직으로 가운데 정렬하기(CSS) 5

span 태그 내의 텍스트를 가운데에 정렬하는 방법은 여러 가지로 생각해볼 수 있습니다. 그 중 하나가  display:table-cell을 사용하는 것입니다. CSS를 사용하여 span을 수직으로 가운데 정렬하는 방법 CSS 예: span { display: table-cell; padding-left: 10px; text-align: left; vertical-align: middle; } DIV ...

더 읽기

iframe으로 삽입한 동영상을 모바일 기기에서 비율에 맞게 표시되도록 설정하기(CSS)

YouTube 등의 동영상을 iframe 형태로 삽입할 경우 일부 워드프레스 테마에서는 비율에 맞게 제대로 표시하지 못하는 경우가 있습니다. 이 글에서는 iframe으로 삽입한 동영상을 모바일 기기에서 비율에 맞게 표시되도록 설정하는 방법에 대해 살펴보겠습니다. iframe으로 삽입한 동영상을 모바일 ...

더 읽기