본문 바로가기
728x90
반응형

CSS127

[CSS3] 문장의 공백과 줄바꿈을 처리하는 white-space (자동 줄바꿈 방지) white-space: normal; 기본값, 공백, 줄바꿈, 연속되는 여러개의 공백을 모두 하나의 공백으로 처리합니다. 또한 크기에 맞게 자동 줄바꿈 됩니다. white-space: nowrap; normal과 같은 처리를 하지만, 자동 줄바꿈 되지 않습니다. white-space: pre; pre 태그처럼 줄바꿈 공백 연속공백이 그대로 보존된다. 그러나 줄바꿈한 곳에서만 줄바꿈이 일어나고 자동줄바꿈 되지 않는다. white-space: pre-wrap; 줄바꿈 공백 연속공백이 보존되면서 크기에 따라 자동줄바꿈이 일어난다. white-space: pre-line; 연속된 공백은 하나의 공백으로 처리하고, 줄바꿈은 보존된다. 또한 크기에 맞게 자동 줄바꿈된다. See the Pen white-space .. 2019. 4. 18.
[CSS3] 영역 크기의 따라 글자가 다음줄로 넘어갈때 써야하는 word-break word-break 란 css에서 줄바꿈을 어떻게 할 것인가를 결정한다! 지정된 width 값보다 문장이 길어질때 줄바꿈이 되는 위치를 결정한다. 예를들어 안녕하세요. 홍길동입니다. 위와 같은 문장이 있을 때 안녕하세요. 홍 길동입니다. 안녕하세요. 홍길동입니다. 와 같이 어떤 방법으로 줄바꿈 할것이냐의 차이 입니다. word-break: normal 한글은 한자한자 / 영어는 단어로 / 기타 다른언어의 텍스트는 임의의 지점에서 깨진다. word-break: break-all 이건 모든 글자가 한글자씩 나뉜다 word-break: keep-all 띄어쓰기 되어있는 부분에서 줄바꿈 아래에서 어떤 차이인지 확인해보세요. See the Pen word-break by gahyun (@gahyun) on Cod.. 2019. 4. 18.
[CSS3] 이미지에 hover 애니메이션 효과 넣기 이미지를 좀 더 효과적으로 보여줄 수 있는 hover 애니메이션을 css animation 을 통해 구현하였다. 이미지에 호버햇을 때 그라데이션으로 하얀 배경을 깔아 이미지에 대한 설명을 보여주거나 흑백블러 처리를 한 이미지에서 마우스를 올렸을때 원래의 이미지를 보여주거나 등등 마우스를 올렸을때 해당 글을 내용을 보여주는 다양한 효과들을 구현하였다 See the Pen images hover animation by gahyun (@gahyun) on CodePen. 이미지 숨기고 hover하면 보여주기 See the Pen img hover by gahyun (@gahyun) on CodePen. See the Pen Untitled by gahyun (@gahyun) on CodePen. [CSS/CS.. 2019. 4. 18.
[CSS3]카드를 한장만 뒤집을 수 있는 카드 뒤집기 효과 구현하기 카드의 앞면과 뒷면을 겹쳐두고 rotate를 위용해 뒤집는것처럼 보이게 합니다. 뒷면은 처음부터 90도 돌려져있고 앞면이 90도 돌아가고 난 후 뒷면이 다시 90도 되돌아오면 뒤집어 지는것처럼 보입니다. 하나를 뒤집으면 뒤집어져있던 다른 카드는 다시 되돌아오도록 합니다. 이때 다시 원위치로 되돌아오는 카드는 전체적으로 뒤면이 돌고 다시 앞면이 돌아나오는것이 아닌 뒷면이 없어지고 앞면이 돌아서 나오는듯하도록 구현합니다. See the Pen 카드뒤집기 효과 구현하기 by gahyun (@gahyun) on CodePen. 2019. 4. 17.
728x90
반응형

티스토리툴바