본문 바로가기

16. float _ 요소를 띄워 정렬 float란 단어 뜻 그대로 띄우는 태그입니다. 태그들이 직관적이라 참 좋네요. 레이아웃을 잡을때 가장 많이 쓰이는 태그 중 하나입니다. 한 영역에 float를 주면 그 뒤에 따라오는 영역들이 넓이가 허용하는 안에서 옆으로 올라 옵니다. 마치 물에 물체들이 둥둥 뜨는 것처럼요. 줄바꿈이 일어나는 block태그를 옆으로 배치시킬때 사용합니다. 기본형은 아래와 같습니다. float float CSS float float left 왼쪽을 기준으로 차례대로 둥둥 띄워 정렬합니다. 가장 위의 영역부터 왼쪽부터 차례대로 늘어섭니다. box 1 box 2 box 3 CSS box 1 box 2 box 3 right left와는 반대로 오른쪽부터 차례대로 정렬합니다. 가장 첫번째 float영역이 가장 오른쪽에 오게 됩.. 더보기
15. position _ 위치지정 position은 위치를 지정하는 요소로 레이아웃을 잡을때 뻔질나게 쓰입니다. relative와 absolute, fixed가 있는데 기준점, 고정성 등의 차이가 있습니다. 기본적으로 어떤 position을 사용할지 입력한 후, top, bottom, left, right의 값을 주면 됩니다. 기준점은 따로 지정이 되지 않으면 나의 부모, 내 윗대에 position이 지정되어 있다면 그 윗대가 기준이 됩니다. 기본형은 아래와 같습니다. position CSS position relative relative는 내가 현재 위치한 자리를 기준으로 움직입니다. 나의 현재 위치에서도 상단 왼쪽 끝이 기준점이 됩니다. relative는 자신의 자리를 기억하고 공간을 차지합니다. 앞에 property는 기준으로 할 .. 더보기
14. display _ inline과 block 속성을 변경 display는 얠 어떻게 보여줄래? 정도로 해석할 수 있습니다. 앞서 15번째 html 강좌에서 inline태그와 block태그에 대해 나왔었는데 display는 inline태그와 block태그에 관한 속성을 정의해 줍니다. 속성값이 생각보다 엄청 많은데 자주 쓰는 네가지만 알아보도록 합시다. inline / block / inline-block / none 이렇게 네가지가 자주 쓰입니다. (나머지도 알고 싶다면 http://www.w3schools.com/cssref/pr_class_display.asp에서 확인해 봅시다. inline 속성값을 inline으로 만들어 줍니다. 기본값이 block태그라도 display:inline으로 지정해 주면 inline이 됩니다. block 태그인 p에 inlin.. 더보기