-
css floatFrontEnd/css 2023. 8. 11. 16:37반응형
✅ 아래 내용들에 대해서 알아보자
- display
- 예제 코드Float
float 속성은 요소를 왼쪽이나 오른쪽으로 띄워서 다른 요소 주위로 배치하는데 사용되는 속성이다.
float을 사용하면 html 요소는 흐름에서 벗어나 특정 위치에 배치될 수 있다.
종류 특징 none 요소를 띄우지 않고 기본 흐름대로 배치(기본값) left 요소를 왼쪽에 띄워서 주변 컨텐츠가 오른쪽으로 흐르게 한다. right 요소를 오른쪽에 띄워서 주변 컨텐츠가 왼쪽으로 흐르게 한다. inherit 부모 요소로부터 float 속성 값을 상속받는다. initial 기본값으로 설정 예제 코드
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> /* float - float을 사용하면 html 요소는 원래 흐름에서 벗어나 붕붕 떠다니듯 배치가 된다 - none: 기본값으로 요소를 띄우지 않음 - left: 왼쪽에 띄움 - right: 오른쪽 - inherit: 부모 요소로부터 상속함 - initial: 기본값으로 설정함 */ img { width: 300px; } .container { width: 600px; border: 1px solid black; } .float-left { float: left; margin-right: 20px; } .float-right { float: right; } /* float 영향을 받지 않고 새롭게 배치하는 옵션 */ .clear { clear: both; } </style> <body> <div class="container"> <img src="assets/img/ice-1.jpg" class="float-left" alt="" /> <p> 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 </p> <p> 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 </p> <p> 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 </p> <p class="clear"> 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 수박 빙수 존맛탱 1 </p> <!-- <img src="assets/img/ice-2.jpg" class="float-right" /> <p> 초코 빙수 존맛탱 2 초코 빙수 존맛탱 2 초코 빙수 존맛탱 2 초코 빙수 존맛탱 2 초코 빙수 존맛탱 2 초코 빙수 존맛탱 2 초코 빙수 존맛탱 2초코 빙수 존맛탱 2 </p> --> </div> </body> </html>float:left의 경우 텍스트가 오른쪽에 배치되고 그림은 기본 배치에서 벗어나 왼쪽에 배치되는것을 볼 수 있다.
float:left float:right의 경우 텍스트가 왼쪽에 배치되고 그림은 기본 배치에서 벗어나 오른쪽에 배치되는것을 볼 수 있다.
float:right 반응형'FrontEnd > css' 카테고리의 다른 글
css 가상클래스/가상 요소 (0) 2023.08.11 css position (0) 2023.08.11 css display (0) 2023.07.31 CSS 폰트 및 크기 (0) 2023.07.30 CSS 선택자(Selector) (0) 2023.07.30