I am developing person.

Float

https://tjdnjs.github.io/Web-practice/float.html

1. 사진 옆에 글씨가 올 수 있다

img는 블록태그이므로, 줄바꿈이 되어 다음 요소가 표현되는데, 사진의 옆에 글을 띄우고 싶다면, float 속성을 사용할 수 있다. 아래와 같이 float:left 로 설정할 경우, 사진이 좌측에, 글이 우측에 띄워지게 된다.

img{
    width: 15%;
    float: left;
    margin: 2%; margin-top: 1%;
}

2. 특정 단락은 분리해서 표시하고 싶을 때

사진과 분리하고 싶은 p태그에 style = “clear:both” 를 적는다. 이때, clear의 값으로는 left, right, both가 있는데, left는 float이 left일 때, right는 float이 right일 때 분리해준다. both의 경우 두 상황에서 모두 사진과 해당 단락을 분리해주기에 보통 both를 사용한다.

<p style="clear:both">
</p>

참고