250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

커리까지

CSS 수업 - 포지션 1 : relative VS static 본문

CSS

CSS 수업 - 포지션 1 : relative VS static

목표는 커리 2021. 3. 12. 08:11
728x90
SMALL
  • 포지션은 각각의 위치를 정해준다.
<html>
    <head>
        <style>
            html{
                border:1px solid gray;
            }
            div{
                border:5px solid tomato;
                margin:10px;
            }
            #me{
                position:relative;
                left:100px;
                top:100px;
            }
        </style>
    </head>
    <body>
        <div id='other'>
            other
        </div>
        <div id='parent'>
            parent
            <div id='me'>
                me
            </div>
        </div>
    </body>
</html>
  • left가 우선, top이 우선.
  • 포지션
    • 이 값의 기본은 static다.
    • 원래 위치해야하는곳에 정적으로 위치힌다.
    • 바꾸고 싶으면 상대적으로 바꾼다.
      • 이 때 오프셋을 사용할 수 있다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

CSS 수업 - 포지션 3 : fixed  (0) 2021.03.16
CSS 수업 - 포지션 2 : absolute  (0) 2021.03.15
CSS 수업 - 마진 겹침 3  (0) 2021.03.11
CSS 수업 - 마진 겹침 2  (0) 2021.03.10
CSS 수업 - 마진 겹침 1  (0) 2021.03.09
'CSS' Related Articles more
Comments