
CSS) position-fixed, relative, absolute
2020. 10. 26. 21:02
Frontend/HTML, CSS, DOM, jQuery
position fixed fixed로 레이어 나누기 fixed로 가장 위에 있는 레이어가 되어버림 높이, 아래, 오른쪽 왼쪽 값을 하나라도 주면 다른 레이어가 되어버림 static positon:static relative absolute

CSS) flexbox-2
2020. 10. 26. 20:31
Frontend
flexbox-2 flex 외워야하는 것 grow shrink basis 0 1 auto 비율 똑같게 하기 비율 주기 flex-direction 종류 row colum 자식 조종 flex-wrap nowrap 모든 엘리먼트를 같은 줄에 있게 함 wrap flex-direction column column-reverse row row-reverse

CSS) selector, inline-block, flexbox-1
2020. 10. 26. 13:41
Frontend
selector 복수 선택 "," 로 복수 선택 border-radious 버튼 모서리 라운드만 주기 위해서 btn이라는 클래스를 만듬 class 이름 앞에 btn 추가 btn이라는 클래스와 teal라는 클래스 2개를 동시에 가질 수 있음 layout inline-block inline은 높이와 너비를 가질 수 없지만, 가질 수 있게 하려면 inline-block으로 하면 된다 inline-block의 단점은 박스 사이에 공간이 생기는 것이다 inline-block은 반응형 디자인을 제공하지 않아서 단점이다 따라서 쓰지 않는다 flexbox 반응형 디자인 가능 부모를 통해서 자식을 움직이는 것이 flex 이다 부모를 display: flex;로 선언하다 이제 자식들을 제어할 수 있다 justify-con..

CSS) block 과 inline, box 특징(margin, border, padding)
2020. 10. 25. 23:40
Frontend/HTML, CSS, DOM, jQuery
block 과 inline div를 inline으로 하면 사라진다. 이유는 inline은 높이와 너비가 없기 때문이다 오리지널 내용물 없는 inline 내용 넣어주기 따라서 내용을 넣어줘야 보여진다 block은 box이고, inline 은 box가 아니다 box 특징 margin, border, padding 을 가지고 있다 margin 위 아래 20px , 좌우 15px 위 20, 오른쪽 5 아래 12 왼쪽 9 collapsing margins 위아래쪽만 일어나는 현상으로 위아래가 같으면 똑같이 인식해버림 흰 박스의 경계가 보라색 박스와의 경계가 같을 때 일어난다. 경계가 만나면 하나로 인식되는 것이다. padding 해결방법은 패딩을 넣으면 된다 border border 종류 border-style ..