본문 바로가기

CSS14

📌 CSS 말줄임 : text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 글자르기 width:auto. 제목이 길 경우 ...로 표시 게시판을 개발할 때 귀찮은 작업중의 하나가 제목을 리스트 폭에 맞춰서 말을 줄이는 것이다. 서버 단에서 미리 길이를 계산해서 출력할 수도 있지만, 사이트 특성상 게시판의 종류가 다양하다거나 하면, 은근히 귀찮은 압박으로 다가오게 된다. 이럴때 유용한 것이text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 조합이다. 이걸 쓰면 금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 -추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택 이렇던 녀석이 이렇게 바뀐다. 소스에서 볼드처리 해둔 부분이 중요한 부분인데, vf_360을 id로 스타일을 적용하게 했고, width:auto; 속성을 부.. 2019. 6. 22.

패스트부트 반응형 웹 티스토리 스킨 상단에 배너달기. 미디어 쿼리 ✈ 프로그래머들이 싫어하는 언어 제 동생 블로그에 패스트부트 반응형 웹스킨을 적용해 주었는데요. 반응형 스킨상에서 블로그 최상단의 블로그 이름 옆에 배너를 다는 법에 대해 궁금해하시는 분이 댓글로 질문해 주셨어요. 웹퍼블리셔로 일하는 저로서는 그냥 간단한 작업이었는데, 아무래도 일반인 분들은 CSS개념이라든지, 반응형 미디어 쿼리에 대해 잘 모르시니까 어렵게 느껴지실 것 같긴 하네요. 모든 반응형 웹 티스토리 블로그 스킨이 똑같은 구조가 아니라서 단정적인 방법을 설명해 드릴 수는 없네요. 일단은 제가 주로 사용하고 있는 패스트부트 반응형 웹 티스토리 스킨 버전 1.6.1을 기준으로 해서 설명을 드릴게요. 그전에 일단 중요한 핵심에 대해서 얘기하죠. 이 부분은 패스트부트 스킨이 아니더라도 반응형 웹이라면 고려해야 할 사항입니다. 일단 반.. 2019. 5. 24.

이전 1 2 3 다음

티스토리툴바