목록전체 글 (88)
Rainbow
[html5 &CSS] css 포지셔닝 box.. : 네이버블로그 (naver.com) [html5 &CSS] css 포지셔닝 boxsizing: content-box/ border-box #052 안녕하세요. 스마트대막리지 월터입니다. [html5 &CSS] css 포지셔닝 boxsizing: content-box/ bord... blog.naver.com 가. css 포지셔닝 boxsizing: content-box/ border-box (1) content-box -width 속성 값을 콘텐츠 영역 너비값으로 사용하는 것 기본 값- default 값임. (2) border-box width 속성값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용 #box1 {..
box-sizing 속성 - Content-box : 콘텐츠 영역을 기준을 크기를 지정한다(콘텐츠의 영역 기준으로 width와 height를 포함한 값 입니다) - border-box : 테두리를 기준으로 크기를 지정한다(padding, border, margin을 포함한 값 입니다)
margin과 padding의 비교 + (양수) - (음수) auto 단위 margin o o o px, % ... padding o x x px, % ... margin auto 기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가집니다. 이를 활용하여 수평 중앙 정렬을 할 수 있습니다. - margin은 object화면과 여백 (외부여백)을 의미한다 - padding은 object화면과 (내부여백)을 의미한다 (내용과 border 사이의 여백) margin 속성 기본 값 : 0 length 고정값으로 지정합니다. (ex. px, em ....) percent 요소의 width에 상대적인 크기를 지정합니다. auto 브라..
Position 속성 태그 복습 position: 레이아웃을 배치해준다, 객체를 위치시킬 때 사용하는 속성 position: static; -초기값을 주지 않을때 와 같습니다. position:relative; -원래의 위치부터 계산해 줍니다. position: absolute; -문서의 원래의 위치와 상관없이 위치 지정이 가능하다 (원하는 곳에 요소를 위치 시킬 수 있다) -가장 가까운 상위요소를 기준으로 위치를 잡는다 -상위 요소가 없으면 html기준으로 위치를 잡는다 position:fixed; -화면이 바뀌더라도 고정된 위치를 설정할 수 있다 -Top(위)bottom(아래)left(왼)right(오) 위치를 설정할 수 있다 position 속성 요소를 원하는 위치에 이동 시키는것. 기본 값 : s..