HTML+CSS (기초) float 속성 사용하기.

<최종 화면>

이제 최종 화면 처럼 만들기 위해 임의 이미지, 글을 추가해보자.

뉴스 신문 기사 처럼 이미지 + 텍스트가 배치 되도록 해보자.

우선 이미지 먼저 임의로 사용한다.

lor 자동 입력을 하면 긴 글이 생성될 것이다.

p요소로 썼기 때문에, 아래에 배치된다.

img에 float:left 속성을 주면 왼쪽으로 붙고 위로 뜬 느낌이 된다. 그러면 p요소가 옆에 보여진다.

float의 문제를 보기 위해 p 요소를 추가해보자.

위 사진과 같이 웹 페이지를 늘리면, 이미지 아래에 놓고 싶더라도 다시 이미지 옆에 놓인다.

이것을 이미지와 먼저 있던 글과 무관하게 아래에 놓고 싶다면 아래 코드를 추가하자.

이미지와 그 오른쪽에 있는 글이 너무 붙어 있다. 마진을 줘보자.

새로 p요소를 추가하고, 배경을 주면 확연히 보일 것이다. (아래에 깔리는 느낌, 페이지가 작을때는 안보인다.)

이미지와 글에 간격을 주도록 이미지에 margin 속성을 주자.

<복붙용 코드>

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
32
33
34
35

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float style</title>
 
        <style>
            img{ float: left;}
 
            .p2{ clear: both;}
 
            /* float된 이미지와 요소의 마진을 주고 싶으면 */
            /* float된 이미지에 margin을 적용 */
            img{ margin: 10px;}
 
        </style>
 
    </head>
    <body>
        <img src="sunshine.jpg" alt="image" width="160" height="120">
        <!-- 왼쪽 마진 적용해보기 : 잘 안됨 -->
        <p style="margin-left: 10px;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam delectus saepe amet! Aliquid odio quia provident suscipit culpa, eaque enim labore possimus deleniti quos expedita laudantium, obcaecati ad cumque voluptates.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates itaque molestias nihil debitis enim natus repellendus corrupti commodi quidem doloremque ex necessitatibus dolore earum laborum animi, numquam beatae, quaerat error.
        </p>
 
        <!-- float에 의해 요소가 아래에 깔리는 것을 확인해보기 -->
        <p style="background-color: cadetblue; border: 2px solid red;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam repellendus molestias tempora voluptate beatae enim doloremque a, veritatis repudiandae tenetur exercitationem est quam esse repellat labore autem nesciunt corporis facilis.
        </p>
 
        <p class="p2">여기는 위 이미지와 상관없는 새로운 블럭입니다.</p>
 
    </body>
</html>
 

저작자표시

'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글

HTML+CSS (기초) index 속성 이용하기. (0)	2019.12.09
HTML+CSS ( 기초) float 속성 [이미지 배치해보기] (0)	2019.12.09
HTML+CSS (기초) display, position 속성 스타일 적용하기 (0)	2019.12.06
HTML+CSS (기초) table 스타일 적용하기 (2)	2019.12.06
HTML+CSS (기초) 리스트 스타일 적용 [홈페이지 로고,텝 같은.. 기초적 만들기] (0)	2019.12.06