WEB/CSS 11

PostCSS

반복적인 즉 중복되는 코드 작성을 최소화하고자 코딩을 간편하게 작성하게 위해서 CSS 전처리기 Post CSS가 있다. LESS나 SASS같은 것들도 있는데(스타일러스 포함) 이것을은 제공하는 거에만 맞춰서 쓸 수 있다. Post CSS는 플러그인이 굉장히 많고 다양한 장점들이 있다. PostCSS를 이용해서 모듈화를 해보자. 예제를 만들고자 하는 파일로 들어가서 아래 명령어 입력 mkdir PostCSS ls cd PostCSS yarn create-react app test yarn start 다른 cmder창에서 code . App.js에서 import React from 'react'; import './App.css'; import Button1 from './components/button1'..

WEB/CSS 2021.08.05

Centering trick(dreamcoding)

div가 아니라 btn같은 것들, inline-block같은 것들은 text-align을 이용하면 중간으로 정렬이 된다. 그래서 텍스트 온라인 같은 경우에는 센터를 이용하면 요소들을 중간으로 정렬할 수 있지만 블럭 레벨은 적용이 되지 않는다. 블럭 레벨은 margin-auto;를 주어서 센터로 만들어야한다. 그래서 마진 오토와 텍스트 얼라인은 수평으로 중간 정렬 가능하지만 수직으로는 가운데 정렬이 안된다. 트랜스폼을 이용하면 되는데 트랜스폼은 움직이는 거 로테이션 하는 것들 가능하다 text-align : center; 수평으로 중간 line-height : 100px; 수직으로 중간 해키한 방법이다. transform: translate & line-height 학습하기 text-align에 대한 추가..

WEB/CSS 2021.07.02

position-sticky(dreamcoding)

스티키는 기존에 들어있던 자리를 유지하다가 스크롤링 되면서 더 이상 보여지지 않는 시점에 사용자가 지정한 top left 포지션에 붙어 있고 또 하나 중요한 포인트는 그 자리를 그대로 공간을 유지하고 있어서 다른 요소들도 그 자리에 그대로 있다. fixed는 들어있는 부모와는 상관없이 뷰포트 안에서 포지션이 일어나기 때문에 빠져나온다 결론적으로 스티키를 쓸 때는 top left같은 포지션을 지정해 주어야 하고, 스티키는 또 있던 그 자리를 유지하면서 스크롤링이 될 때 고정이 되지만 fixed는 완전히 기존의 문서에서 나와서 상대적으로 뷰포트에서 포지션이 결정된다는 것

WEB/CSS 2021.07.02

box-sizing & positioning(dreamcoding)

box2에서 content-box는 content자체가 width와 height을 결정하기 때문에 패딩을 얼마나 넣든 보더를 얼마를 넣든 컨테이너 사이즈는 변경되지 않는다. 100*100 그대로 유지된다. 박스 스타일링 할 때 박스 사이징을 border-box로 만들면 보더까지 포함하도록 만들게되면 width와 height을 100*100으로 지정했을 때 패딩과 보더를 넣은만큼 컨텐츠가 작아지는 것을 말한다. 그리고 통상적으로 패딩을 넣는다는 것은 박스 안에 여백을 만드는 것이기 때문에 대부분은 보더박스를 이용해서 사용하게 된다. position의 기본값은 static이고 static을 했을 때는 top left 이런 포지션 관련된 속성을 써도 아무런 상관이 없다. relative는 원래 있던 공간은 유..

WEB/CSS 2021.07.02