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
와이어프레임
background-origin
background-clip
text-shadow
:x축 y축 blur color
box-shadow
:x축 y축 blur color inset/outset(default)
반응형
'퍼블리싱 > CSS' 카테고리의 다른 글
css로 주사위 만들기, transform, animation 실습/ 자바스크립트, 제이쿼리 없이 슬라이드배너 버튼 만들기 (0) | 2020.12.11 |
---|---|
css: multi column, table, transition, trasform (0) | 2020.12.10 |
html, css 종합 예제 클론코딩 실습 (0) | 2020.12.04 |
css: position, float, 알마인드 이용한 돔트리 만들기, 실습 (0) | 2020.12.02 |
css: 속성선택자, 상태 선택자, position, z-index, 실습(클론코딩) (0) | 2020.12.01 |