250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

커리까지

CSS 수업 - float 1 본문

CSS

CSS 수업 - float 1

목표는 커리 2021. 3. 26. 18:14
728x90
SMALL
  • 레이아웃 잡을때도 많이 사용한다.
  • 요즘은 flex로 많이 잡는다.
<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                width:300px;
                float: left;
                margin-right: 20px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <img src="![20200116_002721](https://user-images.githubusercontent.com/52574837/112609600-0f9e4500-8e5f-11eb-9edd-340ffac0bf3b.jpg)" alt="">
        <p>
            펭하
        </p>
    </body>
</html>

css39

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                width:300px;
                float: left;
                margin-right: 20px;
                margin-bottom: 10px;
            }
            p{
                border:1px solid gray;
            }
        </style>
    </head>
    <body>
        <img src="![20200116_002721](https://user-images.githubusercontent.com/52574837/112609600-0f9e4500-8e5f-11eb-9edd-340ffac0bf3b.jpg)" alt="">
        <p>
            펭하
        </p>
        <p style="clear: both;">
            펭하
        </p>
    </body>
</html>

css40

  • clear이랑 float랑 같아야지 적용된다. 일일이 확인하기 번거로워서 both를 사용한다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

[생활코딩] CSS 수업 - 배경  (0) 2021.03.30
[생활코딩] CSS 수업 - float 2 : holy grail layout  (0) 2021.03.29
CSS 수업 : mediaquery 1 - 기본  (0) 2021.03.25
CSS 수업 - Multi column  (0) 2021.03.24
CSS 수업 - flex 5 : 기타 속성 들  (0) 2021.03.23
'CSS' Related Articles more
Comments