Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- toFixed()
- 1521
- Parent
- 주석이 먹히지 않을 때
- 소스트리인증실패
- Math.ceil()
- 파일질라다운로드
- hide
- slideUp
- removeClass
- ctrl+/
- index %
- addClass
- 파일질라설치
- SUB함수
- FileZilla설치
- calc.minus
- Math.round()
- 파일질라설치오류
- FileZilla다운로드
- selectoptions
- is_check
- excel중복체크
- calc.plus
- push오류
- 증가값
- selectedIndex
- Excel
- Math.floor()
- Git
Archives
- Today
- Total
잡동사니에도 사랑을
[21.09.17] exam06(05_cssPositioning) - 상대 배치 본문
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
display:inline-block;
width: 50px;
height: 50px;
border: 1px solid lightgray;
text-align: center;
color: white;
background: red;
}
#down:hover {
position: relative;
left: 20px;
top: 20px;
background: green;
}
#up:hover {
position: relative;
right: 20px;
bottom: 20px;
background: green;
}
</style>
</head>
<body>
<h3>상대 배치, relative</h3>
<hr>
<div>T</div> div는 블럭 단위로 움직임
<div id="down">h</div>
<div>a</div>
<div>n</div>
<div id="up">k</div>
<div>s</div>
</body>
</html>
728x90
반응형
'JAVA_EE > CSS' 카테고리의 다른 글
[21.09.17] exam08(05_cssPositioning) - 화면을 기준(fixed)으로 자리 배치 (0) | 2021.09.17 |
---|---|
[21.09.17] exam07(05_cssPositioning) - 각기 다른 위치에 글씨 넣기(display, position, border 설정) (0) | 2021.09.17 |
[21.09.17] exam05(05_cssPositioning) - (0) | 2021.09.17 |
[21.09.17] exam04(05_cssPositioning) - float / text-align: justify(양쪽정렬) (0) | 2021.09.17 |
[21.09.17] exam03(05_cssPositioning) (0) | 2021.09.17 |