이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS, Media Query를 이용해 반응형 홈페이지 만들기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 반응형 웹을 만들기 위한 Media Query 기초 이 포스팅은 PC로 작성되었
gogogameboy.tistory.com
지난 글에서는 반응형 웹사이트를 제작하는데 있어서 정말 중요한 CSS 속성인 Media Query를 공부했습니다.
이번에는 float에 대해서 배워보겠습니다.
float로 자연스럽게 이미지 삽입하기
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
삽입하는 이미지에 위와 같은 속성을 넣어주면 책이나 신문, 잡지 등에서 글의 본문 사이에 자연스럽게 이미지가 삽입되는 것 같은 효과를 줄 수 있습니다.
위의 소스 코드에는 적어놓지 않았지만, 본문에 해당하는 <p> 태그 안에 style="clear:both;" 라는 속성을 추가 시키면 삽입한 이미지의 옆이 아닌 아래에서부터 글이 시작되게 할 수 있습니다.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, ratione. Fugit enim temporibus corrupti? Quidem voluptatum modi illum consequatur voluptas earum aperiam expedita omnis, quae sint magnam consequuntur culpa recusandae quasi, dolores ea saepe natus, eveniet enim nostrum hic! Saepe ratione magnam doloribus corrupti officiis, ea ipsa nemo laudantium ducimus. Nam ea at ipsam repellat esse cupiditate, minima, cumque ducimus, iste recusandae eos perspiciatis earum. Soluta necessitatibus reprehenderit dignissimos minus fugit illo explicabo labore, tempora laboriosam molestias accusamus repellendus consectetur doloremque repudiandae rem, amet expedita blanditiis possimus sed aliquam, nemo natus veritatis! Voluptatum, culpa! Quod iusto cum explicabo et praesentium recusandae nemo. Placeat saepe temporibus est consectetur quaerat deserunt error, eum, perspiciatis corporis facilis sed, voluptatem iure molestiae quae debitis quas ducimus. Placeat, modi! Debitis, nobis commodi provident, aut similique explicabo magni natus corporis odio laboriosam voluptatibus recusandae assumenda laudantium dolorum ipsum quaerat. Labore, totam nulla. At quas laboriosam iure commodi sint, sapiente eos ut, rem dicta nesciunt dolorum, temporibus ea officia quibusdam magnam culpa explicabo cum? Laudantium est dicta numquam iste ratione consectetur quod cum. Quos incidunt nostrum quaerat fuga eum! Tenetur officiis iure ex! Nemo dolores, corrupti veniam voluptatum ratione reiciendis voluptatibus vel quisquam, excepturi molestias eaque alias.
이 소스 코드로 위와 같은 웹페이지가 만들어졌습니다.
유용하게 잘 써먹으면 예쁜 웹페이지를 만들 수 있을 것 같은 느낌이 드네요. ^^
다음 포스트
CSS, float 속성을 이용해서 만드는 Holy Grail Layout
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, float 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 배경 색과 이미지 (0) | 2021.01.08 |
|---|---|
| CSS, float 속성을 이용해서 만드는 Holy Grail Layout (0) | 2021.01.08 |
| CSS, Media Query를 이용해 반응형 홈페이지 만들기 (0) | 2021.01.06 |
| CSS 반응형 웹을 만들기 위한 Media Query 기초 (0) | 2021.01.06 |
| CSS 신문을 보는 것 같은 레이아웃 (0) | 2021.01.05 |
댓글