카테고리: CSS

CSS / Tutorial / 문자열 자르는 방법

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.

CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.

CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.

CSS / Tutorial / 선택자(Selector)

CSS의 요소·클래스·ID·속성 선택자가 어떤 HTML 요소를 고르는지 예제로 설명합니다. 여러 클래스를 가진 요소, 선택자가 일치하지 않을 때, ID와 클래스의 사용 기준도 다룹니다.

CSS / Reference / border-spacing

border-spacing의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 표에서는 셀 사이에 가로 12px, 세로 6px의 간격이 생깁니다.

CSS / Reference / backface-visibility

backface-visibility의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 프레임에서는 뒷면 방향의 도형이 보이지 않고 두 번째에서는 글자가 뒤집힌 상태로 보입니다.

CSS / Reference / text-decoration

text-decoration의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 예문은 물결 밑줄, 두 번째는 취소선입니다.

CSS / Reference / caption-side

caption-side의 문법과 주요 값, 실제 적용 조건을 설명합니다. 같은 caption이 첫 표 아래와 두 번째 표 위에 표시됩니다.

CSS / Reference / white-space

white-space의 문법과 주요 값, 실제 적용 조건을 설명합니다. pre-wrap에서는 연속 공백과 원문의 줄바꿈이 남고, normal에서는 같은 텍스트가 일반적인 문장처럼 합쳐집니다.

CSS / Reference / color

color의 문법과 주요 값, 실제 적용 조건을 설명합니다. 글자 색과 currentColor 테두리가 함께 바뀝니다.