728x90 반응형 CSS/CSS 기초62 [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. [CSS] 반응형 사이즈 단위 알아보기 (em/vw/vh/vmin/vmax) em 부모에 지정된 사이즈를 기준으로 1em이 된다. 현재 box에 font-size가 20px 로 지정되어있기 때문에 .fs1의 1em 은 20px 이 되고 2em은 40px이 되는 것이다. vw 창전체의 width값을 기준으로 100분의 1 크기가 1vw가 된다. 즉 100vw는 창 넓이 vh 창전체의 height값을 기준으로 100분의 1 크기가 1vh가 된다. 즉 100vh는 창 높이 See the Pen zQaqOQ by gahyun (@gahyun) on CodePen. See the Pen GaGZYx by gahyun (@gahyun) on CodePen. 다시한번 회색 박스 안의 사이즈로 em을 알아보자 자신의 부모영역에 지정된 크게의 비율로 지정되기 때문에 .box1 에 font-siz.. 2019. 5. 27. [CSS] css를 쓰다보면 알아야하는 가상선택자 a 태그 hover : 마우스를 올렸을 때 active : 마우스를 눌렀을때 link : 방문 전 링크 visited : 방문 후 링크 See the Pen active/hover/link/visited by gahyun (@gahyun) on CodePen. input 태그 focus : 입력을 위해 초점이 맞춰져 있을 때 See the Pen input focus by gahyun (@gahyun) on CodePen. :nth-child 여러개의 같은 태그중 하나 선택하기 :nth-child(3) 3번째 태그 선택 :first-child 첫번째 태그 선택 :last-child 마지막 태그 선택 선택자1.not(선택자2) 선택자1중 선택자2를 제외한 요소 See the Pen nth-child by .. 2019. 5. 23. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음 728x90 반응형