CSS16 CSS ellipsis 말줄임 표시방법 안녕하세요! 오늘은 텍스트 글자 길이가 길어 영역을 초과할 때, 글자를 말줄임표로 만드는 css속성 ellipsis에 대해 정리해 보려고 합니다! 글자를 입력 해야 하는 영역의 크기가 작고, 그에 비해 입력 해야 할 텍스트 내용이 많을 때 주로 사용하는 속성인데요~ 먼저 예제 코드를 살펴 보시죠~ 문자열 입력 테스트입니다 긴 문자열이 필요합니다 긴문자열 예제입니다. 위와 같이 가로 200px 세로 30px의 임의의 영역을 하나 잡아주고 내부에 긴 문자열을 입력해 보았습니다. 결과 화면은 아래와 같습니다. 위와 같이 가로 200px 세로 30px의 임의의 영역을 하나 잡아주고 내부에 긴 문자열을 입력해 보았습니다. 결과 화면은 아래와 같습니다. 1. 한 줄의 문자열 말줄임표 처리하기 box 영역의 css에.. 2023. 1. 13. CSS 막대 로딩바 (크기가 변하는 막대 로딩바 만들기) 안녕하세요~ 오늘은 앞에서부터 막대의 크기가 점차적으로 변하는 로딩바 애니메이션을 만들어 보려고 합니다. 약간의 시간차를 두고 막대의 높이가 차례로 변하는 애니메이션인데요! 결과 화면부터 확인해 보겠습니다. 위와 같은 로딩바입니다~ 결과화면으로 보면 어떤 효과인지 바로 알 수 있는데, 막상 문장으로 표현하려니 어떤 로딩바인지 한단어로 정의하기가 쉽지 않네요... 아무튼 위와 같은 로딩바를 만들어 보겠습니다. 우선 막대가 위치할 영역과 막대를 구성할 요소부터 만들어 보겠습니다. 1. 영역과 막대 요소 만들기 전체 영역인 container를 relative 포지션으로 가로, 세로 200px로 화면 가운데 위치해 주고, 안에 막대바가 들어갈 area영역을 absolute 포지션으로 가운데 자리 잡아 주었습니다.. 2023. 1. 12. CSS background-size 속성 정리 오늘 정리할 내용은 이미지 배경의 사이즈를 정하는 background-size 속성입니다. 이미지를 배경으로 지정할때 이미지의 가로가 세로보다 긴 경우가 있고 또 반대의 경우도 존재 합니다. 배경이미지의 background-size 속성을 어떻게 지정하느냐에 따라 배경에 빈 여백이 생기기도 하고 이미지일부가 가려져 보이기도 하는데요~ 그럼 background-size 속성을 정리해 보며 어떤 속성을 설정해야 적절한 사용이 가능한지 알아 보겠습니다. 사용가능한 속성 background-size : auto | length | contain | cover 사용가능한 속성은 위와 같습니다. 그럼 예제와 함께 하나씩 살펴보며 각자의 속성에 대해 알아 보겠습니다. 1. auto 설정하지 않을 경우 기본값으로 설정.. 2023. 1. 11. CSS calc() 활용방법 정리 안녕하세요! 오늘은 CSS의 calc() 함수에 대해 포스팅 해보려 합니다. calc()는 CSS에서 사용하는 함수이며 내부 매개변수로 하나의 표현식을 받습니다. 표현식으로 다양한 형태의 값들이 들어올 수 있는데 그 값을 계산하여 결과값으로 바꿔주는 함수 입니다. 이런 결과값 계산과 같은 일들은 모두 javascript가 수행하는 역할이라고 생각하고 있었는데 , CSS에서도 calc() 함수를 활용하면 쉽게 값의 계산이 가능하다는 사실! 알고 있으면 활용도가 높고 의외로 많이 쓰게 되는 함수라서 예제와 함께 활용방법에 대해서 알아 보겠습니다~ 활용 예제1 - 가변적인 길이와 고정 길이의 계산이 필요할 때 밖에 눈이 정말 많이 왔어요! 겨울 이미지에 대한 설명 wrapper영역의 width를 100%로 설.. 2023. 1. 10. 이전 1 2 3 4 다음 more