<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 요소 자유롭게 배치하기 </title>
<style>
*{
margin:0; /* 마진 초기화 */
padding:0; /* 패딩 초기화 */
}
p {
width:300px; /* 너비 - 300px */
border:1px solid #ccc; /* 테두리 - 1픽셀 회색 실선 */
padding:10px; /* 네방향 패딩 10px */
}
#pos1 {
position:absolute; /*포지셔닝- absolute*/
left:50px; /*왼쪽에서 50px 떨어지게 */
top:50px; /*위쪽에서 50px 떨어지게 */
}
#pos2 {
position:absolute;
right:100px;
top:100px;
}
#pos3 {
position:absolute;
left:100px;
bottom:100px;
}
</style>
</head>
<body>
<p id="pos1">원산지 관리사</p>
<p id="pos2">외환전문역 2종</p>
<p id="pos3">국제무역사 1급</p>
</body>
</html>
결과 :텍스트 요소 자유롭게 배치하기
'css' 카테고리의 다른 글
| 8장 실습 5 (0) | 2023.03.28 |
|---|---|
| 8장 예제 - position 속성으로 요소 위치 저장하기 (0) | 2023.03.28 |
| 8장 실습 4 (0) | 2023.03.28 |
| 8장 실습 3 (0) | 2023.03.28 |
| 8장 예제 - 수평 내비게이션 만들기 (0) | 2023.03.27 |
