CSS : Positioning : static, relative, absolute, fixed
static 일단 모든 태그들은 처음에 position: static 상태입니다. (기본적으로 static이라 따로 써주지 않아도 됩니다.) 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다. static에 설정 값을 주어도 적용이 따로 되지 않습니다. span1 span2 span3 div1 span, div { background: yellow; border: 1px solid red; } relative 여기서 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다. 이제 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다. 각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, right, bott..
2019. 12. 15.
CSS : Positioning (min-max width, margin, padding)
min,max-width min , max-width는 element의 content가 담겨져 있는 크기를 최소, 최대로 잡는 것이다. 그리고 브라우저 크기에 따라 변한다 .item-a와 .item-b를 width를 %로 했기 때문에, 브라우저를 계속 늘린다고 하면, 저 비율에 맞춰서 계속 늘어날 것이다. 하지만 나는 max나 min 값으로 제어를 하고 싶다. 그 때, min-width, max-width를 주로 쓴다. max-width : 1000px이면, 1000px 넘어가고서는 더이상 늘어나지 않는다. 만약 여기에 margin-left, right을 auto로 추가를 해준다면, 이는 margin 양 옆이 자동 비율로 margin이 생성된다는 것이다.. margin, padding 이게 좀 빡세다....
2019. 12. 15.
