한준호

DM 알림창을 만들고 있다. 알림창의 경우 화면의 크기가 작으므로 text overflow의 기능을 활용하기로 하였다. 메세지 알림 기능 구현만 한 상태. 텍스트의 길이가 길어지면 모두 보여주기 위해 많은 칸을 차지하게 되고 메세지가 많이 오면 리스트가 너무 길어질 것이다. 최대 2줄까지 보이다가 마우스를 hover하면 남은 메세지를 보이도록 처리 .message-hidden { min-height: 20px !important; max-width: 200px !important; overflow-y: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -moz-text-overflow: elli..

부모 div 태그에 display: table 자식 div 태그에 display:table cell, vertical-align: middle을 하면 사진과 같이 텍스트들이 수직 가운데 정렬 된다.

■vertical align 오픈한 웹사이트에 css 문제가 생겼다. 번역에 따라 영역을 벗어나는 텍스트가 보였다. 1차 수정. 영역은 맞췄는데 정렬이 문제다. 수직 정렬을 하고 싶은데 무슨 짓을 해도 안됐다. 그런데? display: flex 를 넣으니 수직 중앙 정렬이 되었다.

■v-row hihi hihi v-row 안에 v-col을 넣으면 justify 속성이 먹지 않는다.

■Display Property {{ $t("Uopload Resume") }} 파일을 첨부할 수 있는 v-file-input 태그이다. 이는 다음과 같은 레이아웃을 가진다 다음과 같이 부트스트랩의 inline-block 속성을 추가한다면 다음과 같이 사용하는 공간 만큼 크기가 줄어들게 된다. getbootstrap.com/docs/4.0/utilities/display/ Display property Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some e..

■ 부트스트랩 탄생 배경 웹 페이지 개발을 진행할 때 개발자 마다 개발 도구와 라이브러리가 다름으로 인해 생기는 conflict를 해결하기 위해 트위터의 개발자와 UI디자이너가 표준을 개발 이후 하나의 프레임워크로 발전했다. ■ 부트스트랩 각종 레이아웃, 버튼, 입력 폼 등의 디자인을 CSS와 Javascript로 만들어 놓았다. 각 디자인에 속해있는 모든 요소에 대한 파라매터를 내장하고 있기 때문에 개발자가 용도에 맞게 커스텀 할 수 있다. 또한 "그리드 시스템"을 사용하여 반응형 웹 디자인을 지원한다. bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인..