Study/HTML,CSS

[CSS_study] display : grid_2 (grid-column)

* grid-column(row)-start & grid-column(row)-end 해당 속성을 자식에 적용한다. 해당 속성을 이용하여 grid-area를 쓰지 않고 직접 행과 열의 크기 설정가능 또한 HTML의 변경없이 element의 모습을 변경할 때 유용하다. ex) grid-row-start를 1의 값을 주어 제일 위로 올라가게 만들 수 있다. n번 째 line에서 m번 째 line까지 column 너비 설정 line 영역임 블럭의 영역 x (참고) 해당 속성은 정수인 숫자가 들어가며, 1부터 column(row)의 최대갯수 + 1까지 사용 가능하다. (참고) 범위를 초과하게 되면 css가 망가져서 생각한 대로 동작하지 않게된다. (참고) 상대단위(%, auto)등은 안됨 * grid-colum..

[CSS_study] display : grid

* grid를 배우는 이유는?? flexbox에서 좌우배치, 중앙배치는 쉽지만 grid형태를 만드는 게 어려움 * grid design은 대부분 father에서 설정한다. 규칙은 flexbox와 거의 비슷하다. display: grid * grid-template-columns : column의 크기 및 갯수를 설정 ex) grid-template-columns: 20px 55px 89px 100px; column 4개를 만들건데 첫 번째 column은 20px, 두 번째는 55px, 세 번째는 89px, 네 번째는 100px로 해라 (참고) row의 크기를 설정하지 않으면 font-size의 크기만큼 커진다. (참고) 더 이상 column이 없다면 다음 줄로 넘어간다. * grid-template-ro..

[CSS_study] flex-basis (flex-shrink 와 flex-grow 를 위한 기본 세팅)

* flex-basis flexbox의 child 요소에 적용되는 property이며 flex-basis는 flex-shrink 와 flex-grow 를 위한 기본 세팅이다. flex-basis는 main axis(주축) 쪽 크기를 정해준다. 즉, flex-direction이 row(default)일 때는 width와 같이 작용, column일 때는 height와 같이 작용한다. application에서 element의 flex item의 기본 크기를 정할 때 좋은 방법이다. but 자주 사용 X basis 정의 안할시 width와 같은 값이니까. * flex-basis 사용 예시 코드 1 2 3 4 5 6 7 .father { display: flex; justify-content: space-arou..

[CSS_study] flex-grow, flex-shrink

* flex-grow, flex-shrink는 child(자식)에게 줄 수 있는 property이다. * flex-shrink flexbox가 쥐어짤 때, element의 행동을 정의함 element 중 특정 element만 덜 줄어들거나, 더 줄어들게 할 수 있음 ex) flex-wrap: nowrap일때, 화면이 작아지면 width가 설정되어있어도 줄어든다. flex-shrink: 1; (기본값이 1이다.) flex-shrink: n(정수); --> 여러 개 * flex-grow shrink와 반대, 화면이 늘어남에 따라 box 크기가 얼마나 늘어날까? 남아있는 공간을 가져옴 (space를 없애고) 즉, 남아있는 공간, 여백이 있을 때만 grow 가능 화면이 커질 때, element도 함께 커지길 원..

[CSS_study] flex-wrap, align-content, flex-flow

* flex-wrap flexbox는 width보다도, '같은 줄'에 있도록 하는 것을 우선시함 width의 크기를 깨트려서라도 오직 같은 줄에 있도록 만드는 데만 신경을 쓴다. flex-wrap의 기본값은 nowrap이다. flex-wrap: wrap; (child의 사이즈를 유지하라고 하는 것) flex-wrap: nowrap; (child를 모두 같은 줄에 정렬함, 이때 width가 줄어들 수 있음) * flex-wrap 예시코드 * flex-wrap: nowrap 1 2 3 4 5 6 7 .father { display: flex; justify-content: space-around; height: 100vh; } .child { width: 200px; height: 200px; backgro..

[CSS_study] display : flex 그리고align-self와 order

* flex box의 규칙 flexbox에서는 children과 얘기하지 않는다. box를 배치하고 class를 사용해서 box의 위치, 공간의 속성을 주어 묘사하지 않는다. flexbox에서 뭔가를 움직이고 싶을 때는 flexbox container를 만들어야한다. inline-block와 같은 결과를 얻을 수 있다. box의 부모가 flex container이다. 다른 것의 부모가 될 수 없고 바로 붙어있는 부모여야한다. 항상 붙어있는 부모(father)가 자식(children)의 위치를 움직일 수 있다. * flex의 세계에는 두 가지가 있다. row(행): 가로를 의미한다. column(열): 세로를 의미한다. * flex container의 flex-direction 기본 값은 row다. 이때 ..