Style sheet(css) Note on redgoose note

Style sheet(css) Note

Nest: Development Category: html/css 2013-03-16

CSS Character set

@charset "euc-kr";
@charset "utf-8";

외부 css파일을 불러오기

@import "filename.css";

긴 글자뒤에 자동으로 ...붙이기

공간 사이즈는 고정으로 맞춰줘야한다.

.txtOverflow {
    width: 80px;
    height: 30px;
    overflow: hidden;
    border: 1px solid blue;
    white-space:nowrap;
    text-overflow: ellipsis;
}

커서모양 바꾸기(손가락 모양으로 변경)

button {
  cursor: pointer;
}

좋은 word-break

다음과 같이 쓰면 CJK 단어 중간에서는 줄 바꿈 하지 않으면서, URL 처럼 공백 없이 긴 알파벳이나 숫자는 박스 끝에서 줄 바꿈을 해준다고 한다.
완벽한 해법!

body {
  word-break:keep-all;
  overflow-wrap:break-word;
}

출처: https://twitter.com/naradesign/status/866552587864072192

flex

flex-box에 관한 참고가 될만한 글

참고 URL: http://naradesign.net/wp/page/3/

  • align-self flex item의 ‘독립적 교차 축’ 정렬을 제어