HTML-CSS

● flexbox 속성값 자식에게 주어야하는 속성값 flex-grow flex-shrink flex-basis ● flexbox 속성값 설명 flex-grow 같은 경우는 flex를 준 부모의 자식들 간의 영역 넓이를 정하는 것이다. grow는 비율로 따지며, 기본 값은 0 이다. 아래 예시를 보면 모든 자식 박스 값은 0, basis auto이다. 왼쪽 주황색 박스가 가장 너비가 넓다. 1) 주황색 grow에 1을 주었을 때, 1) grow1, grow1, grow2, grow3 을 차례대로 주었을 때 따라서 모두 합산한 비율대로 계산해 너비가 늘어난다. 한요소만 1이된다면 그 요소로 다 채워지게 된다. flex-basis는 flex-direction에 따라 지정된 너비와 높이의 값을 설정한다. 기본값..

오늘은 내가 자주 쓰는 flexobox에 대해 적어보려한다. . 나는 css에서 flex 속성이 제일 좋다..!!.. 아주 편리.. float도 되게 많이 쓰던데 나는 flex가 조 아 . . ● flex의 속성값 flex의 속성값은 부모에 주어야하는 속성값과 자식에게 주어야하는 속성값으로 나뉜다. 부모에게 주어야하는 속성값 display: flex; flex-direction : colum , row (row-reverse, colum-reverse) justify-content: flex-start, flex-end, space-between, space-around, space-evenly align-items: flex-start, flex-end, center, stretch align-cont..

미루고 미뤄뒀던 .. position을 다시 배우러 왔읍니다 . . 먼저 position의 속성 static, relative, absolute, fixed, sticky에 대해서 배우고자 한다. 큰 안에 9개의 를 넣었고, 중심에는 노란색으로 칠해주었다. 그안에는 빨간색.. 노란 값에 변화를 주며 position 속성에 대해 공부해보자. position : static position은 기본 값은 static이며, static 값일 경우 요소들의 흐름을 따르게 된다. 즉, 혼자 마구잡이로 아무데에 놓이지않고 자연스럽게 요소들의 흐름을 따른다는 것이다. 모든 요소들이 static일 경우 위와 같다. position: relative; position에 relative값을 주면, static이였을 경우에 ..

분명 에 margin, padding 0값을 주었는데도 마진이 생길때 이는 마지막 태그의 마진값이 있기 때문에 부모의 요소바깥까지 영향을 미치게 된 것. 이럴때는 태그의 마진값을 0주거나 아니면 부모요소에 패딩값을 주거나 마진값을 주면 자식요소의 값을 먹어버린다. 블록요소들의 margin은 가장 큰 값으로 margin이 적용된다. 아래에 두개의 가 있는데, 각각 margin을 24px로 주었다. 그렇다면 두 요소는 사이에 48px의 여백이 생겨야할 것 같은데 실제로 적용해보면 24px만큼만 떨어져있다. 이게 블록 요소들끼리 margin값을 상쇄해버리는 특징이 있다. 따라서 블록 요소에는 마진값이 더 큰 쪽으로 공백이 주어지게 된다. 위에 에 24px보다큰 4em으로 margin값을 주었더니 두 사이의 공..