[CSS-Visual Studio Code] Float

 

 

 

 

 

 

 

---

 

 

 

 

float

 

float: left | right ;

 

- float이란 이름의 속성이 있다.

- 기존의 출력정책을 깨고, 혼자 자신의 위치에서 벗어나서 현재라인의 좌측(우측) 끝으로 이동한다.

 

- 이미지, 텍스트 > 인라인 태그 > 같은 라인에 출력된다.

- 이미지와 텍스트의 높이가 서로 다르다. -> 그래서 여백이 생기게됨 -> 메꿔야함 float 이용!

- align은 이미지를 정렬하려고 만든속성이 아니다.(HTML)

- 서식이라서 CSS이용해야함

 

여백이 생긴다.

 

float 이용하면 글씨가 이미지를 감싼다.

 

 

 

 추가적인 밑줄이 필요할때

  로 이용해도 되나

border-bottom 을 이용해서 px단위로 만들 수 있다.

 

아래의 코드로 실행시 나오는 화면

 

#title {
    /* text-decoration: underline dashed red 2px; */
 
    border-bottom: 1px solid black; 
    width: 400px;
    padding-bottom: 20px;
    
}

 

 

 

 

float를 가장 많이 사용하는 상황 예시

 

1. HTML 코드

HTML

 

---

2. CSS 코드

 

CSS

 

---

3. 화면

 

결과화면

---

4. 새로운 내용 시작

새로운 라인 작성 코드. 이렇게 안하면 글씨가 상자옆에서 감싸안듯 써진다.

 

 

결과 화면

---

 

 

---