float:left 검색 결과

해당 글 2건

CSS float 속성과 clear:both 속성 응용

앞에서 css의 float 속성과 clear:both를 봤습니다. CSS float속성과 clear:both 속성 알아보기 이번에는 조금더 레이아웃을 조금더 응용해서 짜보려고 합니다.이번에 만들어 보려고 하는 레이아웃 구조입니다. float 속성과 clear:both속성을 이용하면 어떻게 가능할 거 같기도 합니다. 한번 위의 그림처럼 만들어볼까요~~ 먼저 좌측 그림처럼 만들어봅니다. div red 박스를 만들고 다음 div green 박스를 만듭니다.green 박스에 float속성과 clear:both속성을 주어서 아래에 띠웁니다.그다음 blue와 yellow 박스를 만들고 float으로 띠웁니다.마지막으로 black 박스를 만들고 clear:both속성으로 고정합니다. ● html 코드 ● ● css ..
프로그램언어/HTML | CSS 2017. 2. 8. 21:56

CSS float속성과 clear:both 속성

안녕하세요 이번에는 css 속성중 layout을 담당하는 float에 관해서 알아보겠습니다.layout은 웹페이지의 구조와 시각적 효과를 고려하여 구성과 배치를 하는 것입니다.즉 구조 담당이죠~ 로 layout을 만들려고 하면 css 속성에서 넓이와 폭을 주면 됩니다.근데 문제는 div는 속성이 블럭속성으로 넓이를 얼마를 주던간에 아래로만 깔리게 됩니다. 이렇게 말이죠 ~~~ OTL 우리가 원한 것은 이런 것인데 말이죠 ........ 이때 등장해서 우리를 구원을 하는 것이 float 속성입니다.float 속성은 전체 넓이가 지정되어 있지 않으면 계속 옆으로 붙고더이상 자리가 없으면 아래로 자리잡게 됩니다.위 속성을 이용하면 table 구조를 짤수 있습니다. float 속성으로 구조를 잡으려면 블럭 속성..
프로그램언어/HTML | CSS 2017. 2. 8. 20:34