이진욱의코딩

<css> float에 대해 알아보도록 합시다. 본문

CSS

<css> float에 대해 알아보도록 합시다.

Crucifi 2019. 10. 8. 02:06

이번 시간에는 css에서 float속성에 대해서 알아보도록 하겠습니다.

흔히 블로그에서 글을 보거나 책에서 첫 페이지 시작할 때 첫 문자는 대문자로 합니다.

이 속성을 "::first-letter" 이라는 속성입니다.

 

 p::first-letter{font-size:50px; color: blue;}

이렇게 색상과 크기를 조정해서 사용할수 있습니다.

 

이미지를 넣어서 그 이미지에 맞게 글을 배치하는 방법도 있습니다.

바로 float속성에서 none,left,right를 선택해서 사용하면 됩니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    img{float: none;}
    p::first-letter{font-size:50px; color: blue;}
    p:first-of-type{width: 350px; float: left; }
    p:last-of-type{width:350px; float: right;}
    </style>
</head>
<body>
    <img src="C:/Users/이진욱/Desktop/새 폴더/images/짱구.jpg" alt="짱구와짱아">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus ad totam nam ut aspernatur saepe possimus nisi nemo consequatur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem, magnam non quaerat et temporibus quos asperiores illum provident rem esse necessitatibus ullam, blanditiis quibusdam. Culpa, quae maxime molestias nobis in atque accusamus illum voluptatem enim vitae eveniet ullam tempora velit natus tempore ut, asperiores optio hic amet sed officiis dicta laboriosam? Saepe autem molestias inventore dolor. Quas.Ad placeat recusandae dignissimos numquam fugiat dolorum sint dolorem minima eum magni quisquam itaque, aperiam reprehenderit doloremque unde deserunt vel nisi.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus odio placeat autem,.</p>
</body>
</html>

 

가운데 정렬입니다.

 

 

none은 기본값으로 정렬하지 않을때 사용하고, right는 오른쪽, lest는 왼쪽으로 정렬할 때 사용합니다.

여기서 주의할점은 img태그를 body태그 안에 쓸 때 글의 윗부분에 적어야 합니다.

아니면 글의 밑에 배치되기 때문이지요.

 

이제 실전으로 가서 float속성에 대해 더 자세히 알아보도록 합시다.

 

이런식의 레이아웃을 짜봅시다.

위의 사진같은 레이아웃을 짜 보도록 하겠습니다.

도형이 총 4개이므로 4개의 div를 먼저 만들고 각각의 div에 id속성을 추가시켜 줍니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     /* 가로 800px크기의 2단 레이아웃을 만들어 봅니다. */
     body{margin: 0;}
     #wrap{
            width: 800px; margin: 0 auto;
     }
     #header{
         width: 800px;
         height: 200px;
         background-color: aquamarine;
         margin: 0 auto;
     }
     #section{
        width: 500px;
        height: 500px;
        background-color:coral;
        float: left;
     }
     #aside{
         width: 200px;
         height: 300px;
         background-color: darkcyan;
         float: right;
     }
     #footer{
         /* width: 800px; */
         height: 150px;
         background-color: pink;
         margin: 0 auto;
         clear: both;
     }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header"></div>
        <div id="section"></div>
        <div id="aside"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

 

margin값을 0 auto로 설정해서 창을 줄이거나 늘여도 가운데에 배치되게 만들었습니다. 그리고 각각의 float속성을

따로 입력해서 코드를 완성시켰습니다. clear:both로 해서 바닥의 footer를 위치시켰습니다.

 

이제 여기서 도형사이의 빈 곳에 색을 한번 넣어봅시다.

 

이렇게 말입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     /* 가로 800px크기의 2단 레이아웃을 만들어 봅니다. */
     body{margin: 0;}
    
     #header{
         width: 800px;
         height: 200px;
         background-color: aquamarine;
         margin: 0 auto;
     }
     #container{
         width: 800px;
         height: 500px;
         background-color: yellow;
         margin: 0 auto;
     }
     #section{
        width: 500px;
        height: 500px;
        background-color:coral;
        float: left;
     }
     #aside{
         width: 200px;
         height: 300px;
         background-color: darkcyan;
         float: right;
     }
     #footer{
         width: 800px;
         height: 150px;
         background-color: pink;
         margin: 0 auto;
         clear: both;
     }
    </style>
</head>
<body>
        <div id="header"></div>
        <div id="container">
            <div id="section"></div>
            <div id="aside"></div>
        </div>
        <div id="footer"></div>
</body>
</html>

저는 body부분에 section과 aside부분을 container라는 div로 묶었습니다.

이렇게 하고 style태그에서 container를 추가한 뒤에 footer부분에서 주석 처리했던 넓이 부분을 활성화시켰습니다.

 

여기서 4가지 방법이 존재합니다.

 

※ float적용시 레이아웃이 깨지는 현상을 막는 방법 4가지
        

1. float를 적용한 요소의 부모가 없을 경우 형제요소에게 cloar를 적용(left, right, both)
        
  [float를 적용한 요소의 부모가 있을경우]
         
2. 부모요소에게 높이 적용(ex/ heught:300px;)
3. 부모요소에게 overflow적용 (hidden, auto)
4. 부모요소에게::after 선택자 적용 후 content:""; display:block; clear:both; 적용방법이 존재합니다.

 

이렇게 오늘 float속성을 이용한 여러 가지 레이아웃을 만들어 봤습니다.

감사합니다~~       

'CSS' 카테고리의 다른 글

<css> 위치(position)에 대해 알아봅시다.  (0) 2019.10.05
여러가지 폰트속성에 대해서 알아봅시다.  (2) 2019.10.05
css의 여러가지 선택자에 대해 알아봅시다.  (0) 2019.09.24
스타일시트 적용방법에 대해 알아봅시다.  (0) 2019.09.24
미디어 쿼리 써먹기(응용)  (0) 2019.07.15
'CSS' Related Articles more