CSS 정리5

Backgrounds and borders

 

.box{
background-image : url (star.png)
background-size : cover /*가로 세로 비율 유지 확대, contain : 종횡비 기준 */
backgorund-repeat : no-repeat /* repeat-x , repeat-y */
background-position : 10px, 20px

background-attachment: scroll /* 페이지 요소의 스크롤, fixed: 고정, local : 설정 요소 고정 */

border : 1px , solid, black ( 크기, 종류(double, dashed, ...) , 색)
border-top-width : 1px ( 위치별 설정)

border-radius : 1em 10% ( 모서리 둥근 테두리 가로 반경, 세로 반경) 

}

---

writing mode?

Sample

	h3{
    writing-mode: vertical-rl /*horizontal-tb : 위에서  아래, 문장 가로 표시 , vertical-rl : 오른쪽에서 왼쪽, 문장 수직, vertical-lr : 왼에서 오, 문장 수직 */
    }    

what is writing mode : vertial-rl mode

논리적 마진,테투리 및 패딩 속성

 /**이미지 패딩, 마진값 조절 */
 .box {
 	inline-size 200px;
    writing-mode: vertical-rl;
 }
img{
    float : inline-end;
    margin-inline-start : 20px
    margin-inline-end : 30px
    }    

---

overflow 속성

overflow 속성은 요소의 overflow를 제어하고 브라우저가 원하는 방식으로 동작하도록 하는 방법 입니다. overflow의 기본값은 visible 이므로, overflow가 발생하면 기본적으로 콘텐츠를 볼수 있습니다 overflow:hidden 넘으면 잘려집니다. overflow:scroll 항상 스크롤막대가 보여집니다. overflow-y:scroll y축에만 스크롤하도록 합니다

숫자 길이 백분율

단위	이름	다음과 동일함
cm	센티미터	1cm = 96px/2.54
mm	밀리미터	1mm = 1/10th of 1cm
Q	4분의 1 밀리미터	1Q = 1/40th of 1cm
in	인치	1in = 2.54cm = 96px
pc	Picas	1pc = 1/16th of 1in
pt	포인트	1pt = 1/72th of 1in
px	픽셀	1px = 1/96th of 1in

단위	관련 사항
em	요소의 글꼴 크기.
ex	요소 글꼴의 x-height.
ch	요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다.
rem	루트 요소의 글꼴 크기.
lh	요소의 라인 높이.
vw	viewport 너비의 1%.
vh	viewport 높이의 1%.
vmin	viewport 의 작은 치수의 1%.
vmax	viewport 의 큰 치수의 1%.

width의 픽셀 단위로 설정 되거나, vw는 viewpoint 단위로 설정 됩니다. viewport 너비를 기준으로 하므로, 10vw는 너비의 10% 입니다. em 단위는 글꼴 크기의 상대적입니다.

ems 및 rems

em와 rem는 박스에서 텍스트로 크기를 조정할때, 가장 자주 발생하는 두개의 상대 길이 입니다. 텍스트 스타일링 또는 css 레이아웃과 같은 보다 복잡한 주제를 시작 할때, 이러한 작동 방식과 차이점을 이해하는것이 좋습니다. em 단위는 "부모 요소의 글꼴 크기"를 의미 합니다." rem 단위는 "루트 요소의 글꼴 크기"를 의미합니다.