본문 바로가기

css

 (36)
css 2022. 5. 10. 13:48
[scss]기본 문법 정리 SCSS 기본 작성법 - 중괄호를 활용하여 부모자식 관계를 표현하고 & 사용 시 부모태그를 가져옴 // 입력 ul{ width: 100px; li{ height: 100px; &::before{ content: ""; } } &::after{ background: #fe0; } } //출력 ul { width: 100px; } ul li { height: 100px; } ul li::before { content: ""; } ul::after { background: #fe0; } $를 활용한 기본 변수 설정 // 입력 $main_color : #fe0; div{color: $main_color; } // 출력 div{color: #fe0; } @import "파일명"을 통한 파일 불러오기 @import..
css 2022. 4. 27. 11:27
[css]flex-start와 start 차이 See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen. flex-direction에 reverse가 포함 되었을 경우 차이가 남 flex-start : flex시작점에서 start start : 엘리먼트 시작점(일반적인 시작점 - 왼쪽)에서 start정렬
css 2022. 4. 19. 11:43
[css]메인 컬러 일괄 적용시키기 See the Pen 메인 컬러 일괄 적용 by sangmok-ye (@sangmok-ye) on CodePen.
css 2022. 4. 13. 14:56
[css]한글/영문폰트 별도 지정 https://wazacs.tistory.com/48 https://youngkeol.tistory.com/92 참고
css 2022. 4. 8. 16:13
[css]스크롤바 커스텀 See the Pen 스크롤바 커스텀 scrollbar custom by sangmok-ye (@sangmok-ye) on CodePen.
css 2022. 2. 4. 16:57
[css]nth-child 응용 See the Pen nth-child 응용 by sangmok-ye (@sangmok-ye) on CodePen.
css 2022. 2. 3. 10:27
[css]transform: matrix See the Pen transform: matrix; perspective by sangmok-ye (@sangmok-ye) on CodePen. matrix (scaleX, skewY, skewX, scaleY, translateX, translateY) 기본값 : {transform: matrix(1,0,0,1,0,0); } perspective : transform의 Z값을 행하기위한 필수요소 참고 http://ds-overdesign.com/transform/matrix3d.html CSS3 Generator 3D MODE 親要素に transform-style:preserve-3d;transform: rotate3d(-1, 1, 0, 30deg); を指定し、立体描写を確認しやすくします。 ds-ov..
css 2022. 1. 7. 11:32
[css]리스트 list 2열 배치 display gird 그리드 ul{display: grid; grid-template-columns: 1fr 1fr;}/* grid-template-columns: repeat(2, 1fr)과 동일*/가로값이 정확할 경우 float혹은 display: flex로 가로값을 줘서 배치를 할수 있지만  가로값이 정확하지 않을 경우엔 display: grid를 사용ㅇㅇㅇㅇㅇ↓ㅇㅇㅇㅇㅇ로 변환됨 grid-template-columns에서 지정된 갯수만큼 배열이 되며 fr는 자동으로 가로값이 인식된다 너비가 1000px일 때=> grid-template-columns: 200px 1fr 에서 1fr은 800px// 1000px - 200px = 800px(1fr)=> grid-template-columns: repeat(4, 1fr) 에서 ..
top

티스토리툴바