[html/css] display, position 제어

9681 단어 CSSpositionCSS

1. 박스의 유형 제어

1-1 display 프로퍼티

display:block

태그가 출력되는 블록 박스의 크기를 변경할 수 있으며, 한 줄을 독점적으로 차지하여 양 옆에 다른 요소가 배치되지 않는다.

display:inline

새 라인에사 시작하지 못하고 라인 안(inline)에서 배치된다.
width, height로 크기조절이 불가능하며 margin값도 조절 불가하다.

dispaly:inline-block

새 라인에사 시작하지 못하고 라인 안(inline)에서 배치된다.
인라인 속성과 다르게 크기와 margin값이 조절 가능하다.

display:none

박스가 생성되지 않는다. 공간도 차지하지 않음

<html>
    <head>
        <style>
            #box-container > div, #box-container > span{
                border: 2px solid #09c;
                margin: 3px 0;
                padding: 5px;
}
            .none{ display: none }
            .block1{ display: block }
            .block2{ display: block; width: 300px; height: 60px; }
            .inline{ display: inline; width: 200px; height: 60px; }
            .inline-block{ display: inline-block; width: 200px; height: 60px; }
            .default-inline, .default-block{ width: 200px; height: 60px; }
        </style>
    </head>
    <body>
        <div id="box-container">
            <div class="none">none</div>
            <div class="block1">block1</div>
            <div class="block2">block2</div>
            <span class="inline">inline</span>
            <span class="inline-block">inline-block</span>
            <span>detualt inline-block</span>
            <div>block3</div>
        </div>
    </body>
</html>

1-2 position 프로퍼티

position:static

일단 모든 태그들은 처음에 position: static 상태다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다. (기본적으로 static이라 따로 써주지 않아도 됨.)

postion:relative

top, right, bottom, left 속성을 사용해 위치 조절이 가능하다.

각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동한다.

postion:absolute

부모 중에 포지션이 relative, absolute, fixed인 태그면 그 부모태그 기준으로 움직인다.
만약에 부모 중에 relative, absolute, fixed 태그가 없으면 body로 기준이 된다.

position:fixed

스크롤을 내려도 그 자리에서 고정되어 있는 태그

#5557
교육 35일차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage