728x90 반응형 CSS127 [css]box-decoration-break 요소를 나누는 방법 box-decoration-break 를 통해 요소의 구분을 나눌수있습니다. slice / clone 두가지 값에 따른 변화와 inline 과 block(inline-block 도 같은결과 ) 에 따라 다르게 적용되는 결과를 확인할 수 있습니다. See the Pen box-decoration-break by gahyun (@gahyun) on CodePen. 2019. 5. 28. [CSS] border-images 테두리 이미지로 그려넣기 이미지로 컨텐츠의 테두리를 그려넣는다. border-images-source:url(https://i.ibb.co/zFZx634/testImg.png); /* 이미지 소스 */ border-images-slice:45; /* 이미지 슬라이스 (이미지를 잘라서 넣는다 최대 top/right/bottom/left 각각의 4개의 값을 넣을수 있음) */ border-images-width:15px; /* 이미지 테두리 너비 */ border-images-repeat:repeat; /* 이미지 테두리의 이미지 반복 stretch : 이미지를 늘려서 간격을 채운다 repeat : 이미지를 반복해서 채운다 / 크기가 맞지않으면 이미지가 잘림 round : 이미지를 반복해서 채운다 / 크기가 맞지않으면 이미지 크기가.. 2019. 5. 28. [CSS]글쓰는 방향 글쓰는 방향에 대한 속성은 두가지가 있다 direction : ltr // rtl (left to right / right to left - 컨텐츠의 방향을 정한다) {direction: rtl;} writing-mode 글이 쓰여지는 방향으로 horizontal-tb|vertical-rl|vertical-lr; 3가지 방향을 갖는다 - 가로방향 글쓰기 horizontal-tb 가로로 위에서 아래로 -세로방향 글쓰기 vertical-rl 세로로 오른쪽에서 왼쪽으로 vertical-lr 세로로 왼쪽에서 오른쪽으로 -한글세로쓰기 tb-rl 위에서 아래로 왼쪽에서 오른쪽으로 See the Pen text by gahyun (@gahyun) on CodePen. 2019. 5. 28. [CSS]좌우정렬 text-align: justify; 사용법 text-align: justify; 는 좌우에 맞게 정렬이지만, 문장이 한줄을 꽉 채워지지 않을 때는 차이가 없고, 줄이 바뀔때 차이가 보인다. 첫번째 문단의 각줄의 끝을 보면 모두 다른위치에서 끝나지만 text-align: justify; 값을 지정해준 두번째 문단은 모두 일정하게 끝나는것을 볼 수 있다 하지만 첫번째 문단과 두번째 문단 모두 같은 단어에서 끝어진다. 첫번째 문단과 두번째 문단의 차이는 두번째 문단은 각줄이 양끝에 문장의 위치가 맞춰지도록 띄어쓰기 부분의 길이가 조절된다. See the Pen text-align: justify; by gahyun (@gahyun) on CodePen. 2019. 5. 28. 이전 1 ··· 13 14 15 16 17 18 19 ··· 32 다음 728x90 반응형