css
1.css단위
평소에 rem과 em단위를 헷갈려 이 참에 자주쓰이는 단위를 정리해봤다.px : 모니터에서 화면에 나타낼 수 있는 가장 작은 단위% : 부모요소에 상대적으로 크기가 계산됨.em : 선택된 font에 상관없이 항상 고정된 font-size를 갖고 있다. 부모의 font-
2.내가 보려고 정리한 CSS정리 part.1
css선언방식 내장방식 링크방식(병렬방식) link는 HTML에서 외부의 css를 가져오는 방법 @import 방식(직렬방식) import는 css에서 외부의 css를 가져오는 방법 앞의 css가 불러와지고 세팅이 완료되어야만 다음의 css가 불러져 올
3.내가 보려고 정리한 CSS part.2
단위 : px, em, cm 등기본값: auto단위 : px, em, cm 등기본값: auto\-> in-line 요소들은 w: 0, h: 0에서 출발하게 되고 가로세로 값을 가질 수 없다.\-> block 요소들은 w: 100%, h:0에서 출발한다요소의 외부 여백
4.hover시 박스의 색상과 글자 변경
< 평상시 >< hover시 >
5.perspective를 통한 3D 연습
HTML CSS
6.SASS와 SCSS
css는 원시적인 문법이기에 고도화된 작업에서는 불편한 경우도 있다. css preproceccor(전처리기) 전처리기를 컴파일하는 작업이 필요하다 전처리기는 css문법과 굉장히 유사하지만 표준 css보다 많은 기능을 사용해 편리하게 작성이 가능하다. 웹에서는 동작하지
7.grid 연습
그냥 연습...
8.box를 가운데 위치시키기
정렬할 박스의 속성을 부모 기준으로 absolute로 지정한다.left:0, right:0을 사용한다.양쪽(left,right) 방향의 margin을 auto로 지정한다.top:0, bottom:0을 사용한다.상하 방향의 margin을 auto로 지정한다.
9.위치 값 안 먹을때
박스 요소에 top: 20px과 같은 css를 먹이고 싶은데 적용되지 않는 경우가 종종 있다.그럴땐 현재 박스에 position: \*을 지정해 주어야만 위치 값이 먹는다.이런 실수는 안 하도록 하자.
10.overflow-y
box에 item들이 y축으로 추가되면서 box밖으로 넘치는 상황이 있는데이럴 때 overflow-y: auto를 하면 box안에서 scroll된다.