HTML
<!DOCTYPE HTML>
<html>
<body>
<header>
<h1>실력이 탐나는 시리즈</h1>
</header>
<section>
<figure>
<img src="images/book_photoshop.gif" width="135" height="168"
alt="photoshop 책 표지" class="floatLeft" />
</figure>
<h2>전략적 실전 대비 입문서</h2>
<dl>
<dt>개념 이해부터 기능 실습까지, 완벽한 내용 정리!</dt>
<dd>기초적인 기능 하나도 제대로 파악하고 써먹을 수 있게, 개념을 충분히 이해시키고 실습에 임할 수 있는 구성을
채용하였습니다. 체계적인 내용 정리로 기본기를 꽉 다잡아 보세요.</dd>
<dt>한 번 배운 내용을 확실히 내 것으로, 충분한 활용 실습!</dt>
<dd>각 장에서 배운 기능을 확실히 복습할 수 있도록 실전 문제를 풀어보는 코너를 제공합니다. 포토샵의 막강
기능을 자연스럽게 내 것으로 만들어 활용해 보세요.</dd>
<dt>곁에 두고 바로 꺼내보는, 든든한 길잡이!</dt>
<dd>포토샵을 사용하면서 궁금해 할 수 있는 다양한 팁을 Q&A 형태의 책 속 부록으로 제공합니다.
본문에서 다루는 핵심 기능과 실습 문제, 게다가 다양한 팁까지 곁에 두는 것만으로도 든든한 길잡이가 되어줄 것입니다.</dd>
</dl>
<figure>
<img src="images/snow_book1.png" width="331" height="225"
alt="photoshop 책 내용 샘플" class="floatRight" />
</figure>
<p>"사용자의 아이디어로 만들었다."라는 슬로건처럼 포토샵은 사용자의 편의성과 호환성, 안정성을
자랑하며, 출시되자마자 선풍적인 인기를 끌며 꾸준한 판매고를 올리면서 그 입지를 굳히고 있습니다.
실행속도가 굉장히 빨라졌고, 이전 버전의 윈도우에서 여러 단계를 거쳐야 했던 작업들이 획기적으로 단축되었습니다. 메모리 및
전력효율도 탁월하게 좋아졌으며, 멀티미디어 기능은 더욱 더 막강해졌고, 네트워킹 역시 아주 간편해졌습니다.</p>
</section>
</body>
</html>
CSS
body {
font: 12px "맑은 고딕", 돋움, arial;
margin-top: 20px;
}
header {
width: 660px;
margin: 0 auto; /* 가운데 정렬 */
}
section {
width: 660px;
margin: 30px auto 0px auto;
/* 30px 0px 와 30px 0px auto 이 둘은 같게 나오고 위의 설정과는 다르게 나온다. */
}
h1 {
font-size: 2em;
color: #ffffff;
text-align: center;
width: 300px;
margin: 0px;
padding: 5px;
background-color: #666;
border-radius: 25px;
}
h2 {
font-size: 1.5em;
}
dl {
margin-top: 30px;
}
dt {
font-weight: bold;
color: #09c;
}
dt:before {
content: " // ";
font-size: 2em;
color: #666;
}
dd {
line-height: 150%;
margin: 5px 0px;
color: #a2a2a2;
}
p {
line-height: 150%;
margin: 20px 0px;
padding-top: 20px;
text-align: justify;
}
.floatLeft{
float : right; /* 이미지 오른쪽 이동 */
margin : 10px 0px 10px 30px;
}
✅ 전체 정리
- 이 코드는 이미지를 float 속성으로 문단 옆에 배치하는 예제
- float: right; 또는 float: left;로 이미지를 띄우고, 텍스트가 옆으로 흐르게 만듦
- header와 section은 가운데 정렬된 고정폭 컨테이너
- caption, dt, dd, p에 각각 글꼴, 색상, 여백, 줄간격을 적용해 가독성 향상
'기초 및 언어 > ▶ HTML & CSS' 카테고리의 다른 글
| 9. CSS_이미지 요소를 세로로 배치하기 (0) | 2025.09.07 |
|---|---|
| 8. CSS_position (0) | 2025.09.07 |
| 6. CSS_테이블에 관련된 속성 알아보기 (0) | 2025.09.07 |
| 5. CSS_그림자 효과 만들기 (0) | 2025.09.06 |
| 4. CSS_배경 관련 CSS 속성 (0) | 2025.09.06 |