css: text-align:justify가 안먹힐때, font-face, shadow, box-sizing, 와이어프레임 오븐

2020. 12. 8. 17:37퍼블리싱/CSS

반응형

 

text-align:justify

아시아 문자의 경우 가끔 justify가 먹히지 않는 경우가 있다고 한다.

아래 참조할 것

 

.rightBottom .footMenu{
    text-align: justify;
}

.footMenu>li{
    display: inline-block;
}

.footMenu:after {
    content:"";
    display:inline-block; 
    width:100%; 
}

 

 

 

font-face

- ttf :

- woff : 모든 브라우저 전부 지원, 익스하위에서 지원안됨

- eot : 익스 하위에서 지원

@font-face {
  font-family: 'NanumBarunGothic';
  src: url('NanumBarunGothic.eot');
  src: url('NanumBarunGothic.woff2') format('woff2'),
       url('NanumBarunGothic.woff') format('woff'),
       url('NanumBarunGothic.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}



@font-face {
    font-family: font_sw;
    font-weight: normal;

    src: url('NanumBarunGothic.eot');
    src: local(※), url(../font/Subway-SixInch.woff) format('woff');
}


local(※) : 현재 사용하는 컴퓨터를 우선으로 찾고 없으면 외부에서 찾고.

 

주로 noto sans, 나눔고딕, 맑은고딕을 웹폰트로 많이 사용

 

 

https://onlinefontconverter.com/

 

box-sizing

(width=padding+border)

: border-box  

: content-box

 

 

와이어프레임

https://ovenapp.io/

 

OvenApp.io

Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공)

ovenapp.io

 

 

background-origin

 

background-clip

 

 

text-shadow

:x축 y축 blur color

 

box-shadow

:x축 y축 blur color inset/outset(default)

반응형